CSS3에서 추가된 글자속성
★@font-face 속성
이전에는 서체를 시스템 서체(운영체제에서 지원하는 서체, *.ttf/*.otf)외에는 웹 개발 환경에서 사용하지 못했다. 웹 개발 환경에서 가변 서체를 자유롭게 사용할 수 있도록 @font-face 속성을 지원한다.
웹 서체 파일(*.eot, *.woff)을 웹 서버에 저장하고 웹 문서에 포함해서 사용한다.
1. fonts.google.com(웹 서버)에서 지원하는 웹 서체를 사용
2. 웹 서체를 직접 변환 작업을 해서 사용
서체의 기본 확장자명이 *.ttf 서체 파일을 *.eot와 *.woff 서체 파일로 변환작업을 하여 웹 문서에 포함시킨다. 모든 브라우저에서 동일한 결과를 얻기위해 코딩하는 것을 "크로스 브라우징" 작업이다.
★text-transform 속성
글자를 출력하는 방식을 지정한다.
none: 글자를 변환하지 않는다.
capitalize: 영문 첫문자만 대문자로 나머지는 소문자로 처리(O)
uppercase: 모든 영문자를 대문자로 처리(O)
lowercase: 모든 영문자를 소문자로 처리
★text-shadow 속성
텍스트에 그림자를 부여하는 속성이다.
text-shadow:값1 값2 값3 값4;
값1: 오른쪽 그림자 크기, 값2: 아래쪽 그림자 크기, 값3: 번짐크기, 값4: 그림자 색상
text-shadow:1px 1px 1px #000;
CSS의 글자속성
1. font-family 속성: 글자 서체를 지정한다.(값: 서체명)
2. font-size 속성: 글자 크기를 지정한다.(값: 숫자, 단위:px, em(1em = 16px, 2em = 32px))
3. color 속성: 글자의 색상을 지정한다.(값: #RRGGBB(O), rgb(0~255, 0~255, 0~255), rgba(0~255, 0~255, 0~255, Alpha(투명도:0 ~ 1)))
4. font-weight 속성: 글자의 두께를 지정한다.(값: normal, 400)
font-weight:400; font-weight:normal; font-weight:bold; font-weight:700;
5. font-style 속성: 글자의 기울기를 지정한다.(값: normal, italic)
CSS의 글자(텍스트)속성
1. text-align 속성: 텍스트의 수평 정렬을 지정한다.
left(왼쪽 정렬:기본값), center(중앙정렬-O), right(오른쪽 정렬), justify(양쪽 정렬)
2. text-decoration 속성: 글자에 선을 넣거나 제거를 지정한다.
none(글자에 선을 지정하지 않는다.-O), underline(밑줄을 표시한다.), overline(윗줄을 표시한다.), line-through(가운데 줄을 표시한다.)
3. line-height 속성: 행간(텍스트의 위/아래 여백)을 지정한다.
4. letter-spacing 속성: 자간(글자와 글자 사이의 여백)을 지정한다.
양수(여백을 크게한다.), 음수(여백을 줄인다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자속성</title>
<style>
/*웹 폰트는 3~4개 정도만 사용한다.*/
@font-face {
font-family:'square'; /*서체명을 지정*/
src:url('fonts/NanumSquareR.eot'); /*외부에 있는 웹 폰트 파일을 로드한다.*/
src:url('fonts/NanumSquareR.woff') format('woff');
}
@font-face {
font-family:'jua';
src:url('fonts/bm-jua.eot');
src:url('fonts/bm-jua.woff') format('woff');
}
@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap');
/*reset.css*/
* {margin:0; padding:0; box-sizing:border-box;}
h1, h2, h3, h4, h5, h6 {font-family:'jua'; font-weight:normal;}
ul li {list-style:none;}
/*common.css: body, header, footer*/
body {
/*웹 사이트에 공통으로 들어가는 서체를 지정: 고딕(나눔고딕, 나눔 스퀘어)-고딕체가 "심미성"은 떨어지나 "가독성"이 좋기 때문에 사용한다.
공통으로 들어가는 텍스트 크기를 지정(15px), 공통으로 들어가는 텍스트 색상을 지정, 배경색상을 지정*/
font-family:'square'; font-size:15px; color:#333;
background:#FFF;
}
/*main.css, information.css, history.css, location.css*/
h2 {font-family:'square';}
h3 {font-family:'jua'; font-size:52px;}
h4 {
font-family: 'Abyssinica SIL', serif; font-size:52px;
text-transform:uppercase;
}
.nsk {
font-family: 'Noto Sans KR', sans-serif; font-size:48px; color:#06F; font-weight:bold;
text-align:center; text-transform:uppercase;
text-shadow:1px 1px 2px #000, -1px -1px 2px rgba(255,255,255,0.6), 0 3px 3px #0F0, 0 -3px 3px #00F, 3px 0 3px #F00, -3px 0 3px #F00;
letter-spacing:-5px; /*자간*/ line-height:150px; /*행간*/
}
.fontProperty {width:300px; margin:50px auto;}
h5 {font-size:24px; color:#06F;}
.fontProperty > p {font-size:15px; color:#333;}
.space {
width:200px; margin:100px auto;
white-space:nowrap; /*텍스트 줄바꿈 제거*/
overflow:hidden; /*박스 영역 밖으로 벗어난 콘텐츠를 안보이게 지정*/
text-overflow:ellipsis; /*박스 영역 밖으로 벗어난 텍스트를 ...으로 표현한다.*/
background:orange;
}
</style>
</head>
<body>
<h2>웹 폰트를 지원하는 폰트 페이스</h2>
<h3>웹 폰트 주아 서체 적용</h3>
<h4>fonts.google.com</h4>
<p class="nsk">Noto Sans KR</p><!-- 구글 웹 서체를 적용 -->
<div class="fontProperty">
<h5>더미 타이틀</h5>
<p>뭇 옷을 이상 끝까지 따뜻한 싹이 것이다. 쓸쓸한 살 불러 예수는 미묘한 싹이 기관과 것은 것이다. 그와 심장은 행복스럽고 가는 하는 소금이라 그리하였는가? 보배를 풍부하게 석가는 따뜻한 끓는 남는 두손을 위하여서. 그와 생의 얼음이 불어 열매를 봄바람을 것이다. 무엇을 앞이 사는가 방지하는 풀이 끓는 많이 것이다. 위하여서, 낙원을 풍부하게 역사를 방지하는 두기 사랑의 끝에 아름다우냐? 반짝이는 천자만홍이 없으면, 곳이 역사를 무한한 사막이다. 사람은 청춘은 새가 하여도 충분히 그들은 꽃 않는 천고에 부패뿐이다. 그들을 기쁘며, 그들의 꽃이 우리의 얼마나 아름다우냐? 것은 그것을 길을 가슴에 끓는다.</p>
</div>
<p class="space">뭇 옷을 이상 끝까지 따뜻한 싹이 것이다.</p>
</body>
</html>
결과
