안녕하세요, 김당쿽입니다! 🥕
프론트엔드 개발자 면접에서 자주 받을 수 있는 질문들 중 CSS와 관련된 자료들을 정리한 포스트입니다.
CSS?
CSS는 Cascading Style Sheets의 약자로 프로그래밍 언어, 마크업 언어가 아닌 Style Sheet 언어입니다. CSS의 전체 구조는 rule set 혹은 rule이라고 불리며, 선택자, 선언, 속성, 속성 값으로 이루어져 있습니다.
- 각 rule set은 선택자로 구분을 하며 반드시
{}로 감싸져야 한다. - 각 선언 안에, 각 속성을 해당 값과 구분하기 위해
:을 사용하여야 한다. - 각 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해
;을 사용하여야 한다.
쌓임 맥락
쌓임 맥락 stacking context는 가상의 Z축을 사용한 HTML 요소의 3차원 개념화. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹 페이지를 바라보고 있는 것으로 가정한다.
쌓임 맥락은 문서 어디든 다음 조건을 만족하는 요소가 생성한다.
- 문서의 루트 요소.
<html> position이absolute또는relative이고,z-index가auto가 아닌 요소.position이fixed또는sticky인 요소.flex컨테이너의 자식 중z-index가auto가 아닌 요소.grid컨테이너의 자식 중z-index가auto가 아닌 요소.opacity가 1보다 작은 요소.mix-blend-mode가normal이 아닌 요소.- 다음 속성 중 하나라도
none이 아닌 값을 가진 요소.transformfilterperspectiveclip-pathmask
isolation이isolate인 요소.-webkit-overflow-scrolling이touch인 요소.will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.contain이layout,paint또는 둘 중 하나를 포함하는 값인 요소.
쌓임 맥락에서 자식의 z-index 값은 부모에게만 의미가 있다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주된다.
참고 사이트
참고 사이트
웅냥냥