5. CSS로 애니메이션 효과 넣기

오늘 배운 것

0. 목차

1. Hamberger Icon 애니메이션

2. 메뉴목록 나오게하기

3. clear:both;

4. 참고 사이트

 

 

1. Hamberger Icon 애니메이션

위에 보이듯 수평막대 3개로 이루어진 아이콘을 '햄버거 아이콘(버튼)'이라고 부른다. 페이지 내에서 화면을 접어두고 펼치는 동작을 수행하는데 주로 사용한다.

이 버튼을 만들기 위해서는

1. <input>

2. <label> - 아이콘용 <div>

3. <ul>

이렇게 3개가 한 세트라고 볼 수 있다.

 

html과 css 코드를 먼저 확인해보겠다.

 

1. html

    <input type="checkbox" id="check" >
    <label for="check">
        <div id="menubar">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </label>
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
    </ul>

 

2. 아이콘의 위치와 모양을 잡아주기

#check{
    display: none;
}

#hamberger{
    width: 50px;
    height: 30px;
    position: relative;
    cursor: pointer;
    margin: 20px;

}

#check + label > #hamberger > span{
    display: block;
    width: 50px;
    height: 5px;
    background: black;
    z-index: 2;
    position: absolute;
    border-radius: 20px;
    transition: all 0.15s;
}

#check + label > #hamberger > span:nth-child(1){
    top:0px;
}

#check + label > #hamberger > span:nth-child(2){
    top:50%;
    transform: translateY(-50%);
}

#check + label > #hamberger > span:nth-child(3){
    bottom:0px;
}

 

3. 체크 시 아이콘의 움직임 넣기

#check:checked + label > #hamberger >span:nth-child(1){
    top:50%;
    transform: translateY(-50%) rotate(45deg);
}

#check:checked + label > #hamberger >span:nth-child(2){
    opacity: 0;
}

#check:checked + label > #hamberger >span:nth-child(3){
    bottom:50%;
    transform: translateY(50%) rotate(-45deg);
}

 

 

 

 

1-1. 속성 선택자와 인접 결합자

속성 선택자

엘리먼트 중 특정 속성을 가지고 있는 요소만 선택하여 css를 부여할 수 있다.

엘리먼트명 [속성] {
}

 

이런 형식으로 사용하는데, [ ] 내부에는 다양한 형식을 넣을 수 있다.

❗️[참조] CSS 속성 선택자 정리

https://wallel.com/css-%EC%86%8D%EC%84%B1-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC-css-attribute-selector/

 

인접 결합자

앞에서 지정한 요소의 바로 다음에 오는 형제 요소만 선택 가능하다.

former_element + target_element { style properties }

이런 형식으로 사용한다. 위에서 쓴 코드에도 input엘리먼트(#check)와 label엘리먼트에 사용되었는데,

이런 식으로 쓴 이유는 후에 input엘리먼트에 checked속성을 넣고/빼고의 차이를 주어 각각을 다르게 설정하기 위해서이다. 

 

 

 

 

1-2. 애니메이션 효과

#check라는 input엘리먼트를 checked 속성을 이용해 구분지어 css를 설정해주면 각각을 다른 모양으로 만들 수 있는데

이를 transition과 transform속성을 이용해 움직임을 줄 수 있다.

transition: all 0.15s;
/* 해당 엘리먼트의 움직임에 0.15s의 시간을 준다. 움직임을 눈으로 확인할 수 있다.*/

transform: translateY(-50%) rotate(45deg);
/* 요소가 스스로의 y축 길이 대비 50%를 이동한다. (+는 아랫방향, -는 윗방향) */

 

 

 

 

 

 

2. 메뉴목록 좌측에서 나오게 하기

#check + label + ul{
    width: 200px;
    height: 100%;
    background: #999;
    position: absolute;
    left: -200px;
    transition: all .15s;
    position: fixed;
    top: 0px;
    padding: 100px 25px 25px 10px;
}

#check:checked + label + ul{
    left: 0;
}

ul > li{
    padding: 14px 15px;
    margin-top: 30px;
    font-size: 20px;
}

#check + label + ul > li > a{
    color: white;
}

마찬가지의 방법으로 #check와 #check:checked를 구분해 좌측 메뉴단의 설정을 넣어줬다.

메뉴를 미리 만들어두고기존에는 브라우저의 왼쪽으로 밀어뒀다가 checked가 되면 화면으로 가져오는 방식이다.

 

 

 

 

 

3. clear:both;

상단의 형제요소가 가진 float속성을 무시하고 자신의 block속성대로 하단에 배치됨.

 

<div id="mother">
    <div id="first">영역1</div>
    <div id="second">영역2</div>
</div>

위와같은 구조의 div블록 3개가 있다고 해보자.

#mother{
    display: block;
    width: 100px;
    height: 100px;
    background: red;
}

#mother > #first {
    width: 100px;
    height: 50px;
    background: yellow;
}

#mother > #second {
    width: 100px;
    height: 50px;
    background: green;
}

각각에 위와같은 사이즈를 부여해줬고 그 결과

이런 배치가 된다.

여기서 상단의 #first div에 float:left 속성을 부여하면,

이렇게 하단의 영역2 블록이 상단으로 올라간다.( 가려져있지만 영역1과 같은 자리에 있다.)

여기서 #second div에 다시 clear:both 속성을 부여하면

하단으로 배치가 된다. 

 

위의 예시는 간단한 예시지만 실습을 하면서 float속성을 이용해 레이아웃을 배치할 때 픽셀 수가 안맞거나 하는 이유로 배치가 이상해질 때가 많았다. 그럴 때 clear:both를 이용하면 쉽게 배치할 수 있다. 

 

 

 

4. 참고 사이트

애니메이션 효과 참고용

❗️http://rwdb.kr/interestedeffects/

페이지 레이아웃 연습용

❗️https://www.dbcut.com/bbs/index.php

❗️https://www.free-css.com/free-css-templates/page273/moon