1. 학습내용
오늘은 CSS 스타일에서 font에 관련된 내용들과, 여러가지 방법으로 웹페이지에 적용시키는 것을 배웠다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
/*1. font - family 속성으로 지정*/
/*body {font-family: '궁서체 보통' , 돋움, serif;}*/
/*2. web font 지정
*.ttf: 용량이 큼
*.eot: format 안적음
*.woff : format('woff2')
*.woff2 : format('woff2')
구글 웹 폰트: https://fonts.google.com/
네이버 웹 폰트 : https://hangeul.naver.com/font
눈누 : https://noonnu.cc/
*/
.gfont{font-family: 'Nanum Brush Script', cursive;}
/*3. @font-face: 다운로드 한 글꼴*/
@font-face {
font-family: Single Day;
src: url(./font/SingleDay-Regular.ttf) format('truetype');
src: url('SingleDay-Regular.woff2') format('woff2'),
url('SingleDay-Regular.woff') format('woff');
}
.ffont{font-family: 'Single Day', cursive;}
/*4. 웹 안전 글꼴
영어: https://www.w3schools.com/css/css_font_websafe.asp
한글 웹 안전글꼴
-가변폭: 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
-고정폭: 굴림체(Gulimche), 돋움체(Dotumche), 바탕체(BatangChe), 궁서체
*/
</style>
</head>
<body>
<h3 class="gfont">font 속성 정하기</h3>
<p class="nfont">1. font-family 속성으로 지정</p>
<p class="ffont">@font-face:다운로드 한 글꼴</p>
</body>글정렬에 대한 것도 배웠다
<!--
normal: 여러 개 공백을 하나로 표시.
nowrap : 여러개 공백을 하나로 표시, 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre: 여러 개 공백을 그래도 표시. 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre-line: 여러 개 공백을 하나로 표시, 영역 너비를 넘어가는 내용은 자동 줄 바꿈
pre-wrep: 여러 개 공백을 그대로 표시. 영역 너비를 넘어가는 내용은 자동 줄 바꿈
-->
<style>
div{width: 400px; height: 200px;background-color: aliceblue;}
.a{white-space: nowrap;}
.b{white-space: normal;}
.c{white-space: pre;}
.d{white-space: pre-line;}
.e{white-space: pre-wrap;}
</style>
</head>
<body>
<p class="a">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
<p class="b">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
<p class="c">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
<p class="d">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
<p class="e">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</p>
<h2 style="letter-spacing: 0.2em;">This is some text.</h2>
<h2 style="letter-spacing: 0.5em;">This is some text.</h2>
<h2 style="letter-spacing: 30px;">This is some text.</h2>
<h2 style="letter-spacing: 1cm;">This is some text.</h2>
</body>2. 어려웠던 점 및 해결방안
white-space에 관한것을 처음 배워 다시 정리해보기로 했다.
white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성이다.
굳이 br태그를 쓰지 않아도 태그 안에 쓴 글정렬 그대로 보여주는 방식도 있다.
3. 학습 소감
font에 관해 전반적으로 스타일을 알수 있었다.
친숙한 개발자가 되고픈 사람