CSS
Selector
*
- 페이지 전체 요소를 선택
- 보통
margin,padding등의 디폴트 값을 설정 - 이거 처리하는데 오버헤드가 좀 있음
- 탑레벨 뿐만 아니라 자식 선택자에도 쓸 수 있음
type
- 해당 타입의 요소 전체를 선택
- 페이지 전체의 특정 요소 타입 e.g.,
a나ul을 선택함
#id
- 아이디 선택자
- 아이디는 페이지에서 딱 하나 존재하므로 사용처를 고민해야 함
.class
- 클래스 선택자
- 클래스는 여러 개 있을 수 있으므로 적절
P C
- 자손(Descendant) 선택자
P로 선택된 요소 안에 있는C요소 전체를 선택함- 자손이므로 부모 요소와 선택된 자손 요소 사이의 뎁스가 좀 되어도 선택됨
P > C
- 직계 자식 (Direct Children) 선택자
P가 부모인C만을 선택함
X + Y
- Adjacent 선택자… 라는데,
X바로 다음에 나오는 첫번째Y만 선택함 - 이거 쓸 일이 얼마나 되려나?
X ~ Y
- Sibling Combinator… 라는데,
X + Y랑 거의 비슷한데 좀더 너그럽다고 한다. X가 앞서는 모든Y요소를 선택함
:pseudo-class
- 가상 클래스 (Pseudo-class) 선택자. 엄청 많은 가상 클래스들이 있다…
X:pseudo-class
| 설명 |
|---|---|
X:link
| 링크를 클릭하기 전 상태의 앵커 태그를 선택 |
X:visited
| 예전에 링크를 클릭했던 상태의 앵커 태그를 선택 |
X:checked
| 버튼, 체크박스 같은 “체크됨” 상태를 가지는 태그를 선택 |
X:before
| 요소 컨텐츠 바로 앞에 생성되는 자식 요소를 선택 |
X:after
| 요소 컨텐츠 바로 뒤에 생성되는 자식 요소를 선택 |
X:hover
| 유저 액션이랑 관련된 가상 클래스로 해당 요소 위에 커서가 올라가 있는 상태를 선택 |
X:not(Y)
| 모든 X 중에서 Y를 뺀 것을 선택
|
::pseudo-element
- 가상 요소 (Pseudo-element) 선택자. 역시 엄청 많다…
- 맨 처음이나 마지막 항목에 대해서 세세한 조절을 할 때 유용하게 쓰인다.
X::pseudo-element
| 설명 |
|---|---|
X::first-line
| 첫 번째 줄 |
X::first-letter
| 첫 번째 글자 |
X::first-child
| 첫 번째 자식 요소 |
X::last-child
| 마지막 자식 요소 |
X::nth-child(n)
| 1-indexed 기준 n번째 자식 요소
|
X::nth-last-child(n)
| 1-indexed 기준 마지막에서 n 번째 자식 요소
|
X::nth-of-type(n)
| 1-indexed 기준 n 번째 자식 요소 타입
|
X::nth-last-of-type(n)
| 1-indexed 기준 마지막에서 n 번째 자식 요소 타입
|
단위 속성
px: 필셀 단위 (절대). 참고로font-size기본 값은16px이다.%: 부모 요소가 만들어준 공간 안에서의 비율.em: 해당 요소에서의 폰트 사이즈의 배수. 예를 들어서 디폴트 폰트 크기가16px이므로1.5em을 적용하면 16 의 1.5배인24px이 된다. 기준 값만 정하면 나머지는 다 이 기준 값에 대한 상대적인 크기로 들어가므로 가장 많이 쓰인다.rem: 문서의 기본값에 대한 배수.em과 비슷하지만 좀 다른 것이em은 해당 요소가 쓰여진 곳(부모 태그)의 기준 값에 따라 달라지지만,rem은 문서 전체의 기준 값에 따라 달라진다.
박스 속성
height,width: 제일 안쪽의 컨텐츠 크기padding: 컨텐츠와 테두리 사이border: 컨텐츠 + 패딩을 감싸는 테두리. 여기까지가 “눈에 보이는 컨텐츠 크기”라고 봐도 될듯?margin: 박스를 배치할 때 다른 박스와의 사이에 두는 거리