1. Display 속성
CSS의 display 속성은 요소가 화면에 어떻게 표시될지 결정합니다.
-
none: 이 값은 요소를 화면에 표시하지 않습니다. 요소가 페이지 레이아웃에 아무런 영향을 미치지 않습니다. 예를 들어, JavaScript를 사용하여 요소를 동적으로 표시하거나 숨기는 데 사용될 수 있습니다. -
block: 이 값은 요소를 블록 요소로 만듭니다. 블록 요소는 새로운 줄에서 시작하며, 가능한 한 너비를 가득 채우려고 합니다.<div>,<p>,<h1>등의 요소는 기본적으로 블록 요소입니다. -
inline: 이 값은 요소를 인라인 요소로 만듭니다. 인라인 요소는 새로운 줄에서 시작하지 않으며, 요소의 내용만큼의 너비를 차지합니다.<span>,<a>,<img>등의 요소는 기본적으로 인라인 요소입니다. -
inline-block: 이 값은 요소를 인라인-블록 요소로 만듭니다. 인라인-블록 요소는 인라인 요소처럼 행에 나란히 배치되지만, 블록 요소처럼 너비와 높이를 명시적으로 지정할 수 있습니다. -
flex: 이 값은 요소를 유연한 박스, 즉 Flexbox로 만듭니다. Flexbox는 아이템 간의 공간 배분과 정렬을 쉽게 할 수 있게 해주는 레이아웃 모델입니다. -
grid: 이 값은 요소를 그리드 컨테이너로 만듭니다. CSS Grid는 복잡한 2차원 레이아웃을 쉽게 만들 수 있게 해주는 레이아웃 모델입니다.
2. Position 속성
CSS의 position 속성은 요소가 웹 페이지에 어떻게 위치할지 결정합니다.
-
static: 이 값은 요소를 정상적인 문서 흐름에 따라 배치합니다. 이것은 모든 요소의 기본 위치 지정 방식입니다. -
relative: 이 값은 요소를 정상적인 문서 흐름에 따라 배치하고,top,right,bottom,left속성에 따라 그 위치를 조정합니다. 조정은 요소의 원래 위치를 기준으로 이루어집니다. -
absolute: 이 값은 요소를 가장 가까운 위치 지정 조상(즉,relative,absolute,fixed,sticky중 하나를 갖는 요소)에 대해 상대적으로 배치합니다. 위치지정 조상이 없으면
<html>요소를 기준으로 배치됩니다. -
fixed: 이 값은 요소를 뷰포트에 상대적으로 배치합니다. 요소는 스크롤에 상관없이 항상 같은 위치에 표시됩니다. -
sticky: 이 값은relative와fixed사이의 혼합형입니다. 요소는 스크롤 위치에 따라 상대적인 위치에서 고정된 위치로 변경됩니다. 스크롤이 특정 위치에 도달하기 전에는relative로, 도달한 후에는fixed로 작동합니다.
이러한 속성들은 웹 페이지의 레이아웃을 조절하고 요소들 간의 관계를 설정하는데 중요한 역할을 합니다. 각 요소에 적합한 display와 position 속성을 적용하여 레이아웃을 만드는 것은 웹 디자인의 중요한 부분입니다.
