CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
HTML 문서 <head> 요소 안에 <style> 요소를 사용하여 CSS 문법을 적용
선택자 { 속성명:속성값; 속성명:속성값; ... }
p { text-align: center; color: blue; }
--- ----- -----
선택자 속성 속성값
주석문
/* ~ */ 사이에 내용을 입력
CSS를 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<p style='text-align: center; color: blue;'>안녕하세요</p>
2. 내부 스타일
HTML 문서의 <head> ~ </head> 사이에 <style> ~ </style> 요소를 사용하여 적용하는 방법
<head>
<style>
p { text-align: center; color: blue; }
</style>
</head>
3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법
<head>
<link rel='stylesheet' href='css 파일 경로'>
</head>
✔ rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<h2 style="text-align: center; font-size: 50px;">인라인 스타일</h2>
<p style="text-align:center; font-size: 20px; color:deepskyblue">HTML 요소 내부에 style 속성을 사용하여 적용하는 방법</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일</title>
<style>
h2 { font-size: 50px; }
ul { list-style: none; }
li { display: inline-block; margin-right: 50px; font-weight: bold; color: deeppink; }
</style>
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용하여 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 부하를 줄 수 있음
- 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음
* { 속성명1: 속성값; 속성명2: 속성값; .. }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택자</title>
<style>
h2 { color: deeppink; font-size: 50px; }
* { color: deepskyblue; }
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용</li>
<li>* 기호를 사용하여 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 부하를 줄 수 있음</li>
</ol>
</body>
</html>
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 선택자</title>
<style>
h2 { font-size : 50px; }
p { color: deepskyblue; }
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용</p>
<p><span>span 요소</span></p>
<p><strong>strong 요소</strong></p>
<p><ins>ins 요소</ins></p>
</body>
</html>
✔ 상속
부모 요소의 속성값이 자식 요소에게 전달되는 것
<p>
<span>
span 요소
</span>
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상속</title>
<style>
div {
color: deeppink; /* 상속됨 */
border: 3px dotted blue; /* 상속안됨 */
}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 것</p>
</div>
</body>
</html>
3. id 선택자
- 웹문서안의 특정 부분 스타일을 적용
- #기호를 사용하여 id 속성을 가진 요소에 스타일을 적용
[HTML]
<h2 id='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
[CSS]
h2 { font-size: 30px; } /* "안녕하세요", "반갑습니다" 모두 글자 크기를 30px로 적용 */
h2#hello { font-size: 20px; } /* "안녕하세요" 글자 크기를 20px로 적용 */
#hello { color:pink; } /* "안녕하세요" 글자 색상 pink로 적용 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id 선택자</title>
<style>
#container {
background-color: gold;
padding: 20px;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
}
#header {
background-color: deepskyblue;
width: 200px;
height: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html>
4. class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- .기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
[HTML]
<h2 id='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
<p class='hello'>Hello!</p>
<p>또 만났군요</p>
[CSS]
h2 { font-size: 20px; } /* "안녕하세요", "반갑습니다" 글자 크기를 20px 적용
.hello { color: deeppink; } /* "안녕하세요", "hello!" 글자 색상을 deeppink로 적용*/
h2.hello { font-weigth: bold; } /* "안녕하세요" 글자 두께를 두껍게로 적용 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class 선택자</title>
<style>
#bigText { font-size: 50px; }
.smallText { font-size: 14px; }
.redText { color: red; }
.blueText { color: blue; }
</style>
</head>
<body>
<h2 id="bigText">class 선택자</h2>
<p><span class="smallText redText">특정 집단의 요소를 한번에 스타일을 적용</span></p>
<p><span class="smallText blueText">.기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용</span></p>
</body>
</html>
5. 그룹 선택자
- 여러개의 선택자를 나열하여 스타일을 적용
- ,(콤마)로 구분
h2, p { text-align: center; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹 선택자</title>
<style>
* { text-align: center; }
h2 { font-size: 50px; }
h3 { font-size: 30px; }
p, li { font-size: 20px; }
li { display: inline-block; margin-right: 40px; font-weight: bold; color: deeppink;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 선택자를 나열하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</ul>
</body>
</html>
✔ HTML 구조 확인하기
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다!!!</p>
<p>자식/자손 선택자 예제</p>
</body>
</html>
<html>
<head> <body>
<title> <h2> <p> <p>
테스트 HTML의 구조 HTML의 <b> 입니다 자식/자손
구조
6. 자식 선택자
- 부모의 요소 하위의 자식요소의 스타일을 적용
body > p { color: deepskyblue; }
7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p { color: deepskyblue; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 자손 선택자</title>
<style>
ul > a { font-size: 30px; }
ul a { color: deeppink; }
</style>
</head>
<body>
<h2>자식 자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html>
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p { color: deepskyblue; }
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p { color: deeppink; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>형제 선택자</title>
<style>
/*
일반 형제 선택자, 인접 형제 선택자를 활용하여 화면과 같이 CSS를 설계
*/
p + span { color : gold; background-color: deepskyblue}
h3 + p { background-color: deeppink;}
h3 ~ p { color: green; }
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html>
10. 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
[HTML]
<img src='apple.png' alt='사과 이미지'>
<img src='banana.png' alt='바나나 이미지'>
[CSS]
[src] { border: 3px solid red; }
[src= 'banana.png'] { border: 3px solid red; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
[href] { text-decoration: none; color: deeppink;}
[title] { text-align: center; font-size: 50px; }
.attr { background-color: gold; }
[class='attr'] { font-size: 30px; }
</style>
</head>
<body>
<h2 title="h2 요소의 title 속성">속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>
11. 가상 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
[HTML]
<ul>
<li>김사과</li>
<li>반하나</li>
<li>오렌지</li>
<li>이메론</li>
</ul>
[CSS]
ul > li:first-child
ul 자식 중 li 요소 중에서 첫번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(n)
ul 자식 중 li 요소 중에서 n번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(even)
ul 자식 중 li 요소 중에서 짝수번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(odd)
ul 자식 중 li 요소 중에서 홀수번째 해당하는 li 요소의 스타일을 적용
ul > li:last-child
ul 자식 중 li 요소 중에서 마지막에 해당하는 li 요소의 스타일을 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink;}
.list > li:nth-child(2) {color: gold;}
.list > li:nth-child(odd) {background-color: greenyellow;}
.list > li:nth-child(even) { background-color: black;}
.list > li:last-child { color: white; }
</style>
</head>
<body>
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
✔ 스타일링 링크
a:link
하이퍼링크가 연결되었을 때 선택
a:visited
특정 하이퍼링크를 방문한적이 있을 때 선택
a:hover
특정 요소에 마우스를 올렸을 때 선택
a:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일링 링크</title>
<style>
a:link {text-decoration: none; color : greenyellow;}
a:visited { text-decoration: none; color: deepskyblue; }
a:hover {text-decoration: underline; }
a:active {text-decoration: underline; color: red;}
</style>
</head>
<body>
<h2>스타일링 링크</h2>
<p><a href="https://python.org">파이썬 공식 사이트</a></p>
</body>
</html>
문제
'닷홈' 페이지 링크에 스타일링 링크를 자유롭게 적용
(단, 외부스타일을 적용)
http://zmwaexp.dothome.co.kr/
CSS 컬러
1. 색상 이름으로 표현
red, yellow, blue, black, salmon, ...
2. RGB 색상값으로 표현
rgb(0, 0, 225)
rgba(0, 0, 255, 0.5)
3. 16진수 색상값으로 표현
#0000FF
00 00 FF => #00F
R G B
CSS 텍스트
letter-spacing: 텍스트 내에서 글자 사이의 간격을 설정
안녕하세요. 오늘은 월요일!
안 녕 하 세 요 . 오 늘 은 월 요 일 !
word-spacing: 텍스트 내에서 단어 사이의 간격을 설정
안녕하세요. 오늘은 월요일 !
text-align: 텍스트 수평 방향 정렬을 설정(left, right, center, justify)
text-indent: 단락의 첫 줄의 들여쓰기를 설정
line-height: 줄 높이를 설정하는 속성
1. 행간격: 텍스트 행 간의 간격이 넓어짐
2. 텍스트 정렬: 수직 정렬
3. 텍스트 레이아웃: 텍스트 요소의 높이와 너비를 조절
text-decoration: 텍스트에 효과를 설정하거나 제거하는데 사용(none, underline, line-through, overline)
font-variant: 소문자를 작은 대문자로 변경(small-caps)
text-shadow: 텍스트에 그림자 효과를 설정
text-shadow: 가로길이 세로길이 번짐정도 색상;|
white-space: 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line)
text-overflow: 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis)
overflow: 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성(visible, hidden, scroll, auto)
font-family: 텍스트의 글꼴을 설정
글꼴을 선택하는 방법
- 누구나 설치되어 있는 기본 글꼴을 사용
- 이미지로 처리
- 클라이언트에 글꼴을 다운로드 시켜 사용
- 웹 폰트를 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 텍스트1</title>
<style>
.letter { letter-spacing: 5px; color: #3d80eb; }
.word { word-spacing: 7px; color: rgb(222, 27, 173)}
</style>
</head>
<body>
<h2>css 텍스트1</h2>
<p>letter-space</p>
<p class="letter">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non molestiae modi obcaecati dolorem nisi, sint qui repellendus nesciunt vel a laudantium. Nam magni autem aperiam iste! Incidunt inventore est quasi!</p>
<p>word-spacing</p>
<p class="word">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad recusandae architecto reiciendis esse eius sit quidem placeat saepe corporis commodi illo alias, libero aperiam, natus fuga eum autem. Doloremque, nobis.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 텍스트2</title>
<style>
p { border: 3px solid red; padding: 10px; }
#align-left { text-align: left; }
#align-right { text-align: right; }
#align-center { text-align: center; }
#align-justify { text-align: justify; }
#indent1 { text-indent: 20px; }
#indent2 { text-indent: 5%; }
.small-line { line-height: 0.7; }
.big-line { line-height: 3; }
.px-line { line-height: 30px; }
.per-line { line-height: 50px; }
</style>
</head>
<body>
<h2>css 텍스트2</h2>
<p id="align-left" class="small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
<p id="align-right" class="big-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
<p id="align-center" class="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
<p id="align-justify" class="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
<p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
<p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ad nisi voluptatum beatae consectetur maxime laudantium dolorem, laboriosam officia consequuntur aperiam qui amet? Numquam labore dicta est esse, cum in?</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 텍스트3</title>
<style>
.variant { font-variant: small-caps; }
.under { text-decoration: underline; }
.through { text-decoration: line-through;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
</style>
</head>
<body>
<h2>HTML(<span class="variant">Hyper Text Markup Language</span>)</h2>
<p>웹사이트의 모습을 기술하기 위한 마크업 언어.</p>
<p><span class="under">프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로[1] 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다.</span> 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
<p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>
<p><span class="through">나무위키에서는 아래와 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말은 권장하지 않는 문법이고, 지원 종료 가능성이 있는 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</span></p>
<p><a href="https://namu.wiki/w/HTML">출처: 나무위키</a></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 텍스트4</title>
<style>
h1 { font-size: 100px; }
.shadow1 { text-shadow: 10px 10px; }
.shadow2 { text-shadow: 10px 10px 5px; }
.shadow3 { text-shadow: 10px 10px 5px red; }
.shadow4 { color: #fff; text-shadow: 10px -10px 5px #000;}
.shadow5 { color: #fff; text-shadow: 0px 0px 8px #000;}
</style>
</head>
<body>
<h2>css 텍스트4</h2>
<h1 class="shadow1">CSS Text-Shadow 속성1</h1>
<h1 class="shadow2">CSS Text-Shadow 속성2</h1>
<h1 class="shadow3">CSS Text-Shadow 속성3</h1>
<h1 class="shadow4">CSS Text-Shadow 속성4</h1>
<h1 class="shadow5">CSS Text-Shadow 속성5</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트 5</title>
<style>
p { display: inline-block; width: 200px; border: 1px solid red; }
.txt1 { white-space: nowrap; overflow: hidden; text-overflow: clip;}
.txt2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.txt3 { height:150px; overflow: scroll;}
.txt4 { height: 150px; overflow-x: hidden; overflow-y: scroll;}
.txt5 {
border: 3px dotted deeppink;
width: 400px;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.txt5:hover { overflow: visible; }
</style>
</head>
<body>
<h2>css 텍스트 5</h2>
<p class="txt1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi quod doloribus facere deserunt autem libero quas atque dolorum eius, sunt ad culpa architecto ratione omnis, perspiciatis sed, voluptates accusamus.</p>
<p class="txt2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi quod doloribus facere deserunt autem libero quas atque dolorum eius, sunt ad culpa architecto ratione omnis, perspiciatis sed, voluptates accusamus.</p>
<p class="txt3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi quod doloribus facere deserunt autem libero quas atque dolorum eius, sunt ad culpa architecto ratione omnis, perspiciatis sed, voluptates accusamus.</p>
<p class="txt4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi quod doloribus facere deserunt autem libero quas atque dolorum eius, sunt ad culpa architecto ratione omnis, perspiciatis sed, voluptates accusamus.</p>
<p class="txt5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi quod doloribus facere deserunt autem libero quas atque dolorum eius, sunt ad culpa architecto ratione omnis, perspiciatis sed, voluptates accusamus.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css텍스트 6</title>
<style>
@font-face {
font-family: 'CoolGuy-Medium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/CoolGuy-Medium.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
.fontface { font-family: 'CoolGuy-Medium'; }
</style>
</head>
<body>
<h2>css텍스트 6</h2>
<p>열받는 일이 있어도 쿨한척</p>
<p class="fontface">열받는 일이 있어도 쿨한척</p>
</body>
</html>
