36일차
- 네이버 오디오 왼쪽 영역
- 지난 회차 웹폰트 적용 복습 및 정리
강의노트
- 네이버 오디오 좌측 영역 카피캣
개요
- 네이버 오디오 좌측 영역
- 섹션 구분
- 내부 디자인
메모
특별히 새로운 학습 내용은 없었다.
추가학습
- 30강(8월 13일 분) : 네이버 이스포츠(3)
후반부의 웹폰트 적용 시키는 방법에 관한 복습 및 내용 정리
html의 폰트
-
html의 가장 기본 폰트는 san-serif로, 모든 브라우저에서 적용 가능하다.
-
font-family 속성의 속성값으로 여러 폰트를 기입할 수 있고, 기입한 순서대로 적용하되 사용자의 환경에서 폰트가 적용될 수 없으면 다음 폰트를 적용하는 식이다.
-
따라서 폰트를 적용할 때 font-family의 가장 마지막 속성값으로 san-serif를 넣어주면 호환성을 확보할 수 있다.
웹폰트의 적용
-
웹폰트란?
: 웹폰트는 웹상에 퍼블릭도메인으로 공개된 폰트들을 말한다. (강의에서는 구글 웹폰트를 사용) -
웹폰트의 적용(구글 웹폰트 기준)
-
적용하고자 하는 웹폰트가 연결되어 있는 link태그를 html문서의 head태그에 복사한다.
-
이 때, 해당 html과 연결된 css문서보다 앞쪽에 작성되어야 한다.(폰트를 먼저 연결하고, 그 폰트가 css를 통해 적용되어야 하기 떄문)
-
css의 적용은 함께 제공하는 font-family속성과 속성값을 복사하여 붙여주면 된다. 앞서 작성했듯 마지막 속성값으로 san-serif를 넣어준다.
구글 웹폰트 화면 예시- 복사해서 사용할 html요소와 css속성을 우측에서 확인할 수 있다.
- 폰트의 굵기는 임의로 지정할 수 없고, 제공되는 굵기는 각각 별개로 적용해야 한다.
(위 예시의 경우 100, 300, 400, 500, 700 굵기에 대해 각각 링크하기 위해 체크했고, 이에 따라 링크 태그의 내용이 달라진 모습이다.)
이슈-솔루션/미해결(질문)
X
학습 소감
근래 개인 사정으로 강의를 충분히 학습하기 힘들었는데, 거의 새로운 내용이 없는 반복 과정들이라 다행이라는 생각이 든다. 이번주 내로 스케쥴이 정상화 될 것 같으니, 자바스크립트 공부를 제대로 시작할 수 있을 것 같다. 다행이다.
responsibility