HTML/CSS 1.5 · 1부. HTML 기초

링크와 이미지

다른 곳을 가리키는 두 태그와, 주소를 적는 방법을 봅니다.

예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문

개념 설명

다른 곳을 가리키는 태그

지금까지는 문서 안의 글자만 다뤘습니다. 이 단원의 둘은 바깥을 가리킵니다 — 링크는 다른 문서를, 이미지는 그림 파일을 가리킵니다.

가리키는 자리는 주소로 적습니다. 주소를 적는 방법이 두 가지이고, 그 차이가 이 단원에서 가장 많이 걸리는 자리입니다.

최소 예제 · 편집 가능

a 태그에 href 로 갈 곳을 적습니다. 태그 사이의 글자가 눌리는 부분이 됩니다.

<p>자세한 것은 <a href="guide.html">이용 안내</a> 를 보십시오.</p>
<p><a href="https://learn.microsoft.com">마이크로소프트 문서</a></p>
<p><a href="#bottom">아래로 이동</a></p>

미리보기에서는 링크를 눌러도 이동하지 않습니다. 예제 화면이 다른 주소로 바뀌지 않게 막아 두었기 때문입니다. 1.2 에서 한 것처럼 파일로 만들어 열면 실제로 이동합니다.

상세 사용법

같은 사이트 안에서는 상대 주소나 루트 상대 주소를 사용합니다. 절대 주소로 적으면 주소가 바뀔 때 모든 문서를 고쳐야 하고, 개발 중인 화면에서 눌렀는데 운영 주소로 나가는 일이 생깁니다.

상세 사용법

target="_blank" 를 더하면 새 탭에서 열립니다. 다른 사이트로 나갈 때만 사용하고, 같은 사이트 안에서는 사용하지 않습니다. 읽는 사람이 뒤로 가기를 사용할 수 없게 되기 때문입니다.

index.html

<a href="https://learn.microsoft.com"
   target="_blank" rel="noopener">마이크로소프트 문서</a>

rel="noopener" 를 함께 적습니다. 새로 열린 화면이 원래 화면을 건드리지 못하게 막는 표시입니다.

최소 예제 · 편집 가능

img 는 닫는 태그가 없습니다. src 에 그림 주소를, alt 에 그림을 설명하는 글을 적습니다.

<img src="/learn/htmlcss/sample-logo.png"
     alt="메이야넷 로고" width="160">

<img src="없는파일.png" alt="받지 못한 그림">

첫 그림의 주소는 이 사이트에 있는 파일입니다. 여러분이 만든 문서에서는 자기 폴더의 그림 이름을 적으면 됩니다.

둘째 그림은 일부러 없는 파일을 가리켰습니다. 그림을 받지 못하면 그 자리에 alt 의 글이 나옵니다. 그것이 alt 를 적는 까닭입니다 — 그림을 볼 수 없는 사람과 화면 읽기 프로그램에도 같은 글이 전달됩니다.

상세 사용법

"사진" · "이미지" 라고 적지 않습니다. 그림이라는 것은 이미 알고 있고, 알아야 할 것은 그 안에 무엇이 있는가입니다.

흔한 실수

그림이 안 나옵니다. 열에 아홉은 주소가 틀린 것입니다. 파일 이름의 대소문자와 확장자를 확인하고, 폴더가 다르면 폴더/파일.png 처럼 앞에 폴더를 적습니다.
alt 를 빠뜨립니다. 그림이 나오는 동안에는 티가 나지 않아 잊기 쉽습니다. 꾸미기용이라면 alt="" 라고 적어 일부러 비웠다는 것을 남기십시오.
링크 글자를 "여기" 로 적습니다. 링크만 훑어 읽는 사람에게는 아무 정보가 되지 않습니다. 가는 곳을 그대로 적으십시오 — <a>이용 안내</a>.

실습 문제

1. 링크가 달린 그림 만들기 난이도 하

로고 그림을 a 로 감싸 누르면 처음 화면 (/)으로 가게 하십시오. alt 도 그에 맞게 적으십시오.

a 안에는 글자뿐 아니라 그림도 넣을 수 있습니다. 링크 안의 그림이면 alt 에는 누르면 가는 곳을 적습니다.

요약