1. 이미지 태그
<!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>이미지 태그</h2>
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음 로고">
<img src="./rain1.png" alt="비 이미지">
<img src="./images/rain2.png" alt="비 이미지">
</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>
</head>
<body>
<h2>하이퍼링크</h2>
<!-- 절대 경로 -->
<a href="http://koreaisacademy.co.kr">코리아IT아카데미</a>
<a href="https://www.daum.net"><img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고"></a>
<!-- 상대 경로 -->
<a href="./subpage/1-1.이미지태그.html">서브페이지로 이동</a>
<a href="./subpage/1-1.이미지태그.html"><img src="./rain5.png" alt="비 이미지"></a>
</body>
</html>3. 책갈피
<!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 id="menu">책갈피</h2>
<p><a href="#book">목적지로 이동합니다!</a></p>
<p><a href="#middle">중간지점으로 이동합니다.</a></p>
<p><a href="#center">중간지점으로 이동합니다.</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p><a name="middle">중간</a></p>
<p><img id="center" src="./rain5.png" alt="비 이미지"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eius eaque dignissimos facilis. Culpa, voluptas quo deleniti molestiae dolores quam mollitia quidem porro id ipsa, labore aspernatur veniam esse excepturi!</p>
<p><a name='book'>도착지</a></p>
<p><a href="#menu">위로↑</a></p>
<p><a href="#">위로2↑</a></p>
</body>
</html>★여기서 중복된 Lorem으로 시작하는 단어를 일일히 작성한것이 아닌. vscode에서 lorem이라고 작성 후 엔터를 치면 자동으로 해당 글자가 나온다.
'Study > HTML' 카테고리의 다른 글
| [HTML] Day3-1 (1) | 2023.10.10 |
|---|---|
| [HTML] Day3 (0) | 2023.10.10 |
| [HTML] Day2 (0) | 2023.10.10 |
| [HTML] Day1 (0) | 2023.09.25 |
| [HTML] 활용 (0) | 2023.09.25 |