본문 바로가기
728x90

전체 글112

14. 가상 클래스 동작 가상 클래스:link : 아직 방문하지 않은 링크에 스타일 적용:visited : 방문한 링크에 스타일 적용. 기본값이 보라색:hover : 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일 적용:active : 사용자가 마우스로 요소를 클릭했을 때 스타일 적용:focus : 요소에 초점이 맞춰졌을 때 스타일 적용- 활용 코드 /* a 태그에 마우스가 올라올 때 */ a:hover { color: white; background-color: blue; } /* 방문한 적이 없는 링크 */ a:link { color: blue; } /* 방문한 적이 있는 링크 */ a:visited { .. 2024. 7. 6.
13. 속성 선택자 [속성] 선택자대괄호([ ]) 사이에 원하는 속성 입력// a 요소 중에서 href 속성이 있는 모든 요소 선택 a[href] {...}  [속성 = 속성값] 선택자주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정// a 요소 중에서 target 속성값이 '_blank'인 것만 선택 a[target = _blank] {...}  [속성 ~= 값] 선택자여러 속성값 중에서 해당 속성값이 포함된 요소 선택속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리값과 정확하게 이름이 일치하는 요소만 선택// class 값 중에 button이 있는 요소 [class ~= button] {...}  [속성 |= 값] 선택자특정 속성값이 포함된 속성에 스타일 적용지정한 값과 정확하게 일치하거나, 지정.. 2024. 7. 5.
12. 연결 선택자 하위 선택자자식 선택자인접 형제 선택자일반 형제 선택자 하위 선택자기본형: [상위요소] [하위요소] {...}하위 요소: 특정 요소를 기준으로 그 안에 포함된 요소   ex) 자식 요소, 손자 요소 등하위 선택자는 부모 요소에 포함된 모든 하위 요소를 선택한다.-활용 코드 p태그 li태그 li태그 h1태그 li태그 li태그     자식 선택자기본형: [부모요소] > [자식요소] {...}자식 요소: 부모의 바로 한 단계 아래의 요소하위 선택자와 다르게 자식 요소에만 스타일을 적용한다.- 활용 코드 .. 2024. 7. 5.
11. background 배경색배경 이미지 1. 배경색배경색 지정 (background-color)16진수, rgb, 색상 이름 등을 사용해서 지정하위 요소에 상속x 적용 범위 (background-clip)border-box: 기본값. 테두리까지 적용padding-box: 테두리를 뺀 패딩 범위까지 적용content-box: 내용(content) 부분에만 적용- 활용 코드 background-clip: border-box; border-box background-clip: padding-box; padding-box background-clip: content-box; content-box  - 실행 결과 background-clip: border-box; border-b.. 2024. 7. 5.
728x90

티스토리툴바