[CSS] 단축키, BEM, 아이콘 추가, 폰트 변경

    1. 이름 index.html 이라고 짓는 이유
        - 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있음

    2. 단축키 ! 누르면 html 기본 바탕 코드 완성됨. html:5 로도 가능

       - 나는 느낌표로 해도 적용이 안되어서 이유를 찾고 있었는데, 스터디원분께서 해결 방법을 공유해주셨다.
         혹시나 같은 문제가 있는 사람은 아래 링크 참고!
         https://goddino.tistory.com/217

[vscode] tab키 입력시 emmet 기능 안될 때 해결방법

       - (추가) 주석 단축키: 작성 후 Ctrl + /

 

    3. class name 작성시 주의사항

       - 흔한 단어를 사용해서 헷갈리도록 만들지 않는다.

       - '부모_자식' 관계를 명시한다.

    4. BEM:
       - BEM = Blocks and Elements, Modifiers
       - 좀 더 쉽게 읽히는 css 작성 방법 (class 네이밍 규칙)
       - block은 여기서 class같은 개념이다.

       - id, class..등은 따로 찾기 어려우므로 가능하면 class로 통일해서 작성하는 것이 좋다.
       - 권장 작성법:
           block__Element(요소, 정보 ex: text..)
           block--Modifier(수식어 ex: color..)

           예시:

<a class="btn btn--big btn--orange" href=~>
   <span class="btn__price">$500</span>
</a>

    5. 아이콘 추가하기
        1) 직접 아이콘 구하기: 만들거나 svg 추가
            svg -> Heroicons 사이트 추천 (코드 복붙)
            svg는 픽셀이 아닌 path로 되어있는 이미지
        2) Font Awesome 홈페이지에서 kit코드 받기
            ***script는 항상 마지막 (body끝) 에 위치!하도록 주의한다.

    6. html에 css 추가 자동완성하기
       - "link:css"라 하고 엔터를 치면 자동 완성 된다. 

           link:css + enter    ->       <link rel="stylesheet" href="css/style.css">  자동으로 작성됨

       -   ***이때 파일 위치 주의하기. css 파일이 특정 폴더 내에 있을 경우 '폴더/' 추가해서 작성함.

    7. 폰트 변경하기

       - font-family를 이용하여 서체를 변경할 수 있다. Google fonts 에서 폰트를 찾을 수 있다.
       - link 보다는 import 방식이 추천된다.
            -> @import url() 형식
            -> 위치는 반드시 최상단, body에 font-family 추가
       - 아이콘의 크기를 키워줄려면, 이름에 2x or lg 등 붙이기
            -> ex. fa-solid fa-battery-full fa-2x    -> 아이콘 2배 커짐
            -> font awsome 홈페이지에서 확인 가능

 

    8. css hack (justify-content 대신 사용 가능)
        1 상위 박스: 중앙 정렬
            justify-content: center; 
        2 내부 박스: 너비 설정하여 정렬
            width: 33%; 
        3 중앙에 위치할 박스: 가운데 박스만 중앙 고정
            display: flex; justify-content: center; 
        4 우측 박스: 오른쪽 고정
            display: flex; justify-content: flex-end; align-items: center;

 

 

 

TIL 끝!