<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_링크를 걸어 컨텐츠로 이동하기</title>
</head>
<body>
<h1>starbucks</h1>
<a href="#americano">아메리카노</a>
<a href="#cappucino">카푸치노</a>
<a href="#cafelatte">카페라떼</a>
<hr>
<h1 id="americano">아메리카노</h1>
<p><mark>네이게이션 메뉴를 클릭했을 때 싱글 페이지 안에서 해당하는 컨텐츠로 이동하려면 id값이 필요합니다. 각 컨텐츠에는 id='아이디 값'을 주고 링크를 걸어줄 a 태그의 href 속성값으로는 #아이디명을 넣어준다.</mark><br>
Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Qui repellat exercitationem minus sunt eius sapiente? Cum aliquid quod, natus. Repellat et exercitationem maxime perferendis, atque doloremque illum sed laboriosam consectetur omnis commodi repudiandae sit ipsum cum fugiat. Distinctio minus tempora alias, atque quis illo commodi nihil aspernatur nostrum repellendus ab recusandae ducimus adipisci, perferendis, est incidunt facere totam delectus, ex ipsa laudantium! Possimus non alias natus, voluptatibus eligendi cupiditate rem fuga repudiandae saepe nisi odit obcaecati illo ipsa aut, repellendus inventore expedita numquam ipsam delectus distinctio. Perferendis totam quisquam iure reprehenderit mollitia corrupti pariatur nesciunt dolores? At tenetur, sunt et.</p>
<h1 id="cappucino">카푸치노</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi nesciunt architecto impedit ut dolorem libero ipsum qui harum iusto vel velit, beatae quasi a sit doloremque reiciendis eaque molestiae ratione voluptas, dolore. Corrupti, consequuntur sapiente repellat incidunt perferendis accusantium illum possimus reprehenderit unde est. Rem, numquam aliquam facere commodi dignissimos ullam hic modi veniam. Optio eius minus ducimus corporis laborum incidunt! Maxime ut labore recusandae earum enim dolorem illo neque quis iure aut officiis vel ullam aliquam possimus magni voluptates, consectetur voluptatibus eveniet ipsam nisi. Suscipit necessitatibus in animi voluptas amet maiores corrupti veniam neque nostrum voluptatum facilis ducimus, sequi dicta culpa odit error recusandae illo perspiciatis aut cumque odio doloremque laboriosam beatae. Eos provident quisquam necessitatibus impedit nihil natus animi magnam fugiat, itaque, accusantium non possimus, quasi ad magni, tempora repudiandae vitae quaerat rerum quam quo omnis. Suscipit in at optio quibusdam nobis temporibus praesentium id, natus labore.</p>
<h1 id="cafelatte">카페라떼</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error pariatur, magni explicabo fugit, odio a rerum aut maxime voluptate omnis voluptas. Nesciunt eum, optio cum quod labore, adipisci voluptatum ullam ipsum tempora, iure, aliquid quis. Est repellendus veniam tenetur quia, tempore alias corrupti, accusantium dolorum provident, iusto nesciunt ducimus doloremque nostrum quo voluptatem vero incidunt illum eius libero error aut, sequi iure. Magni quo sint quibusdam quisquam, repellat voluptate quidem voluptatibus et debitis numquam nobis facilis, possimus minus sed quaerat quod ut autem architecto cumque obcaecati beatae recusandae modi tenetur. Ut nemo, mollitia perferendis veritatis, delectus explicabo nisi ipsa reiciendis consectetur adipisci quasi accusamus iste voluptate, suscipit ipsum totam impedit, enim. Quos repudiandae fugiat nostrum accusantium, adipisci facere sint at natus omnis expedita molestiae nihil, nulla error, et, veritatis qui fugit veniam dicta sapiente harum reprehenderit illo! Voluptatem sed facere numquam consectetur nam minima aut veritatis reprehenderit nihil at, vitae!</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
'HTML > code' 카테고리의 다른 글
| 사운드를 출력해주는 audio 태그 (0) | 2023.03.24 |
|---|---|
| 이미지 태그 (0) | 2023.03.24 |
| 배운 태그를 이용한 각오 (0) | 2023.03.24 |
| 목록을 표시하는 li태그 (0) | 2023.03.24 |
| 다양한 태그 (0) | 2023.03.24 |