[기초]CSS 디스플레이와 포지션 속성(display, position)

display와 position 속성은 요소의 배치와 레이아웃에 중요한 역할을 합니다. 각각의 속성들은 요소의 보이는 방식과 위치를 조정할 수 있게 해줍니다.

display 속성은 요소가 웹 페이지에서 어떻게 표시되고 배치되는지를 결정합니다. 주요 값으로는 block, inline, inline-block, none, flex, grid 등이 있습니다.

주요 값

1. block: 요소를 블록 레벨 요소로 표시합니다.

div {
  display: block;
}

2. inline: 요소를 인라인 레벨 요소로 표시합니다.

특징:
- 같은 줄에 다른 요소들과 함께 배치됩니다.
- width와 height를 설정할 수 있으나, 그 값이 무시된다.
- margin과 padding 속성은 좌우만 적용되고 상하는 무시된다.
- 인라인 레벨 요소의 예: <span>, <a>, <strong>

span {
  display: inline;
}

3. inline-block: 요소를 인라인 레벨로 배치하되, 블록 레벨 요소처럼 동작하게 합니다.

span {
  display: inline-block;
}

4. none: 요소를 표시하지 않습니다.

div {
  display: none;
}

5. flex: 요소를 Flexbox 컨테이너로 만듭니다.

.container {
  display: flex;
}

6. grid: 요소를 Grid 컨테이너로 만듭니다.

.container {
  display: grid;
}

position 속성은 요소의 위치를 조정하는 데 사용됩니다. 주요 값들과 그 특징을 설명하겠습니다. 주요 값은 static, relative, absolute, fixed, sticky 등이 있다.

주요 값

1. static: 기본값으로, 요소를 일반적인 문서 흐름에 따라 배치합니다.

div {
  position: static;
}

2. relative: 요소를 일반적인 문서 흐름에 따라 배치하지만, top, right, bottom, left 속성을 사용하여 상대적으로 이동할 수 있습니다.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

3. absolute: 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 조상 요소를 기준으로 배치합니다.

특징:
- 조상 요소에 relative, absolute, fixed, sticky 중 하나가 설정되어 있어야 합니다.
- 조상 요소가 없으면 초기 컨테이닝 블록 (보통 <html>)을 기준으로 합니다.

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

4. fixed: 요소를 뷰포트에 고정합니다.

div {
  position: fixed;
  top: 0;
  right: 0;
}

5. sticky: 요소를 스크롤 위치에 따라 relative와 fixed 사이에서 전환합니다.

특징:
- 요소가 스크롤 위치에 따라 relative 상태로 배치되다가, 특정 지점에 도달하면 fixed 상태로 고정됩니다. 고정되는 위치는 top, right, bottom, left 속성으로 지정할 수 있습니다.

div {
  position: sticky;
  top: 0;
}

[기초]CSS 그리드(Grid) (0)	2024.08.20
[기초]CSS 플렉스박스(FlexBox) (0)	2024.08.19
[기초]CSS 박스 모델과 박스 사이징(Box Model, Box Sizing) (0)	2024.08.16
[기초]CSS 여백, 패딩, 테두리 스타일(margin, padding, border) (0)	2024.08.15
[기초]CSS 배경 스타일(background) (0)	2024.08.14