7.0. 링크와 이미지 넣기
📎 링크란?
문서와 문서 간의 연결을 의미하며, 기본적으로 <a> 태그를 사용
🖼️ 이미지란?
사진과 같은 이미지 객체는 <img> 태그를 사용해 HTML 문서에 삽입
7.1. a 태그
<a href="대상경로" target="링크 연결 방식" title="링크 설명"></a>
- HTML 내·외부 링크를 생성할 때 사용
- href 속성은 필수, target, title 속성은 선택적으로 사용 가능
7.1.1. href 속성
- 링크의 대상 경로(URL 또는 내부 id) 를 지정
- 내부 문서의 특정 위치로 연결하고자 할 경우 #id명을 사용
- 개발 초기 경로가 명확하지 않을 경우, 임시로 "#"를 넣고 나중에 수정
<!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>
<a href="#section2">문서 내 섹션 이동</a>
</a>
</body>
</html>
7.1.2. target 속성
- 링크가 어디에서 열릴지를 지정하는 속성
- 주요 속성값:
- _self: 현재 창에서 열림 (기본값, 생략 가능)
- _blank: 새 탭 또는 창에서 열림
- _parent, _top: 프레임 사용 시 활용 (일반적 사용 적음)
<!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>
</a>
</body>
</html>
7.1.3. tilte 속성
- 링크에 마우스를 올렸을 때 나타나는 보조 설명(툴팁) 을 설정
- 시각적 콘텐츠만으로 부족한 설명을 보완 가능
- 생략 가능
<!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>
</a>
</body>
</html>
7.2. img 태그
- HTML에서 이미지를 삽입할 때 사용
- img 태그는 종료 태그가 없는 빈 요소
- 필수 속성: src, alt
<img src="이미지 경로" alt="이미지 설명">
7.2.1. src 속성(sorce)
- 삽입하려는 이미지의 경로 또는 URL을 지정합니다.
- HTML 문서의 위치를 기준으로 작성하는 상대 경로를 자주 사용합니다.
| 경로 | 의미 | 예시 |
| ./ | 현재 폴더 | ./images/island.jpg |
| ../ | 상위 폴더 | ../images/island.jpg |
| ../../ | 상위의 상위 폴더 | ../../images/island.jpg |
예시
- HTML 파일과 같은 폴더에 images 폴더가 있고 그 안에 island.jpg가 있다면:
<img src="./images/island.jpeg">
- HTML 파일보다 한 단계 위 폴더에 images 폴더가 있다면:
<img src="../images/island.jpeg">
7.2.2. alt 속성
alt 속성에는 이미지 객체를 설명할 수 있는 텍스트를 입력한다.
<img src="../images/island.jpeg" alt="섬사진">
웹 표준에서는 alt와 src 속성을 필수로 사용하도록 권고 한다.
7.3. 이미지 링크
이미지를 클릭하면 특정 페이지로 이동하게 만들 수 있다.
이는 <img> 태그를 <a> 태그 안에 넣어 구현 .
<!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>
<img src="./google_logo.png" alt="구글 로고">
</a>
</body>
</html>
- 위 예시에서 사용한 이미지 파일은 HTML 문서와 같은 폴더에 있음을 알 수 있다..
- 이미지 클릭 시 구글 사이트가 새 창에서 열림을 확인 할 수 있다.
*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한대로 자바스크립트를 요약한 정리입니다.
본 문서는 상업적인 목적으로 사용이 불가능 함을 고지 합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지 합니다.)
'프로그램 언어 > HTML' 카테고리의 다른 글
| [HTML] 9-1. 폼 구성하기 (15) | 2025.08.02 |
|---|---|
| [HTML] 8. 텍스트 강조하기 (5) | 2025.08.02 |
| [HTML] 6. 목록 만들기 (7) | 2025.08.02 |
| [HTML] 5. 그룹 짓기 (11) | 2025.08.02 |
| [HTML] 4. 텍스트 작성하기 (14) | 2025.08.02 |