reset

리셋은 크로스 브라우징을 방지하고자 하는 방법 중 하나이며, 모든 브라우저 기본 속성을 초기화 시킨다. reset.css, nomalize.css 와 같은 파일명으로 제공된다. 개발자가 원하는 속성만을 초기화 시킬 수 있고, 선택적으로 적용 가능하다. 특정 스타일 속성을 재정의 할 수도 있다.

nomalize

노멀라이즈는 크로스 브라우징을 방지하고자 하는 방법 중 하나이며, 브라우저들 간의 스타일 차이를 최소화하고 요소의 스타일을 보정하는 방식이다. 정규화 파일로 제공되며 속성을 재정의 할 수 있다. nomalize.css 같은 파일명으로 제공된다.

Stacking Context

HTML요소들이 쌓이는 3D 공간을 관리하는 개념이다. 각 요소들이 쌓이는 순서, 위치, 투명도 등을 결정하며, 요소가 어떻게 쌓이는지를 제어하는 규칙들의 집합이다.

스태킹 컨텍스트를 형성하는 요소

• 루트 요소(HTML)
• 위치 속성이 있는 요소(position: absolute, relative, fixed, ..)
• 특정 CSS 속성을 가지는 요소(opacity, transform 등)

스태킹 컨텍스트에 영향을 주는 속성

z-index

요소의 쌓임 순서를 결정하는 값, 높을수록 위에 쌓인다

position

요소의 위치를 결정하고, 스태킹 컨텍스트에 영향을 준다.

opacity

요소의 투명도를 결정하고, 스태킹 컨텍스트에 영향을 준다.

transform

요소의 변형을 결정하고, 스태킹 컨텍스트에 영향을 준다.

display

요소의 표시 방법을 지정하는 데 사용된다. 요소를 블록 수준이나 인라인 수준으로 표시하거나 숨기는 등의 다양한 옵션을 제공한다.

block

요소를 블록 수준으로 표시한다. 즉, 요소가 한 줄을 차지하고 다음 요소는 새로운 줄에 배치된다. 너비(width)와 높이(height) 속성을 설정할 수 있으며, 여러 속성들의 기본값이 적용된다.

inline

요소를 인라인 수준으로 표시한다. 즉, 요소가 텍스트 흐름에 통합되어 줄 바꿈 없이 배치된다. 너비와 높이를 설정할 수 없으며, 내용의 크기에 따라 요소의 크기가 결정된다.

inline-block

요소를 인라인 수준으로 표시하지만 블록 수준과 같이 너비와 높이를 설정할 수 있다. 즉, 요소는 한 줄에 배치되지만 블록 요소처럼 크기를 가질 수 있다.

flex

Flexbox 레이아웃을 위해 요소를 유연한 박스로 표시한다. flex 속성과 함께 사용하여 요소의 크기 조정, 정렬 및 배치를 제어할 수 있다.

grid

Grid 레이아웃을 위해 요소를 그리드 컨테이너로 표시한다. grid 속성과 함께 사용하여 요소를 그리드 셀에 배치하고 정렬할 수 있다.

none

요소를 화면에서 숨긴다. 요소가 레이아웃에 차지하는 공간도 없어지며, 렌더링되지 않는다. 주로 JavaScript를 통해 동적으로 요소를 숨길 때 사용된다. → 레이아웃 트리에 나타나지 않음. 이걸로 반복해서 보여줬다 안보여줬다하면 렌더링 최적화 쓰레기 됨

이외에도 inline-table table table-cell table-row 등 다양한 속성 값 들이 있고, 각 특정한 레이아웃 요구사항에 맞게 사용하면 된다. 개인적으로 자주쓰는 것들만 알아보았다.