159 lines
5.5 KiB
Markdown
159 lines
5.5 KiB
Markdown
# 레이아웃
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| display | 요소의 표시 방법을 결정 | block, inline, none, inline-block, flex, grid |
|
|
| position | 요소의 위치 지정 방식 | static, relative, absolute, fixed, sticky |
|
|
| top / right / bottom / left | 요소의 위치 지정 |
|
|
| z-index | 요소의 쌓이는 순서 지정 | auto |
|
|
| float | 요소를 왼쪽 또는 오른쪽으로 배치 | left, right, none |
|
|
| clear | float 적용 요소 다음의 요소가 떠다니지 않도록 정리 | none, left, right, both |
|
|
| overflow | 내용이 컨테이너를 벗어날 때 처리 방법 | visible, hidden, scroll, auto |
|
|
| visibility | 요소를 보이거나 숨김 | visible, hidden, collapse |
|
|
|
|
|
|
## display
|
|
요소가 어떻게 배치되는지를 결정
|
|
* block : 블록 요소 (새 줄에서 시작)
|
|
* inline : 인라인 요소 (한 줄 안에 배치)
|
|
* inline-block : 인라인처럼 배치되지만 크기 조절 가능
|
|
* none : 요소를 숨김
|
|
* flex : 플렉스 박스 활성화
|
|
* grid : 그리드 시스템 활성화
|
|
```css
|
|
.box {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
## position
|
|
요소를 정확한 위치에 배치할 때 사용
|
|
* static : 기본값 (HTML 흐름을 따름)
|
|
* relative : 원래 위치 기준으로 이동
|
|
* absolute : 부모 요소 기준으로 절대 위치
|
|
* fixed : 뷰포트 기준으로 고정
|
|
* sticky : 스크롤 시 특정 위치에서 고정
|
|
> absolute는 가까운 position: relative 부모 요소 기준으로 배치됨
|
|
```css
|
|
.box {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 100px;
|
|
}
|
|
```
|
|
|
|
### Normal Flow
|
|
|
|
기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다.
|
|
인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.
|
|
|
|
블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
|
|
인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.
|
|
|
|
## top, right, bottom, left
|
|
* top : 요소를 위에서 아래로 이동
|
|
* right : 요소를 오른쪽에서 왼쪽으로 이동
|
|
* bottom : 요소를 아래에서 위로 이동
|
|
* left : 요소를 왼쪽에서 오른쪽으로 이동
|
|
|
|
> 이 속성들은 요소의 **position 값이 relative, absolute, fixed, sticky**일 때만 동작해!<br />
|
|
> static일 때는 적용되지 않음!
|
|
|
|
### relative에서의 사용
|
|
* 요소가 원래 위치를 기준으로 이동
|
|
```css
|
|
.box {
|
|
position: relative;
|
|
top: 20px; /* 원래 위치보다 20px 아래로 이동 */
|
|
left: 10px; /* 원래 위치보다 10px 오른쪽으로 이동 */
|
|
}
|
|
```
|
|
### absolute에서의 사용
|
|
* 가장 가까운 position: relative를 가진 부모 요소를 기준으로 이동
|
|
* 부모가 없으면 **뷰포트(브라우저 화면)**를 기준으로 배치됨
|
|
```css
|
|
.parent {
|
|
position: relative;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 20px;
|
|
}
|
|
/* .box는 .parent 기준으로 위에서 50px, 오른쪽에서 20px 떨어진 위치에 배치됨 */
|
|
```
|
|
|
|
### fixed에서의 사용
|
|
* **브라우저 화면(뷰포트)**을 기준으로 고정
|
|
```css
|
|
.box {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
/* 화면의 오른쪽 하단에 고정됨 (스크롤해도 움직이지 않음) */
|
|
```
|
|
|
|
### sticky에서의 사용
|
|
* 스크롤에 따라 움직이다가 특정 위치에 고정됨
|
|
```css
|
|
.box {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
/* .box는 스크롤되다가 top: 0 위치에 도달하면 고정됨 */
|
|
```
|
|
|
|
## z-index
|
|
요소의 쌓이는 순서를 결정 (값이 클수록 위에 위치)
|
|
```css
|
|
.box {
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
```
|
|
|
|
## float
|
|
요소를 왼쪽 또는 오른쪽으로 띄움. 주로 이미지나 텍스트 레이아웃에서 사용.
|
|
```css
|
|
img {
|
|
float: right;
|
|
margin: 10px;
|
|
}
|
|
```
|
|
> float을 사용하면 요소가 부모 요소를 빠져나올 수 있기 때문에, `clear: both;`를 이용해 레이아웃을 정리해야 함
|
|
|
|
## clear
|
|
clear 속성은 float된 요소 옆에 다른 요소가 배치되는 것을 막아줌.
|
|
float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도로 사용됨.
|
|
* none : 기본값 (제거 없음)
|
|
* left : 왼쪽의 float을 해제
|
|
* right : 오른쪽의 float을 해제
|
|
* both : 양쪽 모두 해제
|
|
|
|
## overflow
|
|
콘텐츠가 부모 요소보다 커질 때 어떻게 처리할지 결정하는 속성!
|
|
* visible : (기본값) 넘치는 콘텐츠를 그대로 표시
|
|
* hidden : 넘치는 부분을 숨김
|
|
* scroll : 스크롤바 생성 (항상 표시됨)
|
|
* auto : 넘칠 때만 스크롤바 생성
|
|
```css
|
|
.box {
|
|
width: 100px;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
} /* 넘치는 부분이 잘려서 보이지 않음 */
|
|
```
|
|
### overflow-x / overflow-y
|
|
|
|
## visibility
|
|
visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
|
|
* visible : 기본값 (요소가 보임)
|
|
* hidden : 요소가 보이지 않지만 공간은 유지
|
|
* collapse : table-row, table-column을 숨길 때 사용
|
|
|
|
> * `visibility: hidden;` : 요소가 보이지 않지만 공간은 그대로 유지
|
|
> * `display: none;` : 요소가 완전히 제거됨 (공간도 사라짐)
|
|
|