소개
항상 웹페이지를 만들거나 구성할때 레이아웃에 대해서 어떻게 구현해야하나 막연한 고민을가지고 있었습니다. 이번에 레이아웃에 대해서 확실하게 정리학 넘어가려고 합니다.
레이아웃을 나누는 방법으로는 5개 정도로 나눌수가 있는데요.
- table
- inline-block
- float
- flex
- grid
5가지 방법으로 아래와 같은 레이아웃을 만들어 보겠습니다.
table
초창기 HTML은 flex와 grid같은 속성이 없어 table tag를 통해서 레이아웃을 구성했습니다.
HTML
<body>
<table>
<thead>
<th colspan="2" class="header">header</th>
</thead>
<tbody>
<tr>
<td class="navigation">navigation</td>
<td class="contents">contents</td>
</tr>
</tbody>
</table>
</body>CSS
body {
width: 100vw;
height: 100vh;
}
table {
width: 100%;
margin: 0 auto;
text-align: center;
}
.header {
background-color: lightcoral;
width: 100%;
height: 100px;
}
.navigation {
background-color: lightblue;
width: 30%;
height: 500px;
}
.contents {
background-color: lightgreen;
width: 70%;
}inline-block
inline-block은 이름과 같이 inline과 block의 특성을 둘다 가지고 있습니다
HTML
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="contents">contents</div>
</div>
</body>CSS
.header {
background-color: lightcoral;
width: 100%;
height: 100px;
}
.navigation {
background-color: lightblue;
height: 500px;
width: 30%;
display: inline-block;
margin-right: -4px;
}
.contents {
background-color: lightgreen;
width: 70%;
height: 500px;
display: inline-block;
margin-right: -4px;
}- inline-block으로 설정된 블록안에 컨텐츠가 생겼을 경우 블록의 사이즈가 컨텐츠로부터 정해지기 Layout이 망가지게됩니다
- vertical-align: top 을 사용하여 해결할 수 있습니다
- 특성상 블록간의 공백이 생기게되는데 여러 방법이 있지만 margin : -4px로 해결 할 수 있습니다
float
CSS에서 layout을 위해 제공되는 속성입니다
모든 요소에는 float 속성이 존재하며 default값은 none입니다
float에 left 또는 right로 쉽게 사용이 가능합니다
HTML
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="contents">contents</div>
</div>
</body>CSS
.header {
background-color: lightcoral;
width: 100%;
height: 100px;
}
.navigation {
background-color: lightblue;
height: 500px;
width: 30%;
float : left
}
.contents {
background-color: lightgreen;
width: 70%;
height: 500px;
float: right;
}- 모든 요소에는 z-index와 같이 순서가 존재합니다. float를 사용시 index는 앞으로 이동하게 되어 다른 요소를 덮어씌우게 됩니다
- 이러한것을 방지하기 위해선 clear : both를 통해 float이 끝났다고 알려줘야합니다
flex
flex는 가장 많이 사용하는 layout 속성으로 가로, 세로 원하는 방향으로 정렬이 가능하며 원하는 방법으로 배치가 가능합니다
flex를 적용할 요소들을 부모 요소로 감싸주고 부모를 flex로 변경하여 사용합니다
자식의 width가 부모의 width보다 크더라도 px를 최대한 유지하며 벗어나지 않도록 합니다
HTML
<div class="container">
<div class="header">header</div>
<div class="flex-box">
<div class="navigation">navigation</div>
<div class="contents">contents</div>
</div>
</div>CSS
.header {
background-color: lightcoral;
width: 100%;
height: 100px;
}
.flex-box {
display: flex;
/* flex-direction: column; 방향설정
justify-content: center; 컨텐츠의 정렬
align-items: center; 정렬 */
}
.navigation {
background-color: lightblue;
height: 500px;
width: 30%;
}
.contents {
background-color: lightgreen;
width: 70%;
height: 500px;
}grid
제일 최근에 나온 속성으로 flex와 같이 제일 많이 사용되는 속성입니다
grid는 부모 요소를 원하는 만큼의 구역으로 나눌수 있으며 각 구역에 원하는 자식 요소를 넣어줄 수 있습니다
HTML
<body>
<div class="container">
<div class="header">header</div>
<div class="navigation">navigation</div>
<div class="contents">contents</div>
</div>
</body>CSS
.container {
display: grid;
height: 100vh;
width: 100vw;
/* 자식 요소에는 크기를 지정하기보다는 auto를 사용하는게 좋습니다 */
/* 가로의 구역과 사이즈를 정해줍니다 */
grid-template-columns: 30% 70%;
/* 세로의 구역과 사이즈를 정해줍니다 */
grid-template-rows: 100px auto;
/* 각 구역에 들어갈 요소의 이름을 정해줍니다 */
grid-template-areas:
"header header"
"navigation contents";
}
.header {
background-color: lightcoral;
/* 요소의 이름을 지어줍니다 */
grid-area: header;
}
.navigation {
background-color: lightblue;
grid-area: navigation;
}
.contents {
background-color: lightgreen;
grid-area: contents;
}마무리
간단하게 layout을 구성하는 5가지의 방법을 알아봤습니다.
flex와 grid 같은 경우에는 제일 많이 사용되는 방법으로 더 많은 속성을 지원하고 있습니다.
상황에 맞추어 적절하게 사용하고 필요할 경우 더 공부하고 정리해보겠습니다.
