<!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 웹개발 과제.css">
</head>
<body>
<header class="header">
<h3>여기는 <span class="semantic">header</span>임</h3>
<h4>border로 테두리 넣고, padding으로 여백 줄 것</h4>
<a href="https://www.naver.com/" target="_blank">네이버 링크</a>
<div class="div">div로 만든 박스</div>
<nav class="nav">
div가 아니라 nav 태그로 만든 박스
<ul>
<li>ul과 li로 만든 리스트</li>
<li>ul 태그 내부에 li 태그가 들어감</li>
</ul>
<h3 style="text-align: center;">class를 활용하여 스타일을 적용할 것</h3>
</nav>
</header>
<hr>
<main>
<section id="sec1">
<h4><span class="semantic">main</span> 태그 내부의 첫번째 <span class="semantic">section</span> 태그.
<br>
id적용.
<br>
padding 스타일로 내부 여백 적용. border로 테두리 적용
</h4>
<h4>사진은 img 태그로 집어넣음(이미지에 따라 사이즈 조절 필요)</h4>
<img src="https://images.velog.io/images/offdutybyblo/post/65c734fd-077c-4a68-8b3b-557c52428511/htmljscss.jpeg" alt="" width="230">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<hr>
<section class="sec2">
<h4><span class="semantic">main</span> 태그 내부의 두번째 <span class="semantic">section</span> 태그.</h4>
<h5>클래스를 통해 css 적용하기</h5>
<h5>padding 적용하기</h5>
<article class="article1">
<h5>section 태그 내부의 article 태그1</h5>
<img src="https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2020/01/24145013/article-writing.jpg" alt="" width="200"> <img src="https://us.123rf.com/450wm/tarikvision/tarikvision1805/tarikvision180500039/102418231-creative-writing-flat-isometric-vector-concept.jpg?ver=6" alt="" width="200">
<h4>사진(img) 2개 넣음</h4>
</article>
<article class="article2">
<h5>section 태그 내부의 article 태그2</h5>
<img src="https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/164375866/original/5b81bcd59a56d2fb8bc3533aa879a9ae1fe7f467/provide-quality-articles-and-blog-writing-services.jpeg" alt="" width="200">
<h4>사진(img) 넣음</h4>
</article>
</section>
</main>
<hr>
<footer class="footer">
<h2>footer 태그</h2>
<h5>배경색, padding 넣기</h5>
<h4>footer 영역은 보통 맨 밑에 저작권, 연락처 등 표시</h4>
</footer>
</body>
</html>================================================================================================
.semantic {font-size: 50px; color: blue;}
.div {border: 2px solid green; width: 50% ;margin-top: 15px; margin-bottom: 10px;}
.nav {border: 2px solid rgb(0, 122, 128); background-color: aquamarine; padding-top: 15px;}
.header {border: 2px solid red; padding: 5px; margin-bottom: 20px;}
#sec1 {border: 2px solid blue; background-color: rgb(121, 194, 246); padding: 5px; margin-top: 20px; margin-bottom: 20px;}
.sec2 {background-color: rgb(127, 228, 88); padding: 5px; margin-top: 20px; margin-bottom: 20px;}
.article1 {background-color: rgb(231, 189, 225);}
.article2 {background-color: coral;}
.footer {background-color: rgb(221, 227, 60); margin-top: 20px; margin-bottom: 20px;}