안녕하세요, 김당쿽입니다! 🥕
프론트엔드 개발자 면접에서 자주 받을 수 있는 질문들 중 CSS와 관련된 자료들을 정리한 포스트입니다.
CSS는 Cascading Style Sheets의 약자로 프로그래밍 언어, 마크업 언어가 아닌 Style Sheet 언어입니다. CSS의 전체 구조는 rule set 혹은 rule이라고 불리며, 선택자, 선언, 속성, 속성 값으로 이루어져 있습니다.
{}
로 감싸져야 한다.:
을 사용하여야 한다.;
을 사용하여야 한다.쌓임 맥락 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
이 아닌 값을 가진 요소.transform
filter
perspective
clip-path
mask
isolation
이 isolate
인 요소.-webkit-overflow-scrolling
이 touch
인 요소.will-change
의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.contain
이 layout
, paint
또는 둘 중 하나를 포함하는 값인 요소.쌓임 맥락에서 자식의 z-index 값은 부모에게만 의미가 있다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주된다.
참고 사이트
참고 사이트