본문 바로가기

카테고리 없음

[스마트UIUX]16,17일차 (폰트 적용, img태그)

https://codepen.io/limyena/pen/GRbELMQ

 

눈누폰트 적용하기

...

codepen.io

*포트폴리오도 상업적인 용도이다.

 상업적인 용도로 사용 가능한 폰트들만 사용해야된다.

  ㄴ다폰트에는 상업적으로 사용 가능한 무료폰트가 있고, 상업적으로 사용 불가능한 무료 폰트가 있다. 

  ㄴ 눈누폰트는 상업적으로 사용 가능한 폰트만 모아둔 곳

       - 눈누 모든폰트 순위에서 확인하면 유행하는 폰트 파악할 수 있음

 

 

 

[영문폰트와 한글폰트 적용하기]

 

https://codepen.io/limyena/pen/VwJzmRg?editors=1100

 

영문폰트와 한글폰트 적용하기

...

codepen.io

*한글폰트는 영문폰트까지 지원해주는 경우가 많다. 

  영문폰트는 한글폰트를 지원하지 않는다.

* font-family: 영문, 한글, sans-serif;

 

 

 


[이미지 태그]

- src=""값으로는 이미지 경로는 사용할 수 있다.

  ㄴ파일 폴더 경로

  ㄴurl 주소

- 이미지 태그는 닫는 태그가 없다. 부모 역할을 할 수 없다.

 

https://codepen.io/limyena/pen/YzoxNmW

 

이미지 태그

...

codepen.io

 

 

https://codepen.io/limyena/pen/VwJzpwa

 

이미지태그 여백

...

codepen.io

- 이미지태그는 기본 display값이 inline이기 때문에 하단에 알 수 없는 여백값이 생긴다. 
- img태그는 너비가 100%로 사용되는 일이 많기 때문에 display를 block으로 바꾸어서 여백을 삭제한다.

img태그 중에 간혹가다가 알 수 없는 이유로 여백이 안나오는 경우도 있다.
안나오면 display: block; 을 안쓰면 된다.

 

displai: block 적용 전 / 후 (이미지 하단 여백이 사라짐)

 

로고 적용