CSS: 선택자, 위치, 디스플레이, 플롯
florent의 개발 적응기
이 글의 주요내용
[CSS의 스타일 정의]
[CSS의 캐스케이드(Cascade)의 실제 적용]
[CSS 선택자(selector) 결합]
[CSS의 요소 위치 지정]
[CSS Display 속성(property)]
[CSS Float 속성]
[CSS의 스타일 정의]
스타일은 보통 ‘선택자 { 스타일속성: 스타일속성값 }’으로 정의
[CSS의 캐스케이드(Cascade)의 실제 적용]
여러 CSS 코드가 동일한 요소(element)를 대상으로 할 수 있지만, 적용되는 것은 ‘마지막 코드’ → ‘캐스케이드’, 위에서 아래 순서로 가기 때문에 제일 후에 요소를 대상으로 한 스타일 코드가 적용되는 것
CSS 적용 우선순위: 순서 < 구체성 < 유형 < 중요도
(1) 순서(Position)
코드 순서상 가장 마지막에 위치한 스타일이 적용됨
(2) 구체성(Specificity)
선택자(selector)가 얼마나 구체적인지 나타내는 것으로 구체성의 우선순위는 다음과 같음 ⇒ 요소(element) 선택자 < 클래스(class) 선택자 < 속성(attribute) 선택자 < 아이디(id) 선택자
(3) 유형(Type)
CSS 코드는 다음 순서로 적용 ⇒ 익스터널 CSS (External CSS) → 인터널 CSS (Internal CSS) → 인라인 CSS (inline CSS) ⇒ 다른 것들이 다 같고 유형만 다를 때, 인라인 코드가 스타일을 적용하면 사용자는 인라인 스타일을 보게 됨
(4) 중요도(Importance)
‘!important’ 키워드 → 가장 중요한 것으로 인식하게 하여 이 코드를 포함한 스타일이 우선 적용됨
[CSS 선택자(selector) 결합]
(1) 그룹 선택자 적용
두 선택자 모두에 스타일을 적용
형태: ‘선택자, 선택자 { style }’
(2) 자식(Child) 선택자
한단계 아래에 있는 직접적인 자식 선택자에 대해서만 스타일 적용
형태: ‘부모선택자 > 자식선택자 { style }’
(3) 후손(Descendent) 선택자
포함된 요소를 후손으로 간주하여, 해당 요소 하위에 속한 모든 요소에 대해 스타일을 적용
형태: ‘조상선택자 후손선택자 { style }’ ⇒ 띄어쓰기
자식 선택자는 한 단계 아래에 있는 요소만 적용하는 반면, 후손 선택자는 하위의 층위에 관계 없이 하위에 속하기만 하면 모두 적용
(4) 선택자 체이닝(Chaining)
모든 선택자에 대해 참인 요소에 대해 스타일 적용
형태: 선택자선택자{} ⇒ 붙여쓰기
혼란과 적용 문제를 피하기 위해 ‘요소 → 클래스 → 아이디’ 순서로 표기(=개념이 큰것부터 작은 순)
(5) 혼합 선택자(Combining selectors)
여러 결합자를 결합하여 사용 가능
[CSS의 요소 위치 지정]
각 위치 속성은 ‘문서 흐름’에 대한 특성을 의미함
(1) 정적(Static) 위치
HTML 기본 흐름을 따르며, 설정하지 않으면 기본값으로 적용됨
top, right, bottom, left 속성 사용 불가
(2) 상대적(Relative) 위치
문서의 일반적인 흐름에 따라 배치되지만, 추가적인 위치 조정이 가능함
top, right, bottom, left 속성으로 원래 위치에서 이동 가능
다른 요소의 배치에 영향을 주지 않음
(3) 절대적(Absolute) 위치
문서 흐름에 영향을 받지 않게 되며, 위치가 지정된 가장 가까운 조상 요소를 기준으로 배치됨
가장 가까운 위치 지정된 조상(relative, absolute, fixed, sticky) 기준
위치 지정된 조상이 없으면 초기 컨테이닝 블록(<html>) 기준으로 적용 됨
top, right, bottom, left 속성으로 위치 지정 가능
(4) 고정(Fixed) 위치
브라우저 창(뷰포트, viewport)의 왼쪽 상단 모서리 기준
스크롤해도 위치가 고정됨
top, right, bottom, left 속성으로 위치 지정 가능
(5)접착형(Sticky) 위치
Relative와 Fixed의 하이브리드
스크롤 위치에 따라 Relative에서 Fixed로 전환
특정 임계값에 도달하면 요소가 고정됨
(6)상속형(Inherit) 위치
부모 요소의 position 값 상속
(7) 기본적(Initial) 위치
기본값(Static)으로 설정
추가 정보:
Z-index: 요소의 쌓임 순서 결정 (위치 속성은 아님)
top, right, bottom, left 속성으로 정확한 위치 지정
position 속성과 함께 사용하여 요소 배치 제어
[CSS Display 속성(property)]
TMI: HTML 내의 속성은 Attribute, CSS 및 DOM의 속성은 Property라고 칭함 (한글은 같으나 영어는 다름)
‘display: inline’은 별개의 요소를 동일한 줄에 표시 ↔ 기본값은 일반적으로 ‘display: block’
‘display: block’은 페이지의 전체 너비를 블록으로 채움
‘display: inline-block’은 요소의 너비와 높이를 설정하면서 동일한 줄에 남아 있도록 함
‘display: none’은 모든 요소를 사라지게 함
[CSS Float 속성]
요소를 왼쪽 또는 오른쪽으로 떠다니게 하여 주변의 텍스트나 인라인 요소가 해당 요소를 둘러싸도록 만듦
‘clear: 방향’은 플로팅에서 벗어나 요소를 정상 위치로 되돌림
