렌식님 욕심 때문인지는 모르겠지만 오늘만 하루에 글 2개 써봅니다..(뭐 어차피 아는 내용 의식의 흐름대로 쓰는건데 뭐.....)
자 저번 글에서 @font-face로 폰트를 적용해봤습니다. 하지만? 적용이 안되어있습니다.
이번에 왜 그런지 살펴볼겁니다. 내용이 상당히 많아요. 왜? 저는 tmi로 생각될 정도로 자세하게 알려드릴겁니다.
자 그러면 본격적으로 살펴보겠습니다.
우선 적용을 할라면 html에 대해서 알아보겠습니다. 진짜 이 내용은 기초의 기초까지 가면 그냥 웹 강의가 되버려서 핵심만 짚을겁니다.
여러분 가끔씩 키보드에 F12를 잘못눌러서 우측이나 하단에 웬 이상한 영어가 가득한 창을 보시게 됩니다.
이상한 영어가 뭐냐면 여러분들이 보고 계시는 웹 페이지의 html 소스입니다. html 소스는 웹 페이지의 뼈대라고도 할 수 있는데요,
우리가 여기를 읽을 줄 알아야 합니다. 읽을 줄 알게 되면 나중에 유용하게 쓰입니다.
크롬 기준으로 F12를 누르고 좌측 상단에 보면 사각형과 마우스 커서가 있습니다.
이거를 누르고 여러분이 보시던 웹페이지에 커서를 갖다 대면 갖다 댄 부분의 html 태그를 보실 수 있고 좌측 개발자도구에 태그 위치까지
친절하게 이동되어 있습니다. 이제 이거를 알아볼건데 다시 말하지만 깊게 알아보지는 않을겁니다.
결론 먼저 빠르게 알려 드리겠습니다. html에 대해서 깊게 알아 보면 머리 아파서 포기하실 수 있는 분이 있을것 같거든여...
갖다 대면 div, p 등등.. 이런게 앞에 붙어있습니다. div가 뭐냐면 division의 약자 즉 해석하자면 분활, 영역을 나누다가 됩니다.
즉 우리가 보고 있는 사이트는 div 태그와 함께 다른 태그들로 영역이 구분 되어있습니다.
우리는 폰트만 지정해줬지 이 영역들에 폰트를 적용해주지 않았기 때문에 문제가 있는것 처럼 보였던 겁니다.
제가 트게더 소스를 분석한 결과로는 폰트를 지정해줘야할 태그(영역)는 html, div, input, p, table, textarea가 있었습니다.
적용은 아래와 같이 하시면 됩니다.
~~~
html, div, input, p, table, textarea {
font-family: '폰트 이름', serif, sans-serif 택 1
}
~~~
css에서는 이런식으로 적용을 해주게 됩니다.
여기서 더 살펴볼 것은 serif가 무엇이고 sans-serif가 무엇이냐인데, serif는 한글로 따지면 명조, 바탕체 계열, sans-serif는 고딕체 계열입니다. 모니터 상으로 볼때는 sans-serif가 가독성이 더 높다는 말이 많습니다. sans-serif를 권장드립니다.
HTML 태그에 대해서 더 자세한 것은 보충 강좌나 뒷 강좌에서 알려 드리겠습니다. 어차피 다시 만날 놈들이기 때문에...
다음에는 다른 주제로 찾아뵙겠습니다.
글이 도움이 되셨다면 추천 꾹 눌러주시면 감사하겠습니다! 트위치 팔로우도 환영입니다~~(아 스트리머분들은 맞팔해드립니다..ㅎㅎ)
팔로우 눌러주세요~~
