2단 레이아웃

부스트코스에서 레이아웃을 배우고 있다.

2단 레이아웃의 요구사항은

• 콘텐츠가 2개의 행을 갖는다.
• 콘텐츠와 사이드 영역의 구분선을 갖는다.
• 구분선은 헤더와 푸터가 맞닿는다.

1. float을 이용한 2단 레이아웃

<header>header</header>
<div class="container">
  <section class="content">content</seciton>
  <aside class="side-content">side-content</aside>
</div>
<footer>footer</footer>

마크업은 위와 같이 한 후 section,aside에 float:left속성을 주어 내부 요소들을 가로로 정렬한다.
그 후 clearfix 속성을 이용해 float을 해제 한다.

그리고 수업에서 content영역이 다 보이도록 min-width: 100%로 지정했다.

그럼 이렇게 header,footer에 있는 높이 때문에 스크롤이 발생하는데 content영역이 header,footer의 높이를 포함하여 height을 100% 사용하도록 margin,padding을 조정해줘야한다.

margin: -100px auto;
padding: 100px 0;
box-sizing: border-box;

margin값을 -100px로 줌으로써 header,footer 영역으로 올라 간 후 ,컨텐츠 영역을 아래로 내려하므로 padding: 100px 0;을 준다. 현재는 박스 사이즈가 컨텐츠 박스기준이어서 안쪽 여백 padding을 주면 박스 사이즈가 늘어나게 되므로
box-sizing: border-box로 맞춰주면 아래와 같은 레이아웃이 만들어진다.

그 후에는 aside::after 가상요소를 이용하여 구분선을 만드는데 말이 구분선이지 그냥 하나의 도형을 만든다.

.asideA::after{
    position: absolute;
    width: 5px;
    content: '';
    background-color: #000;
    top: 100px;
    right: 300px;
    bottom: 100px;
}

2. table을 이용한 레이아웃

display: table속성을 이용하면 좀 더 간단하게 구현 할 수 있다. container에 display: table 스타일을 부여하고
자식 요소에는 display: table-cell 스타일을 부여한다.

그리고 자식요소는 display: table-cell로 한 후
둘 중 한 요소에 border 스타일을 부여하면 된다.