font.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-01_font</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+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<h1>text font 속성</h1>
<style type="text/css">
/*
font-size
- 글자 크기 지정
*/
.size { font-size: 30px; }
.default { font-size: 16px; }
</style>
<p class="size">글자 크기 30</p>
<p class="basic">기본 글자 크기</p>
<p class="default">글자 크기 16</p>
<hr/>
<style type="text/css">
/*
font-family
- 폰트를 지정하고, 컴퓨터에 해당 폰트가 없으면 적용되지 않습니다
- 폰트는 여러개 지정이 가능하고, 첫번째 폰트가 없으면 다음에 지정된 폰트가 적용됩니다
마지막 폰트는 OS 에 기본 설치되는 generic-family 폰트( serif, sans-serif, monospace)를
지정하는게 일반적 입니다
- 사용하는 폰트 이름에 공백 또는 특수문자 등이 있으면 큰따옴표로 감싸야 합니다
- 구글 웹폰트
https://fonts.google.com
*/
.dotum { font-family: "dotum"; }
.serif { font-family: "serif"; }
.google { font-family: "Noto Sans KR"; }
</style>
<p class="dotum">돋음 글꼴</p>
<p class="serif">serif 글꼴</p>
<p class="google">Google 웹폰트 글꼴</p>
<hr/>
<style type="text/css">
/*
font-weight
- 글자 굵기 지정 : normal, bold, lighter
*/
.bold { font-weight: bold; }
.normal { font-weight: normal; }
.lighter { font-weight: lighter; }
</style>
<p class="bold">글자 굵기 bold</p>
<p class="normal">글자 굵기 normal</p>
<p class="lighter">글자 굵기 lighter</p>
<hr/>
<style type="text/css">
/*
font-style
- 글자 기울기 : normal, italic
*/
.italic { font-style: italic; }
.normal { font-style: normal; }
</style>
<p class="italic">italic</p>
<p class="normal">normal</p>
<hr/>
<style type="text/css">
/*
font-variant
- 소문자를 대문자로 변환 : small-caps
*/
.variant { font-variant: small-caps; }
</style>
<p class="variant">HOME, home</p>
<hr/>
<style type="text/css">
/*
line-height
- 텍스트의 줄간격을 지정. 기본 line-height 는 약 120%
*/
.line-300 { line-height: 300%; }
.line-100 { line-height: 100%; }
</style>
<p class="">글자 줄간격 : 기본<br/>글자 줄간격 : 기본</p>
<p class="line-300">글자 줄간격 : 300%<br/>글자 줄간격 : 300%</p>
<p class="line-100">글자 줄간격 : 100%<br/>글자 줄간격 : 100%</p>
<hr/>
<style type="text/css">
/*
font 속성 여러개 사용
- font : font-style | font-variant | font-weight | font-size/line-height | font-family
> font 속성에는 font-size, font-family 속성이 반드시 들어가야 합니다
*/
.font-a { font: italic small-caps bold 30px/150% "monospace"; }
.font-b { font: 40px "Noto Sans KR", "serif"; }
</style>
<p class="font-a">font 속성 한번에 여러개 설정</p>
<p class="font-b">font 속성 한번에 여러개 설정</p>
<hr/>
<style type="text/css">
/*
text-indent
- 들여쓰기. 한 문단에서 첫번째 줄에만 적용됩니다
*/
.indent { text-indent: 30px; }
</style>
<p class="indent">
들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기<br/>
들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기<br/>
들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기들여쓰기
</p>
<hr/>
<style type="text/css">
/*
text-align
- 텍스트 정렬. ( center, right, left, justify )
*/
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<p class="center"> center </p>
<p class="left">left</p>
<p class="right">right</p>
<p class="justify">justify justify justify justify justify justify justify justify justify justify </p>
<hr/>
<style type="text/css">
/*
text-decoration
- 링크의 라인을 제거하거나, text 에 라인을 적용합니다
> none : 라인제거
overline : 윗줄
line-through : 중간줄
underline : 밑줄
*/
.none { text-decoration: none;}
.overline { text-decoration: overline;}
.line-through { text-decoration: line-through; }
.underline { text-decoration: underline;}
</style>
<p><a href="#"> link </a></p>
<p><a href="#" class="none"> none </a></p>
<p class="overline">overline</p>
<p class="line-through">line-through</p>
<p class="underline">underline</p>
<hr/>
<style type="text/css">
/*
letter-spacing
- 글자 사이의 간격 지정
*/
.letter { letter-spacing: 30px; }
</style>
<p class="">기본 기본 기본</p>
<p class="letter">글자 사이 간격</p>
<hr/>
<style type="text/css">
/*
word-spacing
- 단어 사이의 간격 지정
*/
.word { word-spacing: 30px; }
</style>
<p class="">기본 기본 기본</p>
<p class="word">단어 사이 간격</p>
<hr/>
</body>
</html>
Quiz
STYLE CSS
font-size:30px;
font-family: "돋움", "sans-serif";
color: red;
}
/* .txt2 굵게, 글자크기25px, 줄간격1.2 , 굴림, lime색 (font:속성이용해서),들어쓰기50px */
.txt_2 {
font: bold 25px/1.2 "굴림", "sans-serif";
color: lime;
text-indent: 50px;
}
/* .txt3 굵게, 글자크기20px, 줄간격1.2,Gulim굴림,blue,들여쓰기50px */
.txt_3 {
font-weight: bold;
font-size: 20px;
line-height: 1.2;
font-family: "굴림", "sans-serif";
color: blue;
text-indent: 50px;
}
/* .txt3_1 글자크기30px, HY견고딕,취소선,olive색 */
.txt_3-1 {
font-size: 30px;
font-family: "HY견고딕", "sans-serif";
text-decoration: line-through;
color: olive;
}
/* .txt4 글씨색red(색상코드),가운데정렬 */
.txt_4 {
color: red;
text-align: center;
}
/* .txt5 글씨크기20px, 궁서 (font: 속성 이용해서) */
.txt_5 {
font: 20px "궁서", "sans-serif";
}
/* .txt6 글씨크기25px, red */
.txt_6 {
font-size: 25px;
color: red;
}
/* .txt7 기울임, 글씨크기20px, 바탕체,굵게,줄간격1.2 */
.txt_7 {
font-style: italic;
font-size: 20px;
font-family: "바탕체", "sans-serif";
font-weight: bold;
line-height: 1.2;
}
/* .txt8 글씨크기20px, 돋움, 밑줄, lime색 */
.txt_8 {
font-size: 20px;
font-family: "돋움", "sans-serif";
text-decoration: underline;
color: lime;
}
/* .txt9 글씨크기20px, HY견고딕, 밑줄, #f0f 색상 */
.txt_9 {
font-size: 20px;
font-family: "HY견고딕", "sans-serif";
text-decoration: underline;
color: #FF00FF;
}
/* .txt10 굵게, 기울임,작은대문자,red,글자크기15px,줄간격1.5, 돋움, 밑줄,오른쪽정렬 */
.txt_10 {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
color: red;
font-size: 15px;
line-height: 1.5;
font-family: "돋움", "sans-serif";
text-decoration: underline;
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-02_quiz-font</title>
<link rel="stylesheet" type="text/css" href="02-02_quiz-font.css"/>
</head>
<body>
<h1>Quiz</h1>
<br/>
<p class="txt_1">1.도와주고 도움도 받고...</p>
<p class="txt_2">
2."네가 곤란하면 나는 언제든지 너를 도와줄 수 있다.<br/>
하지만 내가 곤란할 때 나는 절대로 네 앞에 나타나지 않을 것이다."
</p>
<p class="txt_3">
3.이런 자세가 옳다. 서로에게 그렇게 생각할 때 비로소 우정이 성립한다.
<span class="txt_3-1">3-1.'옛날에 나는 너를 도와주었는데 너는 지금 왜 날 도와주지 않는 거야'</span>
하고 생각한다면, 그런 건 처음부터 우정이 아니다.
</p>
<p class="txt_4">4.- 기타노 다케시의<기타노 다케시의 생각노트> 중에서 -</p>
<p class="txt_5">5.* 남을 도와준 것은 잊어버리고 사는 것이 좋습니다.</p>
<p class="txt_6">6.반면에 남에게 도움 받은 것은 오래 기억하고,</p>
<p class="txt_7">7.언제인가 꼭 보답하리라 다짐하며 사는 것이 좋습니다.</p>
<p class="txt_8">8.도와도 주고 도움도 받고 사는 것이 인생입니다.</p>
<p class="txt_9">
9.그렇게 서로 주거니 받거니 하면서<br/>
쌓아가는 것이 우정입니다.
</p>
<p class="txt_10">10.-고도원의 아침편지중에서 news-</p>
</body>
</html>
코딩 일기장