다단 레이아웃 제작하기 1,2

https://www.boostcourse.org

다 함께 배우고 성장하는 부스트코스

출처입니다.

<div class="wrap">
    <div class="header">header</div>
    <div class="container"> <!-- content와 aside의 묶음 영역 추가 -->
        <div class="content">content</div>
        <div class="aside">aside</div> 
    </div>
    <div class="footer">footer</div>
</div>

1단 레이아웃과 달리 이번에는 content와 aside로 구분하여 나란히 정렬된 레이아웃입니다.

 

<float를 이용한 구분>

.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    width: 800px;
    margin: 0 auto;
}
.content {
    float: left; /* float */
    width: 500px; /* 가로사이즈 추가 */
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    float: left; /* float */
    width: 300px; /* 가로사이즈 추가 */
    height: 300px;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

float를 부여해서 왼쪽으로 정렬시켜줍니다. 이때 컨테이너의 넓이를 800px로 맞추고

content와 aside의 넓이를 500px 300px를 부여해서 꽉 차게 만들어줍니다.

 

.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    width: 800px;
    margin: 0 auto;
}
.container:after {  /* after를 이용하여 float해제하기 */
  display: block;
  clear: both;
  content: '';
}
.content {
    float: left; 
    width: 500px; 
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    float: left; 
    width: 300px; 
    height: 300px;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

float를 주면 갑자기 footer가 끼인 돌이 되어버리는데 이는 앞에서 배운 float 해제하는 법을 통해 제거해줍니다

.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    position: relative; /* position 기준영역 설정 */
    width: 800px;
    margin: 0 auto;
}
.container:after { 
  display: block;
  clear: both;
  content: '';
}
.content {
    float: left; 
    width: 500px; 
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    float: left; 
    width: 300px; 
    height: 300px;
    background-color: lightseagreen;
}
.aside:after{ /* 구분선 만들기 */
    content:'';
    position:absolute;
    right:300px;
    top: 0;
    bottom: 0;
    width:5px;
    background-color: #000;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

그 후에 구분선을 만들어주는데 만약 가상 요소를 쓰지 않는다면 border로 content의 오른쪽 테두리를 줄텐데

이렇게 할 경우 박스의 길이가 800px기 때문에 aside가 넘어가버리게 됩니다.

따라서 이럴 경우는 box-sizing: border-box; 를 이용하거나 width사이즈를 테두리 사이즈만큼 빼주면 됩니다.

---

<table을 이용한 구분>

 

.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    display: table; /* 부모 요소에 display: table 추가 */
    width: 800px;
    margin: 0 auto;
}
.content {
    display: table-cell; /* 자식 요소에 display: table-cell 추가 */
    width: 500px; /* 가로 사이즈 부여 ( aside가로길이 =  container 가로길이 - content 가로길이) */
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    display: table-cell;/* 자식 요소에 display: table-cell 추가 */
    height: 300px;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

테이블과 테이블 셀을 이용하여 위 레이아웃의 형태를 만들어줍니다.

.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    display: table; 
    width: 800px;
    margin: 0 auto;
}
.content {
    display: table-cell; 
    width: 495px; /* -5px 하여 추가된 구분선 만큼 빼기 */ 
    height: 300px;
    background-color: lightsalmon;
    border-right: 5px solid #000; /* border를 이용해 구분선 추가 */
}
.aside {
    display: table-cell;
    height: 300px;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

border-right를 이용하여 구분선을 만들어주면 됩니다.!!!

---

<다단 레이아웃 구성에서 사이 구분선 만들기 부분>

float와 table의 차이

float의 경우는 container의 간격과 위치를 중요하게 여기고 float를 가상 요소를 이용해서 속성을 없애줘야 합니다.

table은 테두리를 설정해주면 돼서 간단하다.