html, css 노트정리 ②

메인페이지가 index.html인 이유

• 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문이다.

BEM

• Block__Element--Modifier
• 참고 url : https://nykim.work/15

Font Awesome

• 아이콘을 추가하는 방식
  • 직접 아이콘 이미지를 추가
  • SVG : 수학으로 구성된 픽셀이 없는 이미지 형식
    SVG 가져오는 사이트 :
    • https://heroicons.com/
    • https://fontawesome.com/

Web Font

• 웹 폰트를 추가하는 방법
  • link 태그
  • css에서 import (추천방법)
• 모든 폰트를 추가하려하면 웹이 무거워진다.
• 웹 폰트로는 구글폰트가 있다. url : https://fonts.google.com/

아이템 중앙정렬

부모 요소 {
   display : flex;
   justify-content : space-between;
}

• justify-content로는 위와 같이 빨긴박스가 정중앙으로 오지 않는다.
• 한단계 거쳐 주는 기법(?)을 이용하면 된다.

부모 요소 {
   display : flex;
   justify-content : center;
}
부모 요소__column {
   width : 33%;
}
부모 요소__column:first-child {
   display : flex;
   justify-content : flex-start;
}
부모 요소__column:nth-child(2) {
   display : flex;
   justify-content : center;
}
부모 요소__column:last-child {
   display : flex;
   justify-content : flex-end;
}