CSS의 Cascading에 대해 설명해 주세요.
HTML 요소는 하나 이상의 스타일에 영향을 받는데, 어떤 스타일을 적용받을지 우선순위가 정해져야 한다. 이것을 cascading이라고 한다.
cascading은 3가지에 의해 결정된다.
1. CSS가 어디에 선언되어 있는지
2. 대상을 명확하게 지정해줄수록 높은 우선순위를 가진다.(명시도)
3. 코드 순서
중요도
- 태그 내에서 style 속성
- < head >의 < style >
- < head >의 < style > 안에 @important
- < link >로 연결된 CSS 파일
- < link >로 연결된 CSS 파일 내의 @important
< link >로 연결된 css 파일보다 head 내의 style이 우선순위가 더 높다.
html 요소 style 속성을 사용하는 것보다 style 이나 외부 css 파일로 빼는 것이 더 좋다.
style 이나 외부 css 파일로 빼는 이유
- 스타일과 마크업을 명확히 구분한다.
- 선택자를 사용하여 페이지 여러 요소에 규칙을 적용하여
중복을 피할 수 있다.
명시도
- !important
- id 선택자
- class 선택자
- 태그 선택자
순으로 명시도가 높고, class 선택자를 여러 개 가지고 있어도
id 선택자가 하나라도 있다면 우선순위가 더 높다.
!important는 명시도와는 관련이 없지만 선택자를 모두 무시하고 영향을 미칠 수 있다.
position의 속성들과 각각의 특징을 설명해 주세요.
position 속성에는 5가지가 있다.
- static
- absolute
- relative
- fixed
- sticky
static은 기본값으로, 다른 태그와의 관계에 의해 자동으로 배치된다.
relative는 이전 요소에 연결하여 배치하되 상대적인 위치를 지정할 수 있다.
absolute는 요소를 가장 가까운 조상 요소에 상대적으로 배치한다. 위치 지정 조상이 없을 경우에는 문서의 초기 컨테이너를 기준으로 한다.
fixed는 요소를 뷰포트에 상대적으로 배치한다. 스크롤되어도 화면에 고정되어 있다.
sticky는 요소가 스크롤되는 영역에 따라 상대적인 위치를 변경한다. 스크롤 영역을 벗어나지 않는 한 일정한 위치에 고정된다.
