2단 레이아웃
부스트코스에서 레이아웃을 배우고 있다.
2단 레이아웃의 요구사항은
- 콘텐츠가 2개의 행을 갖는다.
- 콘텐츠와 사이드 영역의 구분선을 갖는다.
- 구분선은 헤더와 푸터가 맞닿는다.
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;
}
- table을 이용한 레이아웃
display: table
속성을 이용하면 좀 더 간단하게 구현 할 수 있다. container에 display: table
스타일을 부여하고
자식 요소에는 display: table-cell
스타일을 부여한다.
그리고 자식요소는 display: table-cell
로 한 후
둘 중 한 요소에 border
스타일을 부여하면 된다.
Author And Source
이 문제에 관하여(2단 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlgns2223/2단-레이아웃저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)