본문 바로가기

HTML&CSS

체크박스와 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%" 높이로 인식하기 때문입니다.

플렉스박스로 레이아웃을 구현할 때는 "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;
}

 

완성된 예제 소스는 다음 링크를 클릭해 다운로드 할 수 있습니다.

 

checkbox5.zip
0.00MB

반응형

닫기