Kakao Clone02 :: 카카오 클론 day 1

www.w3schools.com/tags/tag_i.asp

아이콘 공수, 폰트어썸 : fontawesome.com/

bootstrap cdn font awesome : bootstrapcdn-dev-pr-747.herokuapp.com/fontawesome/ 

 

div, i,  이 2가지에 관해서 작성해볼까 한다. 

HTML 에서는 <> 에 대해서 각각 태그라고 부른다. 

<div>는 주로 레이아웃을 나누는데 사용한다. 

 

주로 <i> 와 <span> 요소가 아이콘를 표현하는데 자주 사용한다.  특히, 아이콘을 가져오는데 그냥 불러다 올순 없고 Free Font Awesome 5 icon을 사용한다면

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

 

이런식으로 써서 아이콘을 다운로드 받지 않고 쉽게 불러다 쓸 수 가 있다.   

 

그래서 오늘 한것은 아이콘을 추가 해봤는데 비행기, 와이파이, 달, 배터리를 추가해보았다.

<i class="fa fa-fighter-jet" aria-hidden="true"></i>
<i class="fa fa-wifi"></i>
<span class="header__time">18:38</span>
<i class="fas fa-moon"></i>
<span class="header__batery"> 66%<!--batery icon--></span>

 

div와 span의 차이는 하나는 레이아웃을 잡는데 많이 쓰는 한편, span은 인라인 용이라서 중첩시 div보다 빠른 처리가 가능하다. 

 

이전에 진행한 부분이 있어서 그렇고 상단에 보면 오늘 적용한 것들은 잘 적용됬음을 알 수 있다.