목차
접기
728x90
반응형
<!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>
body {
max-width: 800px;
margin: auto;
}
</style>
</head>
<body>
<!-- 제목 부분 -->
<header>
<h1>프로그램 언어의 종류</h1>
</header>
<!-- 네비게이션바 -->
<nav>
<ul>
<li><a href="#">C언어</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">Python</a></li>
</ul>
</nav>
<section>
<article>
<h2>C언어</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla officiis quae aliquam. Nesciunt quo minus
neque quasi libero repellendus impedit quam qui, quos aspernatur. Sed corrupti architecto corporis
soluta
voluptatum!
Pariatur autem, corrupti provident voluptas, aspernatur soluta officiis obcaecati quis eum a, temporibus
nisi exercitationem fuga inventore deserunt cumque velit at blanditiis. Consequatur facilis reiciendis
quis
exercitationem nemo sunt molestiae?
Corrupti cupiditate, fugit, voluptas quibusdam velit at quae doloribus ducimus ea magni nostrum enim.
Earum
voluptate repellendus fugit veritatis sint ab, veniam asperiores debitis. Tenetur similique alias
tempore
dignissimos reprehenderit?</p>
</article>
<article>
<h2>JAVA</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque aliquid odio explicabo necessitatibus
possimus
porro rerum officiis cumque reprehenderit nobis odit voluptate, alias voluptatem aperiam perferendis aut
corporis, eius incidunt.
Consequuntur recusandae quasi numquam a dolorum obcaecati autem magni, ipsa incidunt ipsum minus laborum
doloribus aperiam architecto tenetur fuga perferendis. Sit voluptate natus porro minus distinctio
doloremque
itaque, amet dolores?
Repellat quibusdam ea laboriosam molestiae, dicta recusandae. Quasi enim provident officia quas sed
voluptate nemo incidunt sapiente, explicabo excepturi voluptatibus nulla, inventore necessitatibus ut!
Facilis quis magni at dolorum repudiandae!</p>
</article>
<article>
<h2>Python</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente veniam cupiditate, nemo corrupti
expedita
fuga, in veritatis consectetur labore ea sit mollitia laboriosam nam? Maiores nesciunt quia amet ducimus
eius.
Praesentium inventore exercitationem possimus non fugiat incidunt voluptas repellendus nemo accusamus,
atque
culpa. Neque, sed sapiente quae veritatis minus repudiandae inventore praesentium rem, cumque minima
nam,
adipisci eos possimus architecto.
Quaerat molestias assumenda quidem excepturi ea nemo id dolorem cum maiores exercitationem similique,
vero
fuga illum laborum ullam saepe necessitatibus. Asperiores perspiciatis corporis rerum beatae alias
magnam!
Aspernatur, laborum accusamus?</p>
</article>
</section>
<footer>
<address>대구광역시 달서구 본동 아수라빌딩</address>
Since by 2002
</footer>
</body>
</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>
.con {
margin: auto;
max-width: 800px;
}
</style>
</head>
<body>
<div class="con">
<header>
<h1>HTML5 기본</h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴-1</a></li>
<li><a href="#">메뉴-2</a></li>
<li><a href="#">메뉴-3</a></li>
<li><a href="#">메뉴-4</a></li>
</ul>
</nav>
<section>
<article>
<h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque commodi odio optio a voluptate officiis. Dolorem iure delectus explicabo, deserunt assumenda iusto aut magni unde ex nihil illum cumque voluptatem.</p>
</article>
<article>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis vitae necessitatibus labore aut nisi accusantium voluptatum. Asperiores, veniam repellendus atque placeat blanditiis quae dolores maiores pariatur aspernatur fugiat animi.</p>
</article>
</section>
<footer>
<address>서울특별시 강서구 마곡동</address>
</footer>
</div>
</body>
</html>HTML5 기본
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque commodi odio optio a voluptate officiis. Dolorem iure delectus explicabo, deserunt assumenda iusto aut magni unde ex nihil illum cumque voluptatem.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis vitae necessitatibus labore aut nisi accusantium voluptatum. Asperiores, veniam repellendus atque placeat blanditiis quae dolores maiores pariatur aspernatur fugiat animi.
서울특별시 강서구 마곡동
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| div, span 분할태그 (0) | 2021.06.02 |
|---|---|
| fieldset, legend 태그 사용하기 / HTML5의 대표적인 공간 분할 태그(div, span) (0) | 2021.06.02 |
| 시맨틱태그_설명(html 웹 문서 구조) (0) | 2021.06.02 |
| select tag의 optgroup, label 사용하여 셀렉트 그룹 만들기 (0) | 2021.06.02 |
| select태그 기초와 multiple 속성 (0) | 2021.06.02 |