4월 10일 (수)
- 오늘은 과제로 LINE Plus Coporation 의 header 부분의
HTML markup과CSS작업을 하였다. 코딩에 들어가기에 앞서 아래 사진과 같이 수작업으로 설계를 해보았다. 수작업으로 설계를 해보니 꼼꼼한 작업을 할 수 있다는 장점이 있지만 시간이 많이 소요되어서 지루하게 느껴지는 단점이 있다. 다음 설계는 카카오 오븐과 같은 툴을 사용해 볼 생각이다.
html_markup
css
- LINE css 작업을 진행하면서 fontello로 아이콘을 넣어봤다.기존의 아이콘을 사용할 때는
i태그를 사용하거나image파일을 사용하는 방식이었는데 fontello는class를 html 요소의 추가하는 방식으로 아이콘을 사용할 수 있어 간편했다. 사용방법은 비교적 어렵지 않고 아래와 같이 사용하면 된다.
fontello사이트의 접속 후 원하는 아이콘을 클릭하고 우측 상단에 있는
Download webfont버튼을 클릭한다.압축을 풀고
font폴더와fontello.css파일을 현재 작업중인 폴더로 복사한다.fontello.css에서 설정을 변경한다.
먼저 font 폴더의 경로가 잘 설정되어 있는지 확인한다.
1
$ src: url('../font/fontello.eot?63304039');
fontello는 가상요소를 이용하여 html요소의 앞 뒤에 배치한다. before를 after로 변경할 수 있다.1
$ [class^="icon-"]:before, [class*=" icon-"]:before
fontello.css의 가장 하단에 아이콘 클래스와 가상요소가 정의되어 있다. 새로운 아이콘을 사용하고 싶을 때는 이 부분만 넣어주면 된다.1
$ .icon-cog-alt:before { content: '\e800'; } /* '' */
:before 가상요소 앞에 있는
class를 html 요소의class의 넣어주기만 하면 아이콘을 사용할 수 있다.