2. 문자

문자관련스타일

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>

“`html

CSS 단위 비교

부모 요소 (font-size 20px, 400×300)

<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>

“`

Info: 👁️‍🗨️ 글꼴지정속성

font-family: "Times New Roman",sans-serif;

sans-serif=> 앞에 정의한 글꼴이 없으면 시스템 기본 글꼴 중 고딕체 아무거나
여러 단어 이거나 한글 글꼴 인 경우 따옴표로 감쌈
여러개의 글꼴은 쉼표로 구분
"Times New Roman" , arial, ”돋움” ⇒ 지정된 글꼴이 없을경우 다음 글꼴로 지정됨

1.00

“`html

font-family, font-size, font-weight

Well done is better than well said.

font-style, font-variant, color

Seeing much, suffering much, and studying much, are the three pillars of learning.

font

Education is a progressive discovery of our own ignorance.

“`

“`html

font-family

한글 font-family, font-size, font-weight

Well done is better than well said.

한글font-style, font-variant, color

Seeing much, suffering much, and studying much, are the three pillars of
learning.

font

Education is a progressive discovery of our own ignorance.

“`

02. font-face, font-size

121p

Info: 👁️‍🗨️ font-size 글씨크기

1.00

“`html
오늘의 진료는 본관에서 실시합니다.

내과
이비인후과
정형외과
피부과

</Accordion>

<Accordion title="💌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

Info: 👁️‍🗨️ font-weight : 글씨 두께

font-style : 기울기
font-variant : 대소문자
line-height : 행간

1.00

“`html
일회용 mask의 기본적인 기능으로는
김서림 방지 기능,
편안한 ear band 등이 있다.

일회용 mask의 특수한 기능으로는
입술이 닿지 않는 접이식 구조,
외부 유해물질로 부터의 효과적인 보호(MB가공) 등이 있다.

</Accordion>

<Accordion title="💌 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 참조블로그

1.00

04. font

128p

Info: 👁️‍🗨️ 축약속성

font: [ font-weight, font-style, font-variant ] [ font-size/line-heignt ] [ font-family ]

1.00

“`html
기회의 땅
땡볕을 지고 가까스로 도착한 곳엔 도무지 기회라곤 찾아볼 수 없었던 것이다.

고국 생각이 간절했다
배도 고팠다.

</Accordion>

<Accordion title="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. 웹폰트

Info: 👁️‍🗨️ 한글

구글

1.00

“`html
오늘의 날씨를 말씀드리겠습니다.

오늘의 날씨를 말씀드리겠습니다.

</Accordion>

<Accordion title="💌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

👸폰트페이스

예제파일
폰트 파일 확장자별 특징

1.00

문법 🔗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

Info: 👁️‍🗨️ 다양한 색상표현들

표기법	설명	속성값 작성예시	불투명도추가
관용색명	색상명사	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~~360, 0~~100, 1~100	hsl(0,100%,100%)	hsla(0,100%,100%,0.8)

1.00

“`html

시험 일정은 다음과 같습니다.

필기시험 : 5월 10일~15일

필기 합격 발표 : 5월 30일

실기시험 : 6월 12일~17일

실기 합격 발표 : 7월 20일

행운을 빕니다.

“`

“`html

color

시험 일정은 다음과 같습니다.

필기시험 : 5월 10일~15일

필기 합격 발표 : 5월 30일

실기시험 : 6월 12일~17일

실기 합격 발표 : 7월 20일

행운을 빕니다.

“`

08. letter-spacing, word-spacing

포토샵의 자간 : 문자 크기에 상대적인 측정 단위인 1/1000em
포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치

Info: 👁️‍🗨️ letter-spacing : 글자간의 간격

word-spacing : 단어간의 간격

1.00

“`html

1990년형 노트북은 안녕!
잘가세요. 고생하셨소~

“`

“`html

자간과 단어간격

1990년형 노트북은 안녕!
잘가세요. 고생하셨소~

“`

09. text-decoration, text-transform

Info: 👁️‍🗨️ text-decoration ⇒밑줄속성

underline
overline
line-through
none
text-transform⇒ 대소문자
uppercase
lowercase
capitalize

1.00

“`html

happy birth day!

“`

“`html

text-decoration, text-transform

happy birth day!

“`

10. text-shadow

Info: 👁️‍🗨️ 글자의 그림자 지정

🔗MDN

작성예시
- 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;

1.00

“`html

SHADOW EFFECT

TEXT SHADOW

Internet Explorer 9 and earlier
do not support the text-shadow property

“`

“`html

Document

SHADOW EFFECT

TEXT SHADOW

Internet Explorer 9 and earlier do not support the text-shadow property

“`

형성퀴즈1

Info: 📢 주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오

완성화면

1.00

리소스파일

최신 웹 디자인 트렌드
반응형 웹 디자인 - 다양한 화면 크기에 최적화하다
플랫 디자인 - 입체에서 평면으로
풀스크린 배경 - 콘텐츠에 집중
원 페이지 사이트 - 한 페이지에 모든 내용을 담다
패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!
웹 폰트 - 웹 타이포그래피를 받쳐주는 기술

형성퀴즈2

Info: 📢 주어진 리소스 파일을 이용하여 아래와 같은 화면을 구현하시오

완성화면

1.00

리소스파일

1.00

확인하세요
주문 및 배송
오후 2시 이전 주문건은 당일 발송합니다
2시 이후 주문건은 다음날 발송합니다(주말 제외)

교환 및 환불
불만족시 100% 환불해 드립니다
고객센터로 전화주세요

고객센터
0000-0000
상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)

문자관련스타일

01. font

단위

👁‍🗨 상대단위들

font-family, font-size, font-weight

font-style, font-variant, color

font

한글 font-family, font-size, font-weight

한글font-style, font-variant, color

font

02. font-face, font-size

03. font-weight, font-style, font-variant, line-height

👁‍🗨 포토샵과 css의 line-height 차이

04. font

05. 웹폰트

👸폰트페이스

06. 쌤한테 파비콘만들자고하기

07. color

08. letter-spacing, word-spacing

09. text-decoration, text-transform

10. text-shadow

SHADOW EFFECT

TEXT SHADOW

SHADOW EFFECT

TEXT SHADOW

형성퀴즈1

완성화면

리소스파일

형성퀴즈2

완성화면

리소스파일

댓글 남기기 응답 취소