HTML : 문서 작성 tip / CSS : 웹폰트 활용법, 슬롯머신 애니메이션, width/height로 영역 지정, display : flex

HTML 태그를 작성하는 방법

1. 시작 단계

   큰 그림을 그리고 태그를 짜놔야 한다. 구역을 나누고, CSS를 어떻게 입힐 것인지 기획 단계에서부터 최대한 생각해두어야 한다.

2. Emmet tag 활용법

   > 는 하위 태그 생성, +나 *는 사칙연산 그대로의 의미(함께 생성, 정해준 갯수만큼 생성), .는 class 생성, #는 id 생성

   예시 : div.contents > ul > li*5

CSS 태그 배웠던 기능

1. reset.css

reset.css는 기본 디자인을 초기화해주는 css 파일이다. 비유하자면 그림을 그리기 위해서 흰 도화지를 만들어주는 것인데, 이거 먼저 적용해주고 디자인 시작해야 한다.

2. 웹 폰트 가져오기

   눈누라는 사이트에서 원하는 폰트를 쉽게 가져올 수 있다. 웹 폰트로 사용이라는 부분을 그대로 긁어서 css 파일에 붙이면 된다.

3. rotate 애니메이션

   슬롯머신같이 움직이는 애니메이션을 구현해봤다. 이거는 설명보다 코드를 첨부하는 게 빠를 것 같아서, 바로 코드를 첨부한다.

@keyframes rotate {
    
    0%{
        transform: translateY(0);
    }

    25%{
        transform: translateY(-20%);
    }

    50%{
        transform: translateY(-40%);
    }

    75%{
        transform: translateY(-60%);
    }

    100%{
        transform: translateY(-80%);
    }

}

작성하고, 적용하고 싶은 부분에 다음과 같이 넣어주면 된다.

.type_list {
    animation: rotate 7s infinite;
}

4. width와 height로 영역 지정하기

   width : 100% , height : 100% 옵션을 줌으로써 자기 영역에 꽉 차게 영역을 설정할 수 있다.

5. display : flex

   display에 flex 속성을 주면 flex-direction으로 레이아웃(세로로 쌓을 것인지 등등)을 설정할 수 있고, justify-content로 가운데 정렬을 할 수 있다.

   
   flex 태그에 대해 설명한 좋은 문서가 있어서 링크를 첨부한다. CSS Flex(Flexible Box) 완벽 가이드