반응형
1. 기본 글꼴 사용
09_font_family.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/*
font-family : 글꼴 관련 스타일 속성 - 글꼴 나열 가능 (순차적 적용)
font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우, 클라이언트 플랫폼(OS) 기본 글꼴 사용 - 클라이언트에 따라 다른 글꼴 사용하여 출력
(실행환경을 제공해주는 프로그램 -> 현재..! 운영체제)
ex) "맑은 고딕" : 마이크로소프트사에 있는 저작권, 애플에서 사용 불가능
*/
body {
font-family: "sans-serif", "맑은 고딕";
}
</style>
</head>
<body>
<h1>글꼴 관련 스타일 속성</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
<p>브라우저에 출력될 아주 중요한 내용입니다</p>
</body>
</html>
2. 글꼴파일다운 & 구글폰트이용
1)글꼴파일 다운로드받아 사용하기
- 클라이언트에게 글꼴 파일 제공 후 글꼴 설정하는 것 권장
2) 구글폰트 이용하기
- <link> or @import
- @import 사용하려면 메인페이지에 딱 한번만 import 해주는 것을 권장
10_web_font.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
-->
<style type="text/css">
/* 구글에서 제공하는 웹폰트 : https://fonts.google.com 사이트 참조 */
/* @import : 웹서버에 존재하는 CSS 파일을 현재 웹문서에 포함시키는 시스템 속성 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
/* 웹폰트(WebFont) : 웹서버에 저장된 글꼴파일을 클라이언트에게 제공하여 사용하는 기능 */
/* 글꼴파일 : ttf 파일(OS에서 사용하는 글꼴파일), woff 파일(IE9 이상, 크롬, 사파리 등), eof 파일(IE8 이하, 크롬, 사파리 등) */
/* @font-face : 글꼴파일을 클라이언트에게 제공하기 위한 시스템 속성 */
@font-face {
/* font-family 속성 : 글꼴파일을 구분하기 위한 식별자(글꼴명)를 속성값으로 설정 */
font-family: "NanumGothic";
/* src 속성 : url 함수를 사용하여 글꼴파일의 URL 주소를 속성값으로 설정 */
src: url("/web/css/fonts/NanumGothic.woff");
}
@font-face {
font-family: "NanumBarunGothic";
src: url("/web/css/fonts/NanumBarunGothic.woff");
}
body {
/* font-family: "NanumGothic"; */
/* font-family: "NanumBarunGothic"; */
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<h1>글꼴 관련 스타일 속성</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>
3. 글자 관련 스타일 속성
11_font.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.font1{
/* 💖font-size : 글자 크기에 대한 스타일 속성 - 기본크기 : 16px
/* 속성값(단위) : px(기본), pt, em, % ,키워드(xxsmall.xsmall,small,medium,large,xlarge,xxlarge .. ) */
/* ex) 14px : 색을 표현하는 점을 14개 찍을 수 있음 */
font-size: 14px;
}
.font2{
font-size: 20px;
/* 💖font-style : 글자 기울기에 대한 스타일 속성 - normal(기본) , italic */
font-style: italic;
}
.font3{
/* 글자 크기 관련 키워드는 medium(16px)을 기준으로 1.2배씩 증가 또는 감소 */
font-size: xx-large;
/* 💖font-variant : 알파벳에 대한 스타일 속성- normal(기본) , small-caps(소문자를 작은 크기의 대문자로 변환) */
font-variant: small-caps;
}
>
.font4{
/* em : M 문자의 폭을 기준으로 설정된 글자 크기 단위 - 반응형 웹디자인에서 사용 */
/* => <http://pxtoem.com> 사이트 참조 */
font-size: 1.5em; /* 24px */
/* 💖font-weight : 글자 굵기에 대한 스타일 속성 - 100 ~ 900 (기본:400) , 키워드(normal , bold 등) */
font-weight: bold; /* 700 */
}
>
.font5{
/* 💖font: 모든 글자 관련 스타일 속성값 사용 - 공백을 이용하여 속성값 구분 */
/* => 글꼴(ex."궁서")을 반드시 설정 */
font: italic 700 200% "궁서";
}
</style>
</head>
<body>
<h1>글자 관련 스타일 속성(Font Style Attribute)</h1>
<hr>
<p>글자 관련 스타일 속성</p>
<p class="font1">글자 관련 스타일 속성(Font Style Attribute) - 14px</p>
<p class="font2">글자 관련 스타일 속성(Font Style Attribute) - 20px, italic </p>
<p class="font3">글자 관련 스타일 속성(Font Style Attribute) - xx-large, small-caps</p>
<p class="font4">글자 관련 스타일 속성(Font Style Attribute) - 1.5em , bold </p>
<p class="font5">글자 관련 스타일 속성(Font Style Attribute) - italic, 700, 20px, "궁서"</p>
</body>
</html>
4. 글자 간격 관련 스타일 속성
12_font_gap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.gab{
font-size: 30px;
}
.gab1 {
/* 💖letter-spacing: 문자 간격을 설정하기 위한 스타일 속성 - 단위 px, em, % 등 */
letter-spacing: 0.1em; /*1px*/
}
.gab2 {
/* 💖word-spacing: 단어 간격을 설정하기 위한 스타일 속성 - 단위 px, em, % 등 */
word-spacing: 0.5em; /*8px*/
}
.gab3 {
/* 💖line-height: 줄간격을 설정하기 위한 스타일 속성 - 단위 px, em, % 등 */
line-height: 50px;
}
.gab4{
/* 💖font 스타일 속성에서 [글자크기/줄간격] 속성값 사용 가능 */
font: 30px/60px "궁서";
}
</style>
</head>
<body>
<h1>글자 간격 관련 스타일 속성</h1>
<hr>
<p class="gab">Java Programming</p>
<p class="gab gab1">Java Programming : letter-spacing</p>
<p class="gab gab2">Java Programming : word-spacing</p>
<hr>
<h2>HTML5<br>CSS3</h2>
<h2 class="gab3">HTML5<br>CSS3 : line-height</h2>
<h2 class="gab4">HTML5<br>CSS3 : font의 글자크기/줄간격 </h2>
</body>
</html>
5. 공백(Space) 관련 스타일 속성
13_space.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div{
margin: 5px;
/* 태그 내용이 박스모델의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력 */
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>공백(Space) 관련 스타일 속성</h1>
<hr>
<!-- HTML에서 다수의 공백은 하나의 공백으로 처리되어 출력 -->
<div class="space1">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space2">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space3">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space4">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div{
margin: 5px;
/* 태그 내용이 박스모델의 폭보다 큰 경우 자동 줄바꿈 처리되어 출력 */
width: 200px;
border: 1px solid red;
}
/* 💖white-space: 공백 처리에 대한 스타일 속성 */
/* => 박스모델의 폭보다 큰 태그내용 처리에 대한 스타일 속성 제공 */
/* 속성값 : 💖normal(기본: pre-line), 💖pre, 💖nowrap, 💖pre-wrap */
/* 💖pre-line 속성값 : 다수의 공백을 하나의 공백으로 처리하여 출력하고,
박스모델보다 큰 태그내용은 자동 줄바꿈 처리하여 출력 */
.space1{ white-space: pre-line; }
/* 💖pre 속성값 : 다수의 공백을 다수의 공백으로 처리하여 출력하고,
박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 처리하여 출력 =>
태그내용이 박스모델의 폭을 벗어난 상태로 출력 처리 */
.space2{ white-space: pre; }
/* 💖nowrap 속성값 : 다수의 공백을 하나의 공백으로 처리하여 출력하고,
박스모델보다 큰 태그내용은 자동 줄바꿈 없이 그대로 처리하여 출력 =>
태그내용이 박스모델의 폭을 벗어난 상태로 출력 처리 */
.space3{ white-space: nowrap; }
/* 💖pre-wrap 속성값 : 다수의 공백을 다수의 공백으로 처리하여 출력하고,
박스모델보다 큰 태그내용은 자동 줄바꿈 처리하여 출력 */
.space4{ white-space: pre-wrap; }
</style>
</head>
<body>
<h1>공백(Space) 관련 스타일 속성</h1>
<hr>
<!-- HTML에서 다수의 공백은 하나의 공백으로 처리되어 출력 -->
<div class="space1">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space2">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space3">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
<div class="space4">웹표준(HTML5+CSS3+jQuery)을 이용한 웹사이트 만들기</div>
</body>
</html>
반응형
'web > css' 카테고리의 다른 글
| [css] 6. 박스모델 관련 스타일 속성 (0) | 2024.05.02 |
|---|---|
| [css] 5. 배경 관련 스타일 속성 (0) | 2024.05.02 |
| [css] 4. 문장(텍스트) | 목록 | 글자색 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 2. 선택자(selector) (1) | 2024.04.30 |
| [css] 1. CSS개념 (0) | 2024.04.30 |
