2021-05-04 (22일차) 폰트어썸 아이콘 활용법, header태그, top-bar(상단바), hover 시간적용(transition), box-sizing:border-box;, 폰트 적용법, 상단바+우측메뉴박스

92강~101강

 

 

 

#문제. 다음 3차 풀다운 메뉴에서 해당 선택자가 몇 개의 엘리먼트를 선택하는지 주석으로 적어주세요

 

 

- 폰트어썸 아이콘 넣는 방법

  cdnjs.com > font-awsome 검색 후 복사

  html에 <link rel="stylesheet href="복사한 링크"> 추가

  폰트어썸에서 복사한 후 html에 붙여넣기

  ㄴ 폰트어썸의 아이콘은 글자취급으로, font-size로 크기 조절하고, 색상변경도 가능

 

- <header태그>

  사이트의 상단바(top-bar)을 뜻하는 태그

 

- top-bar 만드는 방법

  - inline-grid 사용
    사용 이유 : 태그에 따로 값을 줘도 되지만 공백을 글자 1칸으로 취급해서 칸이 띄어지기 때문에

  - div 처음과 끝의 너비값을 지정해준 상태에서, 나머지 너비를 가운데 div에게 주고 싶다면?

    calc를 이용하여 전체 퍼센트에서 두 div의 너비를 빼주면 됨

 

- hover에 시간 거는 방법

  transition

  ex) transition : width 1s, height 2s, background-color 3s;

 

- box-sizing :

  - box-sizing : content-box

    너비값에 border와 padding을 포함하지 않음
  - box-sizing : border-box

    너비값에 border와 padding을 포함하여 계산함 → 값을 아무리 줘도 너비에 영향X

 

- 폰트 사용방법

  눈누사이트에서 웹폰트 복사 후 css 가장 상단에 붙여넣기

 

#문제. 사이트 상단바, 이어서, 우측메뉴박스까지 구현

 

 

- 로고

  웬만하면 로고부분은 span으로 아이콘과 글자부분 나눠주기

  : div > a > span > 아이콘 > /span > span > 아이콘텍스트 > /span > /a > /div

  

- 상위클래스에 속하는 클래스 (BEM css명령법)

  class="top-bar" 아래있는 클래스는 class="top-bar__logo"라고 적음

  (정해진 것은 아니지만 사람의 취향!)