CSS 페이지 레이아웃 속성은 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있고 속성마다 기능이 달라서 각 속성을 정확히 파악하고 사용해야 한다. Floats, Positioning, Display Outsid 및 inside, Display Flow-root, Display Table에 대한 정보를 기록하고자 CSS 페이지 레이아웃 1부를 작성했다.
주의사항 1. 모든 예시는 크롬 브라우저 기준이다. 2. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.
목차
- Display Flex
6-1. Display Flex – flexbox 속성
6-2. Display Flex – flexbox 정렬 속성 요약
6-3. Display Flex – flexbox 정렬 속성
- Display Grid
7-1. Display Grid – grid layout 셀 속성
7-2. Display Grid – grid layout 컨테이너 속성
7-3. Display Grid – grid layout 정렬 속성 요약
7-4. Display Grid – grid layout 정렬 속성
- Multi-column Layout
- Media Query
- Legacy Layout Methods
Floats 및 Clear
○ Floats
1. 정의
요소의 Display Outside 속성이 block으로 변경되고, Normal Flow에서 벗어나 텍스트 및 inline 요소의 좌측 또는 우측에 배치된다.
요소의 Display Outside 속성이 block으로 변경되고, Normal Flow에서 벗어나 텍스트 및 inline 요소의 좌측 또는 우측에 배치된다.
float: none;3. 속성
(1) float: none
기본값이다. 요소가 Normal Flow를 벗어나지 않는다.
(2) float: left
요소가 Normal Flow에서 벗어나 컨테이너의 좌측에 배치된다. 텍스트 및 inline 요소는 float가 적용된 요소의 우측으로 흐른다. float가 적용된 형제 요소가 여러 개일 경우 각 요소가 다른 float 요소에 닿을 때까지 컨테이너의 좌측에 순서대로 배치된다.
(3) float: right
요소가 Normal Flow에서 벗어나 컨테이너의 우측에 배치된다. 텍스트 및 inline 요소는 float가 적용된 요소의 좌측으로 흐른다. float가 적용된 형제 요소가 여러 개일 경우 각 요소가 다른 float 요소에 닿을 때까지 컨테이너의 우측에 순서대로 배치된다.
4. 코드 예시
(1) float: none
푸른 하늘 아래에 광활한 대지가 펼쳐져 있고 저 멀리 거대한 산맥이 하늘과의
경계를 가득 매우고 있다.float가 적용되지 않아서 요소가 Normal Flow를 벗어나지 않는다.
(2) float: left
푸른 하늘 아래에 광활한 대지가 펼쳐져 있고 저 멀리 거대한 산맥이 하늘과의
경계를 가득 매우고 있다.요소가 Normal Flow를 벗어나 컨테이너의 좌측에 순서대로 붙고, 텍스트 및 inline 요소가 float가 적용된 요소의 우측으로 흐른다.
(3) float: right
푸른 하늘 아래에 광활한 대지가 펼쳐져 있고 저 멀리 거대한 산맥이 하늘과의
경계를 가득 매우고 있다.요소가 Normal Flow를 벗어나 컨테이너의 우측에 순서대로 붙고, 텍스트 및 inline 요소가 float가 적용된 요소의 좌측으로 흐른다.
○ Clear
1. 정의
요소가 float가 적용된 요소의 아래에 나열된다.
2. 코드 사용
clear: none;3. 속성
(1) clear: none
기본값이다. 요소가 float가 적용된 요소의 주변으로 흐른다.
(2) clear: left
요소의 좌측에 있는 float가 적용된 요소의 아래로 흐른다.
(3) clear: right
요소의 우측에 있는 float가 적용된 요소의 아래로 흐른다.
(4) clear: both
요소의 양쪽에 있는 float가 적용된 요소의 아래로 흐른다.
4. 코드 예시
첫 번째 박스와 두 번째 박스가 Normal Flow를 벗어나서 세 번째 박스가 컨테이너 전체를 차지하고 있고, 세 번째 박스의 텍스트는 float가 적용된 요소의 주변으로 흐른다.
(1) clear: none
요소가 float가 적용된 붉은 상자와 파란 상자 주변으로 흐른다.
(2) clear: left
요소가 float가 적용된 파란 상자의 아래로 흐른다.
(3) clear: right
요소가 float가 적용된 붉은 상자의 아래로 흐른다.
(4) clear: both
요소가 float가 적용된 양쪽 상자의 아래로 흐른다.
Positioning
○ 정의
요소를 배치하는 방식과 위치를 결정한다.
○ 코드 사용
position: static;○ 호환성
– 인터넷 익스플로러에서 position의 값 중 sticky를 지원하지 않는다.
○ 배치 유형
(1) 위치 지정 요소
position의 값이 relative, absolute, fixed, sticky 중 하나인 요소이다.
(2) 상대 위치 지정 요소
position의 값이 relative인 요소이다. top과 bottom은 원래 위치에서의 세로축 거리, left와 right는 원래 위치에서의 가로축 거리를 지정한다.
(3) 절대 위치 지정 요소
position의 값이 absolute 또는 fixed인 요소이다. top, right, bottom, left는 기준이 되는 조상 요소의 왼쪽 위 모서리에서부터의 거리를 지정한다.
(4) 끈끈한 위치 지정 요소
position의 값이 sticky인 요소이다. 기준이 되는 컨테이너 내에서 스크롤 전에는 상대 위치 지정 요소로 작동하지만, 스크롤 시 top으로 지정한 임계 값을 넘으면 fixed처럼 화면에 고정되다가 컨테이너의 반대편 모서리를 만나면 고정이 해제된다.
○ 속성
(1) position: static
기본값이다. 요소가 Normal Flow를 벗어나지 않고 top, right, bottom, left, z-index에 아무런 영향을 받지 않는다.
(2) position: relative
요소가 Normal Flow를 벗어나지 않고 자기 자신을 기준으로 배치된다.
(3) position: absolute
요소가 Normal Flow를 벗어나 기준이 되는 조상 요소에 대해 상대적으로 배치된다.
(4) position: fixed
요소가 Normal Flow를 벗어나 뷰포트를 기준으로 배치된다. 단 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 배치된다. 스크롤을 해도 위치가 변하지 않는다.
(5) position: sticky
요소가 Normal Flow를 벗어나지 않지만, 스크롤을 해서 top으로 지정한 임계값을 벗어나면 조상 요소에 달라붙어 fixed처럼 보이다가 조상 요소의 반대편 모서리를 만나면 고정이 해제된다.
○ 코드 예시
(1) position: static, top: 20px, left: 20px, z-index:1이 적용되었을 때
요소가 Normal Flow를 벗어나지 않는다.
(2) position: relative, top: 20px, left: 20px, z-index:1이 적용되었을 때
자기 자신을 기준으로 top, right, bottom, left가 적용되고 위치 속성이 다른 요소에 영향을 주지 않는다. 요소가 차지하는 공간은 static일 때와 같다.
(3) position: absolute, top: 20px, left: 20px, z-index:1이 적용되었을 때
기준이 되는 조상 요소를 기준으로 top, right, bottom, left가 적용된다.
(4) position: fixed, top: 20px, left: 20px이 적용되었을 때
뷰포트를 기준으로 top, right, bottom, left가 적용된다.
(5) position: sticky, top: 20px, left: 20px, z-index:1이 적용되었을 때
요소의 위쪽 20px 지점까지 스크롤을 내리면 요소가 컨테이너의 상단에 고정된 채 내려오다가 컨테이너의 반대편에 닿으면 고정이 해제되고 컨테이너 내 마지막 위치에 남게 된다. 그리고 요소의 위쪽 20px 지점까지 스크롤을 다시 올리면 요소가 컨테이너 내 마지막 위치에서 컨테이너의 상단으로 고정된 채 올라가다가 원래 위치까지 올라가면 고정이 해제된다.
Display Outside 및 inside
1. Display Outside
요소가 외부에 표시되는 유형을 결정한다. Normal Flow 상의 모든 요소는 display: inline 또는 display: block 속성을 가지는데 사용자 CSS에서 특정 요소에 대한 display 속성의 속성값을 inline, block, inline-block으로 재지정할 수 있다.
(1) display: inline
요소의 앞뒤를 줄 바꿈 하지 않는 inline 요소가 된다. 정상적인 흐름에서 inline 요소가 나열된 경우 뷰포트의 범위를 넘어서지 않는 한 모두 같은 줄에 위치하고 뷰포트를 넘어서면 다음 줄에 이어서 위치한다.
(2) display: block
요소의 앞뒤를 줄 바꿈 하는 block 요소가 된다. 정상적인 흐름에서 block 요소들이 나열된 경우 각 요소가 순서대로 다음 줄에 위치한다.
(3) display: inline-block
요소의 앞뒤를 줄 바꿈 하지 않는 block 요소가 된다.
(4) display: none;
접근성 트리에서 요소와 하위 요소가 제거되어 화면에 표시되지 않는다.
2. Display Inside
요소가 내부에 표시되는 유형을 결정한다. display: flow-root, display: inline-flow-root, display: table, display: inline-table, display: flex, display: inline-flex, display: grid, display: inline-grid가 있다.
Display Flow-root
○ 정의
요소에 블록 컨테이너를 생성해서 float가 적용된 자식 요소를 인식시킨다.
○ 코드 사용
display: flow-root;○ 호환성
– 인터넷 익스플로러에서 지원하지 않는다. 인터넷 익스플로러에서 동일한 효과를 얻으려면 float 속성이 적용된 요소의 부모 요소에 ::after{content:””; display:block; clear:both;}을 적용해서 자식 요소 중 마지막 요소의 다음에 content가 “”(비어있는) block 요소를 만들고, clear:both를 사용해서 float를 left 또는 right 상관없이 초기화해야 한다.
– iOS 사파리 12 버전 이하에서 지원하지 않는다.
<style>
/* .ex{display: flow-root;} */
.cf::after{content:""; display:block; clear:both;}
</style>
<ul class="ex cf">
…
</ul>
Display Table
○ 정의
요소의 Display Outside 속성이 block으로 변경되고 <table>처럼 작동한다. 다만 기본적인 표 만들기 기능에만 충실하므로 <colgroup>이나 colspan, rowspan처럼 <table>의 주요 기능을 사용할 수 없다.
○ 코드 사용
display: table;○ 자식 요소 속성
(1) display: table-header-group
요소가 <thead>처럼 작동한다.
(2) display: table-row-group
요소가 <tbody>처럼 작동한다.
(3) display: table-footer-group
요소가 <tfoot>처럼 작동한다.
(4) display: table-row
요소가 <tr>처럼 작동한다.
(5) display: table-cell
요소가 <td>처럼 작동한다.
(6) display: table-caption
요소가 <caption>처럼 작동한다.
○ 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display table</title>
<link rel="stylesheet" href="t-normalize.css" />
<style>
.ex-table {
display: table;
margin: 10px;
text-align: center;
border-top: 1px solid #ececec;
border-left: 1px solid #ececec;
}
.ex-caption {
display: table-caption;
caption-side: bottom;
}
.ex-thead {
display: table-header-group;
font-weight: bold;
background: #ff00f0;
}
.ex-tbody {
display: table-row-group;
}
.ex-tfoot {
display: table-footer-group;
background: #00f0ff;
}
.ex-tr {
display: table-row;
}
.ex-td {
display: table-cell;
padding: 10px;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
}
</style>
</head>
<body>
<div class="ex-table">
<div class="ex-caption">수확량</div>
<div class="ex-thead">
<div class="ex-tr">
<div class="ex-td">지역</div>
<div class="ex-td">감자</div>
<div class="ex-td">고구마</div>
</div>
</div>
<div class="ex-tbody">
<div class="ex-tr">
<div class="ex-td">강원도</div>
<div class="ex-td">600만개</div>
<div class="ex-td">400만개</div>
</div>
<div class="ex-tr">
<div class="ex-td">충청도</div>
<div class="ex-td">500만개</div>
<div class="ex-td">200만개</div>
</div>
</div>
<div class="ex-tfoot">
<div class="ex-tr">
<div class="ex-td">합계</div>
<div class="ex-td">1,100만개</div>
<div class="ex-td">600만개</div>
</div>
</div>
</div>
</body>
</html>