190410_TIL(LINE 웹페이지 header html,css, fontello)

4월 10일 (수)

• 오늘은 과제로 LINE Plus Coporation 의 header 부분의 HTML markup 과 CSS 작업을 하였다. 코딩에 들어가기에 앞서 아래 사진과 같이 수작업으로 설계를 해보았다. 수작업으로 설계를 해보니 꼼꼼한 작업을 할 수 있다는 장점이 있지만 시간이 많이 소요되어서 지루하게 느껴지는 단점이 있다. 다음 설계는 카카오 오븐과 같은 툴을 사용해 볼 생각이다.

• LINE css 작업을 진행하면서 fontello로 아이콘을 넣어봤다.기존의 아이콘을 사용할 때는 i태그를 사용하거나 image 파일을 사용하는 방식이었는데 fontello는 class를 html 요소의 추가하는 방식으로 아이콘을 사용할 수 있어 간편했다. 사용방법은 비교적 어렵지 않고 아래와 같이 사용하면 된다.

1. fontello사이트의 접속 후 원하는 아이콘을 클릭하고 우측 상단에 있는 Download webfont 버튼을 클릭한다.

2. 압축을 풀고 font 폴더와 fontello.css 파일을 현재 작업중인 폴더로 복사한다.

3. fontello.css에서 설정을 변경한다.

• 먼저 font 폴더의 경로가 잘 설정되어 있는지 확인한다.

  $ src: url('../font/fontello.eot?63304039');

• fontello는 가상요소를 이용하여 html요소의 앞 뒤에 배치한다. before를 after로 변경할 수 있다.

  $ [class^="icon-"]:before, [class*=" icon-"]:before

• fontello.css의 가장 하단에 아이콘 클래스와 가상요소가 정의되어 있다. 새로운 아이콘을 사용하고 싶을 때는 이 부분만 넣어주면 된다.

  $ .icon-cog-alt:before { content: '\e800'; } /* '' */

• :before 가상요소 앞에 있는 class를 html 요소의 class의 넣어주기만 하면 아이콘을 사용할 수 있다.