CSS의 구조
css는 다음과 같은 구조로 이루어져 있으며, 각 selector를 node라고 부른다.
selector { property : value; }
이 글에서는 구조에 명시된 순서대로 css에 대하여 알아보기로 한다.
selector의 종류
html의 태그의 종류, 태그에 부여된 id와 class의 이름, html 간 계층적 구조에 의해 하나의 html 태그라도 이를 나타내는 다양한 selector 표현이 존재할 수 있다.
여기에서는 주로 사용하는 selector 표현에 대해서만 정리해 보기로 한다.
- 태그 이름: tagName { }
- 클래스: .className { }
- 아이디: #idName { }
- 자식 (바로 한 계층 아래만): parent > child
- 자손 (하위 계층을 모두 포함): ascendant descendant
- 자손의 id 또는 class ascendant(# or .)descendant
- N번째 자식: selector:nth-child(N)
- 특정 타입을 가진 태그: input[type="submit"]
- 특정 태그를 제외: selector:not(tag)
Property의 종류와 컨벤션
전체적으로 외부->내부 순서로 기입하는 추세인 것 같다.
컨벤션은 NHN 컨벤션을 참조했으며,
Property에 대한 설명은 다음 사이트를 참고했다.
- display (표시)
- overflow (넘침)
- float, clear (흐름)
- position (위치)
- top right bottom left (상대적인 위치)
- z-index (상대적인 우위)
- width, height (크기)
- margin, padding (외부/내부 간격)
- border (테두리)
- background (배경)
- font-color, align 등 (글자 속성)
- animation, transform, transition (동작)
- 그 외
value의 단위의 종류
- px: 픽셀
- em: 부모 태그의 font-size를 기준으로 하는 단위
- rem: 최상위 태그(보통 html)의 font-size를 기준으로 하는 단위
- vw/vh: 현재 브라우저의 너비/높이값
- vmin/vmax: 너비, 높이 중 작은 크기가 vmin, 큰 크기가 vmax가 (모바일에서 주로 이용)
- ex,ch: 글자 수에 영향을 받음. 폰트의 세밀 조정 시 사용