html + css 사이드바 만들기(1) 햄버거 버튼 만들기

 

kh 교육 과정에서 최종 파이널 프로젝트에 돌입했다 

본격적인 UI설계 앞서서 연습용으로 사이드바를 만들고 있다 

 

유튜브를 찾아보다가 사이드바를 보다 세련적이고

쉽게 만드는 영상이 있어서 참고하고 만들었다 

 

 

   <input type="checkbox" id="menuicon">

        <label for="menuicon">

            <span></span>

            <span></span>

            <span></span>

        </label>

 

햄버거 버튼을 만들기 html 코드이다 

 

input을 사용하여 사이드바를 만들기위해서 

input type을 checkbox 속성을 주었다. 

label 안에 span은 햄버거 버튼을 위한

줄이라고 생각을 하면된다. 

 

 

     input[id="menuicon"] + label{

            display: block;

            width: 60px;

            height: 40px;

            position: relative;

            cursor: pointer;

            position: fixed;

            top: 50%;

            left: 0;

            transition: all .35s;

        }

 

형제 선택자

 input[id="menuicon"] 

선택한 요소와 " + " 인접한 형제를 선택을한다. 

 

span태그는 인라인(inline) 요소이기 때문에 

display: inline; 속성을 통해서 CSS에서 요소의 표시 유형을 

지정할 수 있다

 

top: 50%;

요소의 상단 경계가 부모 요소의

높이의 50% 지점에 위치하도록 설정한다. 

 

left: 0;

요소의 왼쪽 경계가 부모 요소의 왼쪽 경계에 맞춰 맞춰지도록 

설정한다

해당 요소를 통해서 화면의 가장 왼쪽에 위치하게 한다. 

 

transition: 

css에서 요소의 스타일이 변화할 떄 

애니메이션 효과를 추가하는데 사용되는 속성이다 

 

transition: all .35s;

transition을 통해서 

선택된 모든 요소의 속성이 변화할 때 변화하는

발생 시간을 0.35초로 

설정했다

 

       input[id="menuicon"] + label span:nth-child(1){

            top: 0;

        }

        input[id="menuicon"] + label span:nth-child(2){

            top: 50%;

        }

        input[id="menuicon"] + label span:nth-child(3){

            top: 100%;

        }

 

첫번쨰 span 태그는 부모 요소 0% 즉 최상단에 위치하게 

두번째는 부모 요소 높이로 부터 중간에 위치하게 

세번쨰 span태그는 부모요소 즉 최하단에 위치하게 만들었다 

 

    input[id="menuicon"]:checked + label{

            z-index: 2;

            left: 240px;

        }

 

input요소가 checked 되었을 경우 

lable이 가려지지 않도록 z-index를 통해서 

우선 순위로 배치한다.

left: 240px;

이때 체크된 경우 부모요소 왼쪽으로부터 240px만큼 떨어지게 

위치하도록 한다.

 

      input[id="menuicon"]:checked + label span:nth-child(1){

            top: 50%;

            width:50%;

            transform: translateY(50%) rotate(-135deg);

            background: white;

        }

        input[id="menuicon"]:checked + label span:nth-child(2){

           

            opacity: 0;

        }

        input[id="menuicon"]:checked + label span:nth-child(3){

            top: 50%;

            width: 50%;

         

            background: white;

            transform: translateY(50%) rotate(135deg);

        }