링크(Links) 태그
- 하이퍼링크(Hyperlink): 하이퍼링크를 클릭하면 다른 문서로 이동
- <a href="URL"> 링크 요소 </a>
- a: anchor(닻), 다른 곳으로의 이동을 의미
- href: Hypertext Reference, 연결될 곳의 참조 주소
- 링크 요소: 텍스트, 이미지 등 HTML 요소
- 절대 주소 (Absolute Address): 파일의 전체 주소로 표시
- e.g. https://www.google.com/index.html
- 상대 주소 (Relative Address): 파일의 상대적인 위치로 표시
- Target 속성
- 기본값은 현재 창
- _self: 기본값, 클릭한 것과 동일한 창이나 탭
- _blank: 새 창이나 새 탭
- _parent: 상위 프레임
- _top: 창 전체
이미지(Images) 태그
- 웹 페이지의 디자인과 모양을 향상시킴
- 이미지 파일이 없을 때, 웹 접근성 문제 해결(시각장애인)
- <img src="URL" alt="alternative text">
- source: 그림 파일의 주소
- alt: 이미지에 문제가 있거나 시각장애인 안내를 위해 이미지에 설명글을 다는 옵션
- 이미지의 크기: 가로(width)와 세로(height)로 나타냄
- <img src="URL" width="160" height="50">
브라우저에서 인식하는 이미지 포맷
| 약어 |
파일 포맷 |
파일 확장자 |
| APNG |
Animated Portable Network Graphics |
.apng |
| GIF |
Graphics Interchange Format |
.gif |
| ICO |
Microsoft Icon |
.ico .cur |
| JPEG |
Joint Photographic Expert Group Image |
.jpg .jpeg .jfif .pjpeg .pjp |
| PNG |
Portable Network Graphics |
.png |
| SVG |
Scalable Vector Graphics |
.svg |
HTML 문서의 배경 이미지
- HTML 요소로 배경 이미지 지정
- <div style="background-image: url('images/image.png');">
- head 섹션에 style 요소로 배경 이미지 지정
<head>
<style>
div.bg {
background-image: url('images/image.png')
}
</style>
</head>
<div class="bg">Lorem ipsum</div>
