1. link(링크) 태그
HTML link : 현재 페이지에서 다른 페이지로 이동하는 목적
하이퍼링크 또는 링크라고 부르며
HTML에서는 <a> 태그를 통해 구현한다.
<a href="경로 또는 외부 사이트 주소" target="보여줄 창">
문자열, 이미지
</a>
2. img(이미지) 태그
웹 페이지에서 주로 사용되는 이미지의 종류
1) JPEG : .jpg, .jpeg - 휴대폰, 카메라 사진
2) GIF : .gif - 움직이는 이미지
3) PNG : .png - 배경을 투명하게 할 때 사용
<img src="이미지 경로" alt="대체 문자열">
이미지 경로는 절대 경로와 상대 경로가 있음
웹 서버를 기동하면 기본적으로 document root가 존재
이 document root가 보통 /로 표현되며
절대경로는 이 /를 기준으로 /images/intro/24.jpg
상대경로는 현재 html이 위치한 곳을 기준으로
.(현재 디렉토리) ..(한단계 위 디렉토리)
3. list(리스트) 태그
(1) 순서없는 리스트(UL) : unordered list
<ul>과 <li>로 구성
<ul>
<li>리스트1</li>
<li>리스트2</li>
...
</ul>
(2) 순서있는 리스트(OL) : ordered list
<ol type="타입값" start="시작값">
<li>리스트1</li>
<li>리스트2</li>
...
</ol>
타입값 : 1(숫자), A(영대문자), a(영소문자)
i(로마숫자), I(로마숫자)
☆ Code
<!doctype html>
<html>
<head>
<title>link example</title>
</head>
<body>
<h1>Link Example</h1>
<hr>
<a href="http://www.naver.com">아무데나 이동해보실까요</a>
<br>
<a href="02_paragraph.html">제2차시 Paragraph</a>
<!-- 인터넷에서 3장의 이미지를 다운받는다. -->
<!-- 움직이는 이미지(gif) 한 장 포함 -->
<!-- 배경 없는(투명한)(png) 한 장 포함 -->
<!-- 저장은 src/images 아래에 한다. -->
<br><br>
<h1>Image Example</h1>
<hr>
<!-- width, height 중 하나만 설정하면 자동으로 비율 조정 -->
<!-- width와 height를 둘 다 지정하는 경우 지정한 크기로 맞춰줌 -->
<img src="images/01_neomcity.jpg">
<img src="images/01_neomcity.jpg" width="500">
<img src="images/01_neomcity.jpg" height="600">
<img src="images/01_neomcity.jpg" width="500" height="600">
<img src="images/01_neocity.jpg" alt="죄송합니다">
<br>
<image src="images/02_spongebob.gif" width="600">AAA</image>
<br>
<img src="images/03_amongus.png" width="600">
<br><br>
<!-- list -->
<!-- unordered -->
<h3>순서따위는 없다</h3>
<ul>
<li>스테이크</li>
<li>폭립</li>
<li>망고아이스크림</li>
</ul>
<!-- ordered list -->
<h3>장유유서</h3>
<ol type="I" start="1108">
<li>육개장</li>
<li>김치</li>
<li>도시락</li>
<li>신라면툼바</li>
</ol>
<!-- list in list -->
<h3>이것저것 짬뽕</h3>
<ol>
<li>Fruit</li>
<ul>
<li>Apples</li>
<li>Peaches</li>
<ul>
<li>Korean Peach</li>
<li>American Peach</li>
</ul>
<li>Bananas</li>
</ul>
<li>Drink</li>
<ul>
<li>Cokes</li>
<li>Lemonade</li>
<li>Water</li>
</ul>
<li>Snack</li>
<ul>
<li>사브레:우정의과자-혼자 다먹으면 입천장까짐</li>
<li>다이제스티브</li>
<li>고소미</li>
</ul>
</ol>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<hr>'HTML' 카테고리의 다른 글
| HTML blockquote (0) | 2025.01.08 |
|---|---|
| HTML a 태그 (1) | 2024.11.24 |
| HTML 테이블 (0) | 2024.11.24 |
| HTML 인풋 태그 (2) | 2024.11.24 |
| HTML의 요소 (0) | 2024.11.24 |