이번 편에서는 이미지 태그에 대해 알아보겠습니다. 이미 이전 편에서 경로에 대한 개념을 밝혔기 때문에, 이미지 태그는 정말 쉽게 익힐 수 있습니다. 다음 예제는 네이버 로고를 훔쳐서 게시하는 방법을 설명합니다.
먼저 네이버에 접속해 로고 이미지를 오른쪽 클릭하고 속성 창을 여십시오. 이를 통해 로고 이미지의 주소를 알아냅니다.
클릭해서 자세히 보기
이미지는 IMG 태그를 통해 게시합니다. 다음 예제를 통해서 볼 수 있듯, IMG 태그는 src 속성을 가지며 종료태그가 필요없습니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>이미지 예제</title></head><body> <p>네이버 로고: </p></body></html> |
[예제 9-1]
클릭해서 실행 결과 보기
이것은 절대 경로를 이용한 예제입니다. 사진 파일을 직접 가지고 있다면 상대 경로를 통해 지정하면 됩니다. 간단한 내용이니 예제는 따로 살피지 않겠습니다.
이미지 태그는 사이즈를 직접 지정할 수도 있습니다. 가령 이미지가 너무 클 때 적당히 작은 사이즈로 조절 할 수 있습니다. 이것은 width와 height 속성을 통해 지정합니다. 말 그대로 각각 가로와 세로 크기를 의미합니다. 다음 예제를 보십시오.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>이미지 사이즈 예제</title></head><body> <p>크기를 줄인 네이버 로고: <img width="105px" height="39px"> </p></body></html> |
[예제 9-2]
클릭해서 실행 결과 보기
보통 이러한 식으로 크기를 조정하게 되면 이미지가 보기 좋지 않게 축소되는 경우(일그러지는 등)가 많습니다. 그래서 대부분 차라리 이미지 편집 프로그램을 통해 작은 사이즈를 따로 만듭니다. 또한 이러한 사이즈 지정은 CSS에서도 할 수 있기 때문에, 굳이 HTML로 사이즈를 조절하는 일은 별로 없습니다.
마지막으로, 이미지에 링크를 거는 예제를 살펴보려고 합니다. 여태 하이퍼링크를 텍스트에만 적용해왔지만, 사실 어디에나 링크를 걸 수 있습니다. 대표적인 예가 아래와 같이 이미지에 링크를 거는 경우입니다. (링크의 주소 값을 이미지로 한다는 것이 아니니 이 부분을 혼동하지 마십시오.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>이미지 링크 예제</title></head><body> <p>네이버 링크를 건 로고 이미지 </a> </p></body></html> |
[예제 9-3]
클릭해서 실행 결과 보기
이미지를 클릭하면 네이버가 새 창에 띄워집니다. 링크를 이미지에 적용하면 보기 싫을 수도 있는 외곽선이 나타나는데, 이것은 나중에 CSS로 처리할 수 있습니다.
만약 지금 당장 외곽선을 제거하고 싶다면, IMG에 style 속성을 다음과 같이 추가하십시오.
<img src="주소" style="border: none;">
이제 이렇게 해서, 하이퍼링크와 이미지에 대해 살펴보았습니다. 모든 태그가 그렇지만, 블로그나 카페에서 HTML 에디터를 사용할 때도 적용할 수 있는 기술입니다.
'컴퓨터 관련 > HTML' 카테고리의 다른 글
| HTML 기초 강좌 07: 하이퍼링크와 이미지 (상) (0) | 2017.01.14 |
|---|---|
| HTML 기초 강좌 08: 하이퍼링크와 이미지 (중) (0) | 2017.01.14 |
| 스크랩한 글 쫓아와 새로 고쳐 올리기 (0) | 2016.12.28 |
| 소스 보기 - 복사할 부분 (0) | 2016.12.28 |
| [스크랩] HTML 소스 (0) | 2016.02.14 |