- 빈요소, void 요소 (Empty Elements)
여는 태그와 닫는 태그 사이가 없는 요소
"단일 태그" 라고도 하며 주로 문서에 무언가를 첨부하기 위해서 사용된다.
- 이미지 태그
- 웹 페이지에서 주로 사용되는 이미지의 종류
- jpeg : .jpg/ .jpeg - 휴대폰, 카메라 사진
- gif : .gif - 움짤, 움직이는 이미지
- png : .png - 배경을 투명하게 할 때 사용
- HTML 문서에 이미지를 삽입할 때에는 <img> 태그를 사용한다.
<img src="경로" alt="대체할 문자열"> (alt는 생략가능)여기서 경로는 상대경로와 절대 경로 두 가지로 나뉜다.
- 상대 경로
현재 위치한 페이지(파일) 기준으로 찾아가는 경로이다.
| ./ | 현재 폴더를 의미한다. |
| ../ | 상위 폴더를 의미한다. |
- 절대 경로
어떤페이지에 있던가에 최상위 경로부터 하나씩 써놓아서 찾아 갈 수 있게 작성한 경로이다.
이미지 태그 이용하기!
<html>
<head>
<meta charset="UTF-8">
<title>1_image</title>
</head>
<body>
<p>
고양이1 <img src = "Cat1.png" alt = "똥고보이는 고양이">
</p>
<p>
고양이2 <img src = "images/Cat2.png" alt = "웃는 고양이">
</p>
<p>
고양이3 <img src = "C:\WEB_1900_JJH\HTML_CSS_JavaScript\workspace\day05\WebContent"
alt = "자는 고양이">
</p>
</body>
</html>여기서 고양이 1은 HTML문서를 작성한 WebContent 파일에 함께 있고,
고양이 2 는 WebContent 폴더 안에서 새로운 폴더를 만들어서 사진을 넣고, 경로를 src = "images/Cat2.png" 로 지정해서 불러온 것이다.
고양이 3은 컴퓨터에 있는 이미지의 경로로 사진을 불러온 것이다.
고양이 3은 현재 사진파일이 없어서 깨지는 것이다.
<html>
<head>
<meta charset="UTF-8">
<title>2_image2</title>
</head>
<body>
<p>
고양이3 <img src = "../Cat3.png" alt = "자는 고양이" >
</p>
<p>
외부 고양이<img src = "https://cdn3.iconfinder.com/data/icons/cat-force/256/cat_paper.png"
alt = "휴지푸는 고양이">
</p>
</body>
</html>여기서 아까 그 고양이3을 같은 폴더(WebContent)에 두고, 외부 고양이는 아이콘 파인더의 경로로 설정해서 이미지를 띄워주었다.
- 하이퍼 링크
HTML 파일 링크를 걸 때 사용한다.
현재 페이지에서 다른 페이지로 이동하고자 할 떄 사용한다.
보통 링크라고 부르며 <a> 태그를 사용한다.
<a href = "페이지 경로나 주소" target="보여줄 창"> 문자열 또는 이미지 </a>
하이퍼 링크 사용해보기!
<html>
<head>
<meta charset="UTF-8">
<title>3_link</title>
</head>
<body>
<!--_blank : 새 창에서 열기 -->
<a href = "../images/2_image2.html" target = "_blank">귀여운 고양이 보러가기~</a> <br>
<a href = "http://www.naver.com"> 네이버로 놀러가기 </a> <br>
<a href = "../1_image.html"><img src = "../Cat1.png"></a>
</body>
</html>
놀러가기~를 누르면 그 창으로 전환된다.
- 아이콘 파인더
무료 아이콘을 사용할 수 있는 사이트
6,050,000+ free and premium vector icons, illustrations and 3D illustrations
Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.
www.iconfinder.com
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 07 : colgroup, 페이지 책갈피, 요소 (0) | 2022.01.17 |
|---|---|
| DAY 06 : 테이블, 병합, 캡션, thead, tbody, tfoot (0) | 2022.01.17 |
| DAY 04 : 서식 태그, 리스트 태그 (0) | 2022.01.12 |
| DAY 03 : 웹 표준, HTML, .... (0) | 2022.01.10 |
| DAY 02 : 인코딩, HTML, CSS, JavaScript (0) | 2022.01.10 |