글자 속성
<CSS에서 추가된 글자 속성>
@font-face 속성
이전에는 시스템에서 서체(운영체제에서 지원하는 서체, *.ttf, *.otf) 외에는 웹 개발 환경에서 사용하지 못했다.
웹 서체 파일(*.eot, *woff)을 웹 서버에 저장하고 웹 문서에 포함해서 사용한다.
1. fonts.google.com 에서 지원하는 웹 서체를 사용
2. 웹 서체를 직접 변환 작업을 해서 사용
서체의 기본 확장자명이 *.ttf 서체 파일을 *.eot와 *.woff 서체 파일로 변환작업을 하여
웹 문서에 포함 시킨다.
모든 브라우저에서 동일한 결과를 얻기 위해 코딩하는 것을 "크로스 브라우징" 작업이라 한다.
( 서체 변환 시 사용하는 프로그램 : EOTFAST.EXE, sfnt2woff.exe )
1. 웹 서체를 직접 변환 작업을 해서 사용
<!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>
@font-face{
font-family:"brush";
src:url('fonts/BrushScriptStd.eot');
src:url('fonts/BrushScriptStd.woff') format('woff');
}
h2 {font-family:"brush"; font-weight:normal;}
</style>
</head>
<body>
<h2> 웹 폰트를 지원하는 폰트 페이스123 (@font-face)</h2>
</body>
</html>
2. fonts.google.com 에서 지원하는 웹 서체를 사용
<!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>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
/*reset.css - */
*{margin:0; padding:0; box-sizing:border-box;}
ul li {list-style: none;}
.nsk {
font-family:'Noto Sans JP', sans-serif; font-size: 52px;
color:#000; font-weight:bold;
text-align:center; text-transform:uppercase;
text-shadow:1px 1px 1px red, -2px -2px 5px orange,
0 3px 3px yellow, 0 -3px 3px green,
3px 0 3px lightblue, -5px 0 5px navy ;
letter-spacing:20px;
line-height:60px;
}
</style>
</head>
<body>
<p class="nsk">Noto Sans KR</p>
<!-- 구글 웹 서체를 적용하세요.-->
</body>
</html>
text-transform 속성
- 글자를 출력하는 방식을 지정한다.
none / capitalize / uppercase / lowercase
글자변환X / 영문 첫문자 대문자(O) / 모든 영문 대문자(O) / 모든 영문 소문자
text-shadow 속성
- 텍스트에 그림자를 부여하는 속성
text-shadow : 값1 값2 값3 값4 ;
값1(오른쪽 그림자) 값2(아래쪽 그림자) 값3(번짐크기) 값4(그림자색상)
ex) text-shadow : 1px 1px 1px #000;
<CSS의 글자 속성>
font-family 속성
- 글자 서체를 지정
ex) font-family : '서체명';
font-size 속성
- 글자 크기를 지정
(값 : 숫자 + 단위 ( px, em(1em = 16px, 2em = 32px) ))
ex) font-size:3px; or font-size:1em;
color 속성
- 글자의 색상을 지정
(값: #RRGGBB, rgb(0~255,0~255,0~255),rgba(0~255,0~255,0~255,Apha(투명도:0~1)))
>> 투명코드 쓰지 않으면 헥사코드, 투명도는 rgba 사용
ex) color:#FFFFFF; or color:rgb(255,255,255); or rgba(255,0,255,0.5);
font-weight 속성
- 글자의 두께 지정
(값 : normal / 숫자 / bold)
ex) font-weight:normal; or font-weight:3px; or font-weight:bold;
font-style 속성
- 글자의 기울기를 지정 (값 : normal / italic )
ex) font-style:normal; or font-style:italic;
text-align 속성
- 텍스트의 수평 정렬 지정
(값 : left (왼쪽 정렬:기본값) / center (중앙정렬) / right (오른쪽 정렬) / justify (양쪽 정렬)
text-decoration 속성
- 글자에 선을 넣거나 제거를 지정
(값 : none (선X) / underline (밑줄) / overline (윗줄) / line-through (가운데줄)
line-height 속성
- 행간 (텍스트 위/아래 여백)을 지정
letter-spacing 속성
- 자간 (글자사이 여백) 을 지정
- 양수 (여백 크게), 음수 (여백 작게)
박스 영역 밖으로 벗어난 텍스트를 표현하는 속성 3가지
- white-space : nowrap; 텍스트 줄바꿈 제거
- overflow : hidden; 박스 영역 밖으로 벗어난 컨텐츠를 안보이게 지정
- text-overflow : elipsis; 박스 영역 밖으로 벗어난 텍스트를 ... 으로 표현
1. 박스 영역 밖으로 벗어난 텍스트 표현
<!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>
/*reset.css - */
*{margin:0; padding:0; box-sizing:border-box;}
.fontProperty {width:300px; margin:50px auto;}
h5 {font-size:24px; color:#000; font-weight: bold;}
.fontProperty > p {
font-size:15px; color:#333;
letter-spacing: 2px;
}
.space {
width:200px; margin:100px auto;
white-space: nowrap; /*텍스트 줄바꿈 제거*/
overflow : hidden; /*박스 영역 밖으로 벗어난 컨텐츠를 안보이게 지정*/
text-overflow:ellipsis; /*박스 영역 밖으로 벗어난 텍스트를 ... 으로 표현한다.*/
background:indianred;
}
</style>
</head>
<body>
<div class="fontProperty">
<h5>더미 타이틀</h5>
<p>가슴에 석가는 열락의 청춘의 충분히 피가 것이다. 속잎나고, 못할 무한한 대고, 두손을 천자만홍이 봄바람이다. 위하여서 하는 이상 그들의 두기 위하여, 청춘의 듣는다. 것은 바이며, 그들은 불어 아니다. 웅대한 평화스러운 무엇을 그것은 반짝이는 보라. 힘차게 되려니와, 뜨거운지라, 이는 이것이다. 눈에 이상의 귀는 앞이 따뜻한 꾸며 것이다. 보는 안고, 아니한 황금시대를 동산에는 피부가 바이며, 인생에 앞이 부패뿐이다. 실현에 남는 동력은 못할 그러므로 목숨을 동산에는 위하여 운다. 기쁘며, 이 황금시대를 같지 용감하고 능히 아름다우냐?</p>
</div>
<p class="space">가슴에 석가는 열락의 청춘의 충분히 피가 것이다. 속잎나고, 못할 무한한 대고, 두손을 천자만홍이 봄바람이다.</p>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS] 위치 속성 예제 1 (0) | 2022.09.29 |
|---|---|
| [HTML+CSS3] 위치 속성 (0) | 2022.09.29 |
| [HTML] 헷갈리는 태그 정리 (0) | 2022.09.27 |
| [HTML+CSS3] 박스속성 (2) (0) | 2022.09.27 |
| [HTML+CSS3] 박스속성 (0) | 2022.09.27 |