티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유
이전 시간에 나눔고딕 웹폰트 적용, 제대로 배우기 라는 글에서
body{font-family: 'Nanum Gothic, sans-serif;}
라고 하면 웹 문서 전체에 나눔고딕 글꼴이 적용된다고 했습니다.
하지만 이렇게 해도 일부가 바뀌지 않는 경우가 있습니다. 왜 그럴까요?
css에서는 스타일 적용 우선 순위가 있습니다.
스타일이 중복됐을 경우 어느 것을 적용할지 우선 순위를 정해 놓은 것입니다.
즉, body에 '나눔' 글꼴을 적용했는데, div에 '돋움체'로 스타일을 주었다면 어느 것을 적용해야 할까요?
스타일 적용 우선 순위는 다음과 같습니다.
인라인 스타일 >내부 스타일>외부 스타일>브라우저 기본값 순이며,
가장 마지막에 스타일을 쓴 것을 가장 먼저 적용하며,
구체적인 값을 계산하여 적용하기도 합니다
스타일 적용 우선 순위와 속성 강제 적용 !important 참조해 주세요~
그럼 인라인/내부/외부 스타일이란 무슨 뜻일까요?
인라인 스타일은: 스타일을 줄 때 줄 속에 끼워 넣으며
내부 스타일은: <head>와 </head> 사이에 넣으며
외부 스타일은 : 스타일을 css 파일로 별도로 만든후 <head>와 </head> 사이에
외부 파일 삽입 link를 겁니다.
1. 인라인 스타일 예:
<html>
<head>
<style>
</style>
</head>
<body>
<p style="font-family: '돋움', sans-serif;">
동해물과 백두산이 마르고 닳도록 </p>
</body>
</html>
2. 내부 스타일 예:
<html>
<head>
<style>
body{font-family: '굴림', sans-serif;}
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록</p>
</body>
</html>
3. 외부 스타일 예:
아래를 css 파일로 저장(예:font.css)하여
body{font-family: '나눔고딕', sans-serif;}
link 태그로 외부 문서를 연결
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="font.css" />
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록</p>
</body>
</html>
CSS란? (HTML과 CSS의 차이, CSS 작성법) 도 참조해 주세요~
위 세 가지 스타일이 html문서에 동시에 들어갔다면, css 스타일 우선 순위에 따라,
1번 인라인 스타일이 적용됩니다.(즉, 돋움체)
티스토리 스킨의 경우 대부분 배포한 것을 사용하는데,
그래서 글꼴이나 글꼴 크기가 스킨 제작자의 의도에 맞추어 다양하게 설정이 됩니다.
즉 본문은 글꼴 크기가 14px인데 사이드바는 13px,
body 글꼴을 '고딕'으로 해 놓았는데, 방명록, 최신글, 사이드 바 등은 다른 글꼴로 설정해 놓은 경우가 있어요
이럴 땐 body{font-family: ...}를 적용해도 전체 웹페이지에 일관적인 글꼴 적용이 되지 않습니다.
글꼴을 일관적으로 적용하려면?
Tistory 관리 화면 >꾸미기-html/css 편집> css 에서
ctrl+F 하여 font: 혹은 font-family: 라고 써 있는 것을 모두 찾아서
원하는 글꼴을 첫번째에 써 주기
글꼴을 지정하는 font-family 속성(serif, sans-serif차이)
(important 선언을 생각 안 해 본 것도 아닌데, 이 선언은 개별 스타일에만 적용되며
전체 스타일엔 적용되지 않는군요.)
※주의※
스킨에 일관적으로 '나눔고딕'으로 적용했다 하더라도
이전에 작성한 글들 중에서, 글 작성 시 다른 글꼴로 설정해 입혔다면, 이 또한 나눔고딕으로 바뀌지 않습니다.
스킨이 '내부 스타일'이라면 글 작성한 화면에서 설정한 글꼴을 '인라인 스타일'이기 때문에
인라인이 먼저 적용되기 때문입니다.
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
'티스토리 툭탁툭탁' 카테고리의 다른 글
[html] blockquote 태그(인용문 꾸미기 5가지) (0) | 2014.08.29 |
---|---|
[html/css] 수직선 그리는법 2가지(인용문 앞에 활용) (0) | 2014.08.28 |
나눔고딕 웹폰트 적용, 제대로 배우기 (0) | 2014.08.09 |
동영상(MP4) mp3로 변환하기 (0) | 2014.07.23 |
[배포완료]지구별 안내서, 티스토리 초대장 배포 합니다 (36) | 2014.07.22 |
댓글