이미지는 gif, jpg, jpeg, png 의 파일 형식이 지원
<img> 태그 - 이미지 태그
웹 문서에 이미지를 삽입할 때 사용
src 속성으로 상대경로(html 파일이 있는 곳 기준)로 이미지 파일 경로를 지정해 사용
닫힘 태그가 없다.
alt 속성을 꼭 사용해주어야한다. alt 속성은 이미지를 설명하는 대체 텍스트
width, height 속성으로 이미지 크기 조정하기 (각각 가로폭, 높이폭)
이미지를 삽입할 때는 대략적인 해상도에 맞춰 업로드하는 것이 좋다.
깨지는 것을 방지하며, 용량이 큰 사진을 업로드해 비효율적이게 됨을 막기 위함.
포토샵을 사용해 해상도 조정하기! (image-image size)
<figure> 태그 : 설명글을 붙일 대상을 지정
웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
설명글 표시할 때 <figure>태그로 먼저 묶어야 한다.
<figcaption> 태그 : 이미지를 설명하는 대체 택스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>이미지 삽입하기</title>
<style>
img {
border: 1px solid purple;
}
figure {
display: inline-block;
}
</style>
</head>
<body>
<h1>바다 시리즈2</h1>
<figure>
<img src="image_dolphin.jpg" alt="돌고래">
<figcaption>돌고래(dolphin)</figcaption>
</figure>
</body>
</html>
하이퍼링크는 다른 문서나 사이트로 바로 연결해주는 기능.
외부 사이트 혹은 외부 페이지로 연결 가능.
<a> 태그 - 하이퍼링크 태그
웹 문서에 하이퍼링크를 삽입할 때 사용
href 속성으로 반드시 어떤 대상을 연결하는지 알려주어야 한다.
target 속성 : 링크한 내용이 표시될 위치(현재 창( : 디폴트값)인지 새로운 창( : _blank)으로 표시할 것인지) 지정
type 속성 : 링크한 문서의 파일 유형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="EUC-KR">
<title>링크 만들기</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="https://blog.naver.com/hhahee">블로그</a>
<h1>이미지 링크 만들기</h1>
<a href="https://blog.naver.com/hhahee"> <img
src="image_profileImage.png" alt="블로그로 가기">
</a>
</body>
</html>
anchor(앵커) : 한 페이지 안에서 점프하기 - <a href="#...">을 사용하여 해당 id 속성의 콘텐츠로 이동하는 것.
SVG 이미지 : Scalable Vector Graphics의 약자
이미지를 확대하거나 축소하더라도 테두리가 깔끔한 상태로 유지되는 벡터 이미지.
로고나 아이콘에 많이 사용된다.
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS : 버튼 만들어보기 실습 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #04 : 폼, input태그 (0) | 2022.12.13 |
| HTML & CSS #02 : text (0) | 2022.12.13 |
| HTML & CSS #01 : 기본 (0) | 2022.12.13 |
| HTML & CSS : 구글 웹 폰트 사용하기 (0) | 2022.12.07 |
댓글