[길벗 학습단] 6장 CSS 필수 속성 다루기 (4)

6. 전환 효과 속성 적용하기

css 한 요소에 적용된 속성값을 다른 속성값으로 바뀌게 하는 것

transition-property: 속성값;
transition-duration: 지속시간;
transition-delay: 지연시간;
transition-timing-function: 속성값; /* 전환되는 시간? */


7. 웹 폰트와 아이콘 폰트 사용하기

1. 구글 폰트 적용하기

구글 폰트 사이트에서 원하는 폰트를 고른 후 important로 시작하는 코드를 css파일 최상단에 넣는다. 그러면 font-family 속성으로 해당 폰트를 넣을 수 있다.

2. 아이콘 폰트 적용하기

font awesome이나 material icon등의 사이트에서 CDN 주소를 복사해 HTML 태그에 넣는다. 그 후 사이트에서 원하는 아이콘을 클릭한 후 상세 페이지에 있는 i 태그를 복사해 html 문서에 뭍여 넣으면 된다. 폰트로 인식되기 때문에 font-size 속성이나 color 속성으로 꾸밀 수 있다.

답글 남기기

이메일 주소는 공개되지 않습니다.