문자

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡 리소스파일

문자관련스타일

01. font

단위

👁‍🗨 상대단위들

단위	기준
em	부모 요소 기준	단위환산사이트
rem	:root(html) 기준 (루트→최상위)
vh	브라우저 화면 높이기준 (viewportHeight→vh)	(폰트크기 x 브라우저높이) / 100
vw	브라우저 화면 너비기준(viewportWidth→vw)	(폰트크기 x 브라우저너비) / 100
%	부모요소 기준

121p

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

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

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

ex2-18.html

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

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

💌ex2-18.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 : 행간

ex2-20

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

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

💌 ex2-20

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

Info: 👁️‍🗨️ 축약속성

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

ex2-21.html

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

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

ex2-21.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: 👁️‍🗨️ 한글

구글

ex2-22.html

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

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

💌ex2-22.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>

👸폰트페이스

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

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

134p

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)

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(현재 폰트크기)과 일치

Info: 👁️‍🗨️ 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

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

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

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;

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

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

완성화면

리소스파일

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

형성퀴즈2

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

완성화면

리소스파일

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

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

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

문자

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡 리소스파일

문자관련스타일

01. font

단위

👁‍🗨 상대단위들

단위	기준
em	부모 요소 기준	단위환산사이트
rem	:root(html) 기준 (루트→최상위)
vh	브라우저 화면 높이기준 (viewportHeight→vh)	(폰트크기 x 브라우저높이) / 100
vw	브라우저 화면 너비기준(viewportWidth→vw)	(폰트크기 x 브라우저너비) / 100
%	부모요소 기준

121p

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

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

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

ex2-18.html

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

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

💌ex2-18.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 : 행간

ex2-20

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

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

💌 ex2-20

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

Info: 👁️‍🗨️ 축약속성

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

ex2-21.html

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

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

ex2-21.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: 👁️‍🗨️ 한글

구글

ex2-22.html

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

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

💌ex2-22.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>

👸폰트페이스

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

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

134p

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)

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(현재 폰트크기)과 일치

Info: 👁️‍🗨️ 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

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

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

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;

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

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

완성화면

리소스파일

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

형성퀴즈2

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

완성화면

리소스파일

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

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

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