체크박스와 CSS로 만드는 사이드바 펼침 레이아웃
체크박스의 체크 상태를 활용하면 사용자 선택에 의한 다양한 레이아웃 변경을 구현할 수 있습니다.
보통은 자바스크립트를 사용해 클릭 이벤트 리스너를 등록하는 방식으로 처리를 하기도 하지만, CSS와 체크박스만으로도 기본적인 기능들은 모두 구현이 가능합니다.
먼저 플렉스박스를 이용해 기본적인 레이아웃을 작성합니다.
메인 컨텐츠를 표시하는 "<main>" 태그 영역과 메뉴를 표시하는 사이드바 표시에 "<aside>" 를 사용합니다.
플렉스박스를 사용하기 때문에 각 영역의 너비와 높이는 자동으로 설정됩니다. 플렉스박스를 사용하면 사이드바의 감춤에 따라 추가적인 너비 설정을 할 필요가 없습니다. 자동으로 너비와 높이가 맞춰집니다.
레이아웃을 구현하는데 있어서 크기를 설정하는 유일한 값은 사이드바에서 컨텐츠를 담는 ".content" 클래스로 정의하는 블록 태그("<div>") 하나만입니다.
사이드바 영역을 감추고 펼치는 버튼은 체크박스로 사이드바 왼쪽 위에 부착합니다.
구현은 체크박스로 체크 상태에 따라서 사이드바를 펼치고 닫는 방식으로 구현하고, 체크박스를 이용하는 기본 구현 방법인 "input + label + .content" 구조를 사용합니다.
<div class="wrap-aside">
<main>
<!-- "메인 컨텐츠" -->
</main>
<aside class="toggle-aside">
<input type="checkbox" id="aside-check-1">
<label for="aside-check-1"></label>
<div class="content">
<!-- "사이드바 메뉴" -->
</div>
</aside>
</div>플렉스박스로 웹페이지 레이아웃을 구현할 때 주의할 점이 있습니다.
메인 컨텐츠("<main>"), 또는 사이드바("<aside>")에 높이 값을 지정("100%" 등) 지정하면 안됩니다.
플렉스박스는 같은 행에 있는 아이템끼리는 높이 값이 자동으로 맞춰집니다.
플렉스박스에서는 당연한 것이지만 "100%" 로 높이 값을 지정하면 예상하는 것과는 달리 다음과 같은 전혀 엉뚱한 결과를 만들게 됩니다.
이것은 플렉스박스 아이템에 높이 값을 지정하면 아이템 안의 실제 컨텐츠가 차지하는 높이까지를 "100%" 높이로 인식하기 때문입니다.
플렉스박스로 레이아웃을 구현할 때는 "100%" 높이 값 속성 지정은 필요하지 않습니다.
.wrap-aside{
display: flex; /* 플렉스 박스로 레이아웃 구현 */
flex-direction: row;
width: 800px;
margin: 0 auto;
}
.wrap-aside main{ /* 메인 컨텐츠 영역 - 너비 설정 필요 없음. */
flex-basis: auto;
flex-grow: 1;
background-color: #f0f0f0;
}
.wrap-aside aside{ /* 사이드바 메뉴 영역 - 너비 설정 필요 없음. */
flex-basis: auto;
flex-grow: 0; /* 사이드바 영역 넓어지지 않도록 고정 */
background-color: #e0e0e0;
}
.wrap-aside aside .content{ /* 사이드바 영역 컨텐츠 너비를 설정 */
width: 200px;
}
.toggle-aside input{
display: none;
}
.toggle-aside > input + label{
position: relative;
}
.toggle-aside input[type=checkbox] + label::after { /* 사이드바 감춤 클릭 화살표 */
position: absolute;
content: "▶";
background-color: #e0e0e0;
padding: 10px;
border-radius: 0px 0 0 15px;
font-size: 1.5em;
left: -40px;
line-height: 1;
box-shadow: 1px 8px 5px -7px rgba(0,0,0,0.5);
width: 40px;
box-sizing: border-box;
}
.toggle-aside input[type=checkbox]:checked + label::after {
content: "◀";
color: #000;
}
.toggle-aside input[type=checkbox]:checked + label + .content{ /* 사이드바 메뉴 감춤 */
display: none;
}완성된 예제 소스는 다음 링크를 클릭해 다운로드 할 수 있습니다.