3. 반응형 웹페이지 만들기 - fabicon, 폰트설정, fontAwesome,CSS Reset
웹페이지의 아이콘을 지정하는 fabicon을 설정해보자
1. fabicon 설정하기
<!-- 일반적인 fabicon 설정 -->
<link rel="icon" href="img/fun-coding.ico" />- .ico 확장자는 16 x 16, 32 x 32 등 여러가지 사이즈가 가능하다.
이때 fabicon은 인터넷 익스플로어나 아이폰은 따로 설정해줘야한다.
<!-- 아이폰용 fabicon 설정 -->
<link rel="apple-touch-icon" href="img/fun-coding.ico" />
<!-- 인터넷 익스플로어용 fabicon 설정 -->
<link rel="shortcut icon" tyle="image/x-icon" href="img/fun-coding.ico" />
2. CSS reset하기
<!-- CSS Reset(1), style.css, 아이콘 폰트, 웹페이지 사용 폰트 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
이때 리셋 css 사이트가 갑자기 없어지거나 중단될 수 도있으므로 되도록이면 reset css파일을 직접 만들어서 적용하는게 나을 수 도 있다.
https://necolas.github.io/normalize.css/
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
- Download를 눌러서 나오는 코드를 복사해서 nomalize.css파일에 붙여넣어준다.
<link rel="stylesheet" href="css/normalize.css" />위와 같이 파일을 만들고 link를 수정해준다
3. 웹페이지에서 이용되는 아이콘들 사용하기
-이러한 아이콘을 일일이 만들기보다 fontAwesome이라는 사이트를 이용해서 사용하는 것이 좋다
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
-fontawesome에 들어가서 회원가입하고 로그인을한다.
-아래 yourkits를 누르고 kit를 만든다.(유료회원은 더많은 아이콘을 사용가능)
-자신의 kit의 js를 가져온다.
<!-- https://fontawesome.com/start -->
<script src="https://kit.fontawesome.com/자신의 kit URL" crossorigin="anonymous"></script>
4. 웹 폰트 사용하기
-각 컴퓨터에 설치되어있는 폰트는 모두 다르다. 그러면 웹사이트의 폰트가 다 다르게 나오는 경우가 생긴다.
- 이때 경량화된 웹 폰트를 사용해 모든 PC에서 동일한 폰트를 볼 수 있다.
우리가 사용할 웹 폰트는 아래 링크에있다.
https://spoqa.github.io/spoqa-han-sans/ko-KR/
Spoqa Han Sans Neo
Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ
spoqa.github.io
<!-- Spoca Han Sans Neo: https://spoqa.github.io/spoqa-han-sans/ko-KR/ -->
<link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" />
그리고 CSS 파일을 하나 만들어준다.
<!-- CSS Reset(1), style.css, 아이콘 폰트, 웹페이지 사용 폰트 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
...
<!-- 리셋 css보다 아래에 작성해줘야함 -->
<link rel="stylesheet" href="css/style.css" />
5. CSS 초기 설정하기
* {
box-sizing: border-box;
}
body {
font-family: "Spoqa Han Sans Neo", "Sans-serif";
}-box-sizing을 borde-box로해서 pixel을 더 편하게 작성한다.
-웹폰트로 가져온 폰트도 설정해준다.