티스토리 뷰
반응형
텍스트 관련 CSS - font-family
- font-family : 글꼴을 지정하는 속성
- font-size : 글자 크기를 지정하는 속성
- font-weight : 글자 굵기를 지정하는 속성
- color : 글자 색을 지정하는 속성
- text-align : 텍스트 정렬 방법을 지정하는 속성
- line-height : 줄 간격을 조절하는 속성
font-family
이 속성은 <body>태그를 비롯해 <p>, <hn>태그처럼 텍스트를 사용하는 요소들에서 주로 사용합니다.
- 예를 들어 글꼴을 굴림체로 하고 싶다면
p {font-family:굴림;}
- 글꼴을 맑은고딕체로 하고 싶다면
p {font-family:"맑은 고딕";}
속성 값은 주로 큰따옴표를 사용합니다.
예를 들어 텍스트 글꼴을 지정할 때 "맑은 고딕"처럼 두 단어 이상으로 된 글꼴 이름이라면 따움표로 묶어서 표시합니다.
웹문서에 포함된 텍스트들은 사용자의 글꼴을 이용해 웹 브라우저 화면에 표시됩니다.
그러나 사용자의 시스템에 지정한 글꼴이 설치되어 있지 않은 경우, 브라우저 기본 값이 나타나 각각 다른 글꼴로 표시 됩니다.
따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두번째, 세번째 글꼴까지 지정해야 합니다. 두개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 쉼표로 구분합니다.
body {font-family: "맑은 고딕", 굴림, 돋움}
위의 예시는 웹 문서 전체에 맑은 고딕체를 적용하지만 만약 맑은 고딕 글꼴이 없다면 굴림 글꼴을 적용하고 그것도 없다면 돋움체를 적용하라는 의미입니다.
CSS에서 여러 글꼴을 아무리 지정하더라도 사용자의 시스템에 설치되어 있지 않다면 화면에 표시할 수 없습니다.
따라서 기본 글꼴을 사용하는 경우가 많습니다.
- 윈도우 시스템의 경우 영문 기본 글꼴은 : sans-serif체와 serif체 등
- 윈도우 시스템의 경우 한글 기본 글꼴은 : 굴림, 궁서, 돋움, 바탕체 등
font-family 속성은 상속되기 때문에 <body>태그 스타일에서 한번 벙의하면 문서 전체에 적용되므로 다른 글꼴을 사용하고 싶을땐 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의하면 됩니다.
참고 : HTML5 + CSS3 웹표준의 정석
반응형
UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/CSS
댓글
© 2019 Eun's