HTML a 태그 - 이미지에 링크 거는 방법
HTML에서 이미지를 삽입하고자 할 때 사용하는 태그(요소)는 <img>라는 태그입니다. 그리고 그 태그 안에 src 옵션을 넣어서 이미지 경로를 지정해 줍니다. 이론 교육은 말로는 설명이 어려우니 직접 실습을 통해서 빠르게 알아보도록 합니다. 절대 쉽습니다. 먼저 이미지를 준비해 주세요. 너무 큰 이미지 말고 적당히 큰 사이즈로 준비해 줍니다. 가로 1000px 내외면 좋을 것 같습니다.
<img> 태그 사용
저는 고양이 이미지를 하나 준비했습니다. 이미지는 여러분들께서 작업중인 HTML / CSS 파일 폴더안에 모아두시는게 좋습니다. image 라는 폴더를 따로 생성해 해당 폴더에는 말그대로 이미지만 모아 관리하는것이 유지보수 차원에서도 훨씬 용이합니다. 이제 아래의 태그를 입력합니다.
<img src="이미지경로 또는 이미지 URL" alt="이미지설명">HTML 태그는 이렇게 구성됩니다. 생각보다 별거 없습니다. CSS 스타일시트에서는 이미지의 크기를 제어할 수 있습니다. alt 옵션은 이미지가 깨져서 엑스박스로 표시가 되는 경우에 텍스토로 대처되는 역할입니다.
CSS 스타일시트
img 태그는 인라인-블록 요소입니다. 따라서 블록요소와 인라인 요소의 장점을 모두 가지고 있습니다. 따라서 기본적인 크기가 있으니 width 값을 부여해 원하는 수치대로 조절만 해주면 됩니다. width를 수정하면 height는 알아서 따라오게 됩니다.
img {
width: 500px;
}가령 이렇게 입력하면 이미지의 가로 크기는 500px로 고정이 됩니다. 따라서 기존 1000px 짜리 이미지는 4분의 1 크기로 줄어들 것입니다. 세로도 같이 줄어들기 때문이죠. 만약 HTML 태그에서 img 태그가 여러개라면 원하는 클래스명을 img 태그에 부여해 각각 제어가 가능합니다.
img 태그에 <a>태그로 링크걸기
<a>태그는 블록요소에도, 인라인요소에도 모두 사용이 가능한 나름 특별한 태그라고 할 수 있습니다. 링크를 걸고자 하는 이미지가 있다면 말그대로 <a>태그로 감싸주기만 하면 됩니다. 매우 쉽습니다. 따라서 이미지 태그에 사용한다면 이런 형태가 됩니다.
<a href="URL경로"><img src="이미지경로 또는 이미지 URL" alt="이미지설명"></a>href의 큰 따옴표 안쪽에 클릭 시 이동하고자 하는 URL 주소를 입력하는게 일반적입니다. 또한 새창으로 열리게 하려면 a태그 안에 target="_blank"를 추가 입력하면 됩니다.
See the Pen <img>태그에 <a>태그로 링크걸기 by rgy0409 (@rgy0409) on CodePen.
이렇게해서 간단하게 이미지에 링크를 걸어서 완성된 모습입니다.
반응형으로 만들려면?
이것도 간단합니다. 이미지의 CSS 스타일에서 width를 max-width로만 변경해주면 됩니다. 그러면 최대 사이즈 이상의 브라우저에서 열리면 원본 그대로의 크기 이상 이미지는 커지지 않지만 반대로 해상도가 낮은 디스플레이에서는 이미지의 가로 사이즈가 브라우저창의 가로 사이즈에 맞춰집니다. 자동으로 줄어든다는 뜻입니다. 끝.
