goodthings4me.tistory.com
■ 폰트 속성 (font-size/family/sytle/weight, line-height, text-align/decoration)
O font-size 속성
- 글자의 크기 지정 : 단위(px, em) 또는 키워드
- 형식
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
* <절대 크기> : 브라우저에서 지정한 글자 크기 xx-small | x-small | small | medium | large | x-large | xx-large
* <상대 크기> : 부모 요소 글자 크기 기준으로 larger | smaller
* <크기> : 브라우저와 상관없이 글자 크기를 직접 지정 (단위는 px, em, ex, pt)
* <백분율> : 부모 요소 글자 크기 기준으로 %를 계산해서 표시
- h1 태그의 기본 크기는 32px, p 태그의 기본 크기는 16px
* 웹 브라우저 기본 크기 : 16px
* 모바일 반응형에서는 글자 크기 단위는 em 사용하는 것이 좋음
O font-family 속성
- 글자의 폰트 종류 지정(컴퓨터에 설치된 폰트 입력)
- 형식
font-family: "맑은 고딕", 돋움, 굴림, Arial | 'Time New Roman';
* "맑은 고딕" 글꼴이 없으면 "돋움" 적용하고 없으면 "굴림" 등 순차적 적용 의미
* 따옴표는 공백이 있는 폰트명일 경우에 표시
* 여러 개 지정 시 콤마로 분리
.font-A { font-family: Arial, 'Time New Roman', Serif, Sans-serif, Monospace ; }
* Serif (명조체), Sans-serif (고딕체)
@font-face 속성
- 직접 웹 폰트를 업로드해서 사용해도 되지만, 최근은 구글 웹 폰트 등을 많이 사용함 (직접 업로드 사용하기)
<head>
<style>
@font-face {
font-family: 'trana'; /* 글꼴 */
src: local('trana'),
url('trana.eot'),
url('trana.woff') format('woff'),
url('trana.ttf') format('truetype'),
}
.w-font {
font-family: 'trana', san-serif; /* 웹 폰트 지정 */
}
</style>
</head>
- 웹 폰트(web-font) : 사용자 시스템에 지정한 글꼴이 없더라도 웹상에 있는 글꼴 정보를 가져와서 화면에 표시해주는 기능(웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴로 구글 웹 폰트를 많이 사용함)
- 구글 웹 폰트 사용하기
* https://fonts.google.com/ 접속
* 적용 폰트 검색 후, Embed의 <link href=""> 또는 @import 소스 url 복사, 그리고 CSS 적용 글꼴 이름 기억
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
또는
@import
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
</style>
CSS rules to specify families
font-family: 'Noto Sans KR', sans-serif;
O font-style 속성과 font-weight 속성
- 폰트의 기울기 또는 두께 조정
-형식 : font-style 속성
font-style: nomal | italic | oblique
font-weight: bold | bolder | normal | 숫자(~700|800|900)
* bold는 700
O line-height 속성
- 문단 내 줄간격(글자의 높이) 지정 : 글자를 수직 중앙 정렬할 때 많이 사용
- 숫자와 백분율은 부모 요소를 기준으로 몇 배인지 지정
* 보통 글자 크기의 1.5~2배 정도면 적당
- height와 같거나 비슷한 수치를 줌
* 글자는 수평 중앙 정렬은 되지만, block 형식에서 수직 정렬은 되지 않기 때문에 이 속성 사용
- 형식
line-height: normal | <숫자> | <크기> | <백분율>
<head>
<style>
.big-line { line-height: 2; } /* 글자 크기 2배, 200%, 20px 등 사용 가능 */
.small-line { line-height: 0.7; } /* 글자 크기 0.7배 */
</style>
</head>
<head>
<style>
.font_big {
font-size: 1.3em;
}
.font_italic {
font-style: italic;
}
.font_bold {
font-weight: bold;
}
.font_center {
text-align: center;
}
.button {
width: 80px;
height: 35px;
background-color: #ff6a00;
border: 1px solid #ffffff;
border-radius: 20px;
box-shadow: 5px 5px 5px #a9a9a9;
}
.button>a {
display: block;
line-height: 30px;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">Click</a>
</div>
</body>
O tex-align 속성
- 글자의 정렬 관련 속성
- <span> 태그는 inline 형식을 가지므로 너비가 존재하지 않기 때문에 text-align 속성 적용 안됨 (중앙이라는 개념이 없음)
- 형식
text-align: left | right | center | justify | start | end | match-parent
O text-decoration 속성
- 텍스트에 밑줄 긋거나 가로지르는 선(취소선) 표시
- <a> 태그 href 속성의 밑줄 제거 시에도 사용
-형식
text-decoration: none | underline | overline | line-through
<head>
<style>
.edit1 { text-decoration: underline; }
.edit2 { text-decoration: overline; }
.edit3 { text-decoration: line-through; }
</style>
</head>
<body>
<span>
<a href="#" class="edit1">Click</a>
<a href="#" class="edit2">Click</a>
<a href="#" class="edit3">Click</a>
</span>
</body>
O white-space 속성
- 공백 처리 방법 지정
- 형식
white-space: normal | nowrap | pre | pre-line | pre-wrap
* normal : 기본값 연속 공백은 하나로 처리
* nowrap : 연속 공백 하나, 줄바꿈 안됨
* pre : 연속 공백, 줄바꿈 모두 소스 그대로 표시, 영역 너비 넘어가는 부분의 줄은 자동으로 바뀌지 않음
* pre-line : 연속 공백은 하나로, 소스에서 줄바꾼 부분 그대로 표시, 영역 너비 넘어가는 부분 자동 줄바꿈
* pre-wrap : 연속 공백, 줄바꿈 모두 소스 그대로 표시, 영역 너비 넘어가는 부분 자동 줄바꿈
O letter-spacing, word-spacing 속성
- 글자간 간격, 단어간 간격 지정
- 형식
letter-spacing: normal | <크기>
word-spacing: normal | <크기>
# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015
'IT(Tip)' 카테고리의 다른 글
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #7(float, shadow) (0) | 2020.09.29 |
---|---|
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #6(위치 속성 - position, z-index, overflow) (0) | 2020.09.28 |
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #4(배경 속성 - background) (0) | 2020.09.26 |
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #3(박스 속성 - width, height, margin, padding, box-sizing) (0) | 2020.09.25 |
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #2(가시 속성 display, visibility, opacity) (0) | 2020.09.24 |
댓글