문자관련스타일
01. font
단위
👁🗨 상대단위들
| 단위 | 기준 | |
|---|---|---|
| em | 부모 요소 기준 | 단위환산사이트 |
| rem | :root(html) 기준 (루트→최상위) | |
| vh | 브라우저 화면 높이기준 (viewportHeight→vh) | (폰트크기 x 브라우저높이) / 100 |
| vw | 브라우저 화면 너비기준(viewportWidth→vw) | (폰트크기 x 브라우저너비) / 100 |
| % | 부모요소 기준 |
<div class="parent">
부모 요소 (font-size 20px, 400x300)
<p class="em">em: 부모 폰트(20px) × 2 = 40px</p>
<p class="rem">rem: 루트 폰트(16px) × 2 = 32px</p>
<div class="vh">vh: 화면 높이의 20%</div>
<div class="vw">vw: 화면 너비의 50%</div>
<div class="percent">%: 부모(400x300)의 50%</div>
</div>
ex2-17.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 단위 비교</title>
<style>
:root {
font-size: 16px;
}
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}
.parent {
font-size: 20px;
width: 400px;
height: 300px;
background: #eee;
padding: 10px;
border: 2px solid #333;
}
.em {
font-size: 2em;
background: #ffd;
}
.rem {
font-size: 2rem;
background: #dfd;
}
.vh {
height: 20vh;
background: #ddf;
}
.vw {
width: 50vw;
background: #fdd;
}
.percent {
width: 50%;
height: 50%;
background: #dff;
}
</style>
</head>
<body>
<div class="parent">
부모 요소 (font-size 20px, 400x300)
<p class="em">em: 부모 폰트(20px) × 2 = 40px</p>
<p class="rem">rem: 루트 폰트(16px) × 2 = 32px</p>
<div class="vh">vh: 화면 높이의 20%</div>
<div class="vw">vw: 화면 너비의 50%</div>
<div class="percent">%: 부모(400x300)의 50%</div>
</div>
</body>
</html>
👁️🗨️ 글꼴지정속성
font-family: "Times New Roman",sans-serif;
-
sans-serif=> 앞에 정의한 글꼴이 없으면 시스템 기본 글꼴 중 고딕체 아무거나
-
여러 단어 이거나 한글 글꼴 인 경우 따옴표로 감쌈
-
여러개의 글꼴은 쉼표로 구분
-
"Times New Roman" , arial, ”돋움” ⇒ 지정된 글꼴이 없을경우 다음 글꼴로 지정됨
ex2-17.html
<div id="box1">
<h2>font-family, font-size, font-weight</h2>
<p>Well done is better than well said.</p>
</div>
<div id="box2">
<h2>font-style, font-variant, color</h2>
<p>Seeing much, suffering much, and studying much, are the three pillars of learning. </p>
</div>
<div id="box3">
<h2>font</h2>
<p>Education is a progressive discovery of our own ignorance. </p>
</div>
💌
<!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>font-family</title>
<style>
#box1 h2 {
/* 앞에 정의한 글꼴이 없으면 시스템 기본 글꼴 중 고딕체, 명조체 아무거나 */
font-family: "Times New Roman", serif;
font-size:2em;
font-weight: normal;
}
#box1 p{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size:20px;
font-weight: bold;
}
#box2 h2{
font-style: italic;
color:red;
}
#box2 p{
font-variant: small-caps;
color:#336633;
}
#box3 h2{
font:3em Arial;
}
#box3 p{
font:small-caps 30px "Times New Roman";
}
</style>
</head>
<body>
<div id="box1">
<h2>한글 font-family, font-size, font-weight</h2>
<p>Well done is better than well said.</p>
</div>
<div id="box2">
<h2>한글font-style, font-variant, color</h2>
<p>
Seeing much, suffering much, and studying much, are the three pillars of
learning.
</p>
</div>
<div id="box3">
<h2>font</h2>
<p>Education is a progressive discovery of our own ignorance.</p>
</div>
</body>
</html>
02. font-face, font-size
121p
👁️🗨️ font-size 글씨크기
ex2-18.html
오늘의 진료는 본관에서 실시합니다.
내과
이비인후과
정형외과
피부과
💌ex2-18.html
html
<!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>
html{font-size: 24px;}
ul{font-size: 12px;}
li{font-size: 1.5em;}
/* rootem */
li:nth-child(4){font-size: 1.5rem;}
</style>
</head>
<body>
<p>오늘의 진료는 본관에서 실시합니다.</p>
<ul>
<li>내과</li>
<li>이비인후과</li>
<li>정형외과</li>
<li>피부과</li>
</ul>
</body>
</html>
03. font-weight, font-style, font-variant, line-height
126p
👁️🗨️ font-weight : 글씨 두께
font-style : 기울기
font-variant : 대소문자
line-height : 행간
ex2-20
일회용 mask의 기본적인 기능으로는
김서림 방지 기능,
편안한 ear band 등이 있다.
일회용 mask의 특수한 기능으로는
입술이 닿지 않는 접이식 구조,
외부 유해물질로 부터의 효과적인 보호(MB가공) 등이 있다.
💌 ex2-20
javascript
<!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>Document</title>
<style>
p{
font-size: 18px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
line-height: 1.5;
line-height: 1;
line-height: 150%;
width:200px;
}
</style>
</head>
<body>
<p>
일회용 mask의 기본적인 기능으로는 김서림 방지 기능, 편안한 ear band 등이
있다.
</p>
<p class="font2">
일회용 mask의 특수한 기능으로는 입술이 닿지 않는 접이식 구조, 외부
유해물질로 부터의 효과적인 보호(MB가공) 등이 있다.
</p>
</body>
</html>
ex2-20-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>Document</title>
<style>
p{
font-size: 5vw;
}
</style>
</head>
<body>
<p>웹브라우저 높이기준: vw</p>
<p>(폰트크기x브라우저높이)/100</p>
<p>(5*900)/100 =45px</p>
</body>
</html>
👁🗨 포토샵과 css의 line-height 차이
https://slowalk.com/2194 참조블로그
04. font
128p
👁️🗨️ 축약속성
font: [ font-weight, font-style, font-variant ] [ font-size/line-heignt ] [ font-family ]
ex2-21.html
기회의 땅
땡볕을 지고 가까스로 도착한 곳엔 도무지 기회라곤 찾아볼 수 없었던 것이다.
고국 생각이 간절했다
배도 고팠다.
ex2-21.html
html
<!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>font</title>
<style>
body {
font: 20px/1.6 "궁서", Gungseo;
}
h3{
font-size:23px;
}
p{
color:brown;
}
.ps{
font: bold 13px/1.3 "맑은 고딕","Malgun Gothic", Helvetica;
color:black;
}
</style>
</head>
<body>
<h3>기회의 땅</h3>
<p>
땡볕을 지고 가까스로 도착한 곳엔 도무지 기회라곤 찾아볼 수 없었던 것이다.
</p>
<p class="ps">
고국 생각이 간절했다. <br />
배도 고팠다.
</p>
</body>
</html>
05. 웹폰트
👁️🗨️ 한글
ex2-22.html
오늘의 날씨를 말씀드리겠습니다.
오늘의 날씨를 말씀드리겠습니다.
💌ex2-22.html
html
<!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>Document</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=Montserrat:wght@500;600&family=Splash&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<style>
@font-face {
font-family: "PyeongChangPeace-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2")
format("woff2");
font-weight: 700;
font-style: normal;
}
p:nth-child(1) {
font-family: "PyeongChangPeace-Bold";
}
.en1 {
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
.en2 {
font-family: "Splash", cursive;
}
.material-symbols-outlined:hover{
color:red;
}
</style>
</head>
<body>
<span class="material-symbols-outlined">
search
</span>
<p>오늘의 날씨를 말씀드리겠습니다.</p>
<p>오늘의 날씨를 말씀드리겠습니다.</p>
<p class="en1">Lorem Ipsum</p>
<p class="en2">simply dummy</p>
<p class="en3">printing and types</p>
</body>
</html>
↑ 교재 208p
👸폰트페이스
-
예제파일
-
폰트 파일 확장자별 특징
- 문법 🔗MDN
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}
- 선언순서 : 파일의 크기 순으로 추천
.eot, .woff, ttf, .svg
06. 쌤한테 파비콘만들자고하기
07. color
👁️🗨️ 다양한 색상표현들
| 표기법 | 설명 | 속성값 작성예시 | 불투명도추가 |
|---|---|---|---|
| 관용색명 | 색상명사 | red, pink … | |
| hex | rgb 색상의 16진수 표기법 | #ffffff, #000000 … | #ff00009c |
| rgb | red,green,blue 채널의 10진수 표기 | ||
| 0~255 | rgb(255,255,255) | rgba(255,255,255,0.8) | |
| hsl | hue, saturation, lightness 값 | ||
| 0 |
hsl(0,100%,100%) | hsla(0,100%,100%,0.8) |
ex2-24.html
<p class="color1">시험 일정은 다음과 같습니다.</p>
<p class="color2">필기시험 : 5월 10일~15일</p>
<p class="color3">필기 합격 발표 : 5월 30일</p>
<p class="color4">실기시험 : 6월 12일~17일</p>
<p class="color5">실기 합격 발표 : 7월 20일</p>
<p class="color6">행운을 빕니다.</p>
💌ex2-24.html
<!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>color</title>
<style>
body{background: url(img/bg_grid2.gif);}
p{padding:5px;}
.color1{background:magenta;}
.color2{background:#9999ff;}
.color3{background:rgb(163, 229, 77);}
.color4{background:hsl(180,50%,50%);}
.color5{background:rgba(180,255,255,0.5);}
.color6{background:hsla(180,50%,50%,.8);}
.color7{background:#9999ffca;}
</style>
</head>
<body>
<p class="color1">시험 일정은 다음과 같습니다.</p>
<p class="color2">필기시험 : 5월 10일~15일</p>
<p class="color3">필기 합격 발표 : 5월 30일</p>
<p class="color4">실기시험 : 6월 12일~17일</p>
<p class="color5">실기 합격 발표 : 7월 20일</p>
<p class="color6">행운을 빕니다.</p>
<p class="color6">행운을 빕니다.</p>
<p class="color7">행운을 빕니다.</p>
</body>
</html>
08. letter-spacing, word-spacing
포토샵의 자간 : 문자 크기에 상대적인 측정 단위인 1/1000em
포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치
👁️🗨️ letter-spacing : 글자간의 간격
word-spacing : 단어간의 간격
ex2-25.html
<p> 1990년형 노트북은 안녕!<br> 잘가세요. 고생하셨소~ </p>
<p class="letter2">
1990년형 노트북은 안녕!<br> 잘가세요. 고생하셨소~ </p>
<p class="letter3">
1990년형 노트북은 안녕!<br> 잘가세요. 고생하셨소~ </p>
💌ex2-25.html
<!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>
.letter2{
letter-spacing: 5px;
}
.letter3{
word-spacing: 2em;
}
</style>
</head>
<body>
<p>
1990년형 노트북은 안녕!<br />
잘가세요. 고생하셨소~
</p>
<p class="letter2">
1990년형 노트북은 안녕!<br />
잘가세요. 고생하셨소~
</p>
<p class="letter3">
1990년형 노트북은 안녕!<br />
잘가세요. 고생하셨소~
</p>
</body>
</html>
09. text-decoration, text-transform
👁️🗨️ ⇒밑줄속성
-
underline
-
overline
-
line-through
-
none
text-transform⇒ 대소문자 -
uppercase
-
lowercase
-
capitalize
ex2-26.html
<ul>
<li><a href="#">현재상영작</a></li>
<li><a href="#">상영예정작</a></li>
</ul>
<p>happy birth day!</p>
💌ex2-26.html
<!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>text-decoration, text-transform</title>
<style>
a{
text-decoration: none;
color:cornflowerblue;
}
a:hover{
text-decoration: underline;
}
p{
text-decoration: overline;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
color:darkmagenta;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 25px;
font:bold 25px 'Times New Roman';
}
</style>
</head>
<body>
<ul>
<li><a href="#">현재상영작</a></li>
<li><a href="#">상영예정작</a></li>
</ul>
<p>happy birth day!</p>
</body>
</html>
10. text-shadow
👁️🗨️ 글자의 그림자 지정
-
작성예시
text-shadow: 1px 1px 2px pink;
-
속성값 순서 →
x y blur color -
여러개 적용시
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
ex2-27.html
<h2 class="shadow1">SHADOW EFFECT</h2>
<h2 class="shadow2">TEXT SHADOW</h2>
<p>
Internet Explorer 9 and earlier
do not support the text-shadow property
</p>
💌ex2-27.html
<!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>Document</title>
<style>
.shadow1 {
font: 30px "Arial Black";
text-shadow: -4px 4px 4px rgba(100, 100, 0, 0.6);
}
.shadow2 {
font: 30px "Arial Black";
color: #135;
text-shadow: 2px 2px #246, 3px 3px #357, 4px 4px #468, 5px 5px #579, 6px 6px #68a, 7px 7px #79b, 8px 8px #8ac;
}
p{
text-shadow: 2px 3px 5px rgba(0,0,0,.4) ;
}
</style>
</head>
<body>
<h2 class="shadow1">SHADOW EFFECT</h2>
<h2 class="shadow2">TEXT SHADOW</h2>
<p>
Internet Explorer 9 and earlier do not support the text-shadow property
</p>
</body>
</html>
형성퀴즈1
📢 주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오
완성화면
리소스파일
최신 웹 디자인 트렌드
반응형 웹 디자인 - 다양한 화면 크기에 최적화하다
플랫 디자인 - 입체에서 평면으로
풀스크린 배경 - 콘텐츠에 집중
원 페이지 사이트 - 한 페이지에 모든 내용을 담다
패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!
웹 폰트 - 웹 타이포그래피를 받쳐주는 기술
형성퀴즈2
📢 주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오
완성화면
리소스파일
확인하세요
주문 및 배송
오후 2시 이전 주문건은 당일 발송합니다
2시 이후 주문건은 다음날 발송합니다(주말 제외)
교환 및 환불
불만족시 100% 환불해 드립니다
고객센터로 전화주세요
고객센터
0000-0000
상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)