1. CSS의 Cascading에 대해 설명해 주세요.
CSS : Cascading StyleSheet
Casecade : 계단 형태가 있는 폭포 ==> 즉, 순서가 있다.
다시 말해, 계단에 따라 흐르는 것처럼 CSS 규칙에 따라 CSS 속성을 적용하는 것
1) 같은 선택자라도 코드가 아랫줄에 있을수록 캐스케이딩에서 우선순위가 높다.
2) 웹 브라우저 기본 스타일시트보다 사이트에서 작성한 스타일시트가 우선순위가 높다.
3) 명시도 점수가 높을수록 캐스케이드에서 우선순위가 높다.
- 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열하여 점수를 부여한다.
스타일 우선순위
- 중요도
사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일 - 적용 범위
!important > 인라인 스타일 > id 스타일 -> 클래스 스타일 -> 타입 스타일 - 소스 작성 순서
나중에 작성한 스타일이 먼저 작성한 것을 덮어쓴다.
스타일 시트 종류
- 브라우저 기본 : 웹 브라우저에 웹 문서를 표시할 때 기본으로 사용하는 스타일
- 인라인 : style 속성을 사용해서 직접 작성한 형태
- 내부 스타일 : <body> 태그 안에 작성한 것
- 외부 스타일 : import하여 사용하는 외부 파일
2. position의 속성들과 각각의 특징을 설명해 주세요.
| position: static / relative / absolute / fixed / sticky |
position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 정확한 위치 지정을 위해서 top, left, bottom, right 속성값과 함께 사용한다.
position: static
기본 설정 값. HTML에 작성된 순서대로 브라우저 화면에 나타난다. 따라서, top-left-bottom-right 속상값은 무시된다.
position: relative
요소를 원래 위치를 기준으로 상대적(relative)으로 배치하는 것이다. 이때, 방향 속성값을 사용하여 위치를 옮길 수 있다.
position: absolute
배치 기준을 position: static이 아닌, 상위 요소에 맞춰 배치한다. 관례적으로 어떤 요소에 속성값을 absolute를 부여했다면, 부모 요소의 속성값에 relative를 부여한다. 만약 없다면, DOM 트리의 최상위에 있는 <body> 요소를 기준으로 배치한다.
position: fixed
스크롤 여부와 상관없이 화면상에 항상 고정된 위치에 있도록 배치한다. 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문이다.
position: sticky
브라우저 화면을 스크롤할 때 효과가 나타난다. 설정을 통해, 특정 위치에 다다르면 효과가 나타난다.
'코드잇 스프린트 6기 > 위클리 페이퍼' 카테고리의 다른 글
| [6주차] 동기-비동기 코드 실행순서 / Virtual DOM (0) | 2024.04.14 |
|---|---|
| [5주차] 버블링 / 캡처링 / 위임 / HTTP 메서드 (0) | 2024.04.07 |
| [4주차] 얕은 복사 - 깊은 복사 / 원시 타입 - 객체 타입 / var-let-const / 호이스팅 / 스코프 (0) | 2024.03.27 |
| [3주차] Git branch merge 방법 / Git Flow 브랜치 전략 (0) | 2024.03.19 |
| [2주차] 시맨틱 태그 / (0) | 2024.03.17 |
댓글