선택자 (selector)
hi { color : red; }
선택자안에 컬러라는 스타일 속성을 사용해 레드라는 스타일 값을 사용하겠다
인라인(in-line) 방식
HTML 요소(태그)의 style 속성에 직접 작성하는 방식
<body> <p style="height:100px; color:blue"> </body>
내장(embedded) 방식
HTML <style> </style> 안에 작성하는 방식
<head> <style type="text/css"> .logo {color: #eeeeee;} </style> </head>
head태그 사이에 넣어주는게 작업하는데에 더 용이하다
(더 나아가 파일로 사용하는 것이 더 유용)
셀렉터 중 * 의 역할
body안에 있는 모든 태그에 적용이 됨
인접 형제 선택자 +
E의 다음 형제 요소 F 하나만 선택
일반 형제 선택자 ~
E의 다음 형제 요소 F 모두 선택
반응 선택자
특정한 상대를 선택하는 선택자
상태 선택자
input:focus focus가 된 input 태그를 선택
| input:focus | focus가 된 input 태그를 선택 |
| input:enabled | 입력이 가능한 input 태그를 선택 |
| input :disable | 입력이 불가능한 input 태그를 선택/ 비활성화 상태 |
구조 선택자
자손 선택자와 병행해서 많이 사용한다
- nth-child(수열) 수열에 따라 위치하는 태그 선택
- last-child 마지막 요소를 선택
- first-child 첫 번째 요소를 선택
짝수와 홀수로 나뉠때
- h2:first-of-type = h2 태그들 중에 첫번째
- h2:nth-of-type(2) = h2 태그들 중에 두번째
문자 선택자
h1::first-letter
h1::first-line
텍스트 드래그시 배경색 바뀌는거
'CSS' 카테고리의 다른 글
| [CSS 스타일 속성 3] 위치 속성 position z-index (0) | 2023.10.05 |
|---|---|
| [CSS 스타일속성 2] background/ border/ 폰트 (0) | 2023.10.05 |
| [CSS 스타일 속성 1] CSS 단위와 가시속성 (0) | 2023.10.05 |
