<!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="stylesheet" href="24 웹개발 과제2.css">
<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=East+Sea+Dokdo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
</head>
<body>
<div class="practice">
<h1 class="font1">스타일 적용 연습하기</h1>
</div>
<ul class="list1">
<li>스타일은 css 파일에서 적용할 것</li>
<li> 폰트는 무엇을, 어디에 적용하든 자율</li>
<li>크기, 두께, 색깔 등 모두 자율</li>
</ul>
<hr>
<ul>
<li class="bar">리스트를 2중으로도 적용 가능
<ul id="list">
<li>기능사 시험에서도 출제 된다</li>
<li>상위 하위 메뉴 만들 때 쓴다</li>
</ul>
</li>
<li class="bar">홈페이지 메뉴에서 많이 쓰인다
<ul id="list">
<li>상단 메뉴, 측면 메뉴에 쓰임</li>
<li>마우스 올리면 작은 메뉴가 나오는 것</li>
</ul>
</li>
<li class="bar">직접 스스로 시도해서 만들어 볼 것
<ul id="list">
<li>어려울 때는 선생님한테 묻기</li>
<li>혹은 옆 친구랑 같이 해결하기</li>
</ul>
</li>
<li class="bar">이 부분은 마무리할 때 정리 예정
<ul id="list">
<li>아주 어렵진 않다</li>
<li>리스트 한번 더 넣으면 됨</li>
</ul>
</li>
</ul>
<hr>
<div class="practice">
<h1 class="font2">그림자 넣기</h1>
</div>
<p>원래 글씨</p>
<p class="fontspace">글짜 간격 조절하기</p>
</body>
</html>=================================================================================================
.practice {border: 3px solid black; width: 50%; margin-top: 30px; margin-bottom: 20px;}
.font1 {
text-align: center;
color: blue;
font-size: 50pt;
line-height: 0;
font-family: 'East Sea Dokdo', cursive;
}
.list1 {
line-height: 30px;
font-family: 'Single Day', cursive;
font-size: 20pt;
font-weight: bold;
}
.bar {background-color: black; color: white;}
.font2 {
text-align: center;
color: rgb(255, 255, 255);
font-size: 50pt;
line-height: 0;
font-family: 'Jua', sans-serif;
text-shadow: 3px 3px 0px rgb(255, 3, 230);
}
.fontspace {
letter-spacing: 10px;
}
#list {background-color: white; color: black;}