#04 HTML 강좌 이미지 삽입 <img> 태그

안녕하세요 대남이입니다. 오늘은 html 문서에 이미지를 삽입하는 방법과 그 태그에 관하여 배워보겠습니다.

일단 어떤 웹페이지이건 간에 이미지 사용은 필수불가결합니다. 그렇기에 꼭 숙지하고 계셔야 하는 부분입니다.

일단 처음으로 간단한 이미지 태그에 관한 예시를 보고 셜명과 함께 예시 코딩을 해보겠습니다.

---

이미지 태그 : < img >

일단 기본적인 태그의 구성은 위와 같습니다. img는 이미지를 삽입을 위한 태그입니다. 

html 문서에 이제 이미지를 삽입하겠다고 선언하는 것입니다. 앞서 배운 링크태그에서의 href가 링크의 목적지를 나타내었다면,

이미지태그에서의 src는 이미지 파일을 지정하는 것입니다. 즉, 원하는 파일의 이름을 적으시면 됩니다.

그리고 width는 가로크기, heigth는 세로크기이며 픽셀로 계산됩니다.

그러면 이미지를 삽입하는 간단한 코딩의 예시를 보시겠습니다.

(border 테두리의 크기라고 생각하시면 됩니다. css 에서 자세히 다루는 영역입니다.)

예시 코딩을 보시면, src 에 제가 원하는 사진 이름을 넣고, width와 heigth로 가로 세로의 키를 정하였습니다.

그러면 밑에 사진과 같이 브라우저에 출력됩니다.

---

속성 alt

이미지 삽입은 어렵지 않지만 웹사이트를 꾸밀때, 또는 제품을 설명할 때 쇼핑몰의 경우 제품을 판매할 때, 많은 경우 이미지 삽입은 필수 입니다.

잘 알아두시면 많이 유용하게 쓰실 수 있습니다. 또, 위 코딩에서 alt는 무엇인지에 관한 의문을 가지셨을 겁니다.

alt 속성은 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못한 경우에, 대체 되어 표시되는 텍스트를 지정하는 것입니다.

저는 alt="PHOTO" 라고 했는데, 만약 브라우저가 이미지를 표시 못하였을 경우에는 밑에와 같이 출력됩니다.

이제 이미지 태그에 관한 기본적인 속성은 모두 배우셨습니다 !

그러면 이번에는 간단한 예시를 다시 연습해보겠습니다.

---

예시 연습

이 페이지를 보시고 어떤 태그들이 사용되었는지 감이 오시나요? 네 간단한 태그의 조합입니다.

헤딩태그와 단락 그리고 이미지의 조합입니다. 이미지 2장과 텍스트로 간단한 페이지를 만들어보았습니다.

이 페이지의 소스를 확인해보면 이와 같습니다.

이렇게 h2,p 태그와 img태그의 조합으로 코딩되었습니다. 만약 사진의 width와 height를 조정하면, 두 사진의 크기를 같게 할 수 도있고,

다르게 할 수 도있습니다. 그러면 더 나아가 이번에는 앞서배운 링크 태그와 응용한 예시를 들어 보겠습니다.

이번에는, 사진을 누르면 좀 더 자세한 사진의 페이지로 이동하는 예시입니다.

---

링크 태그와 이미지 태그의 응용

애플사의 제품인 맥북 프로 레티나를 소개하는 페이지를 만들어 보았습니다.

그리고 저 사진을 누르면 좀 더 자세한 사진을 볼 수 있는 페이지로 이동합니다.

이와 같이 사진이 좀 더 커지는 페이지로 이동하였습니다.

이 html 코딩이 뭔지 감이 오시나요?, 앞서 말했듯이 링크태그와의 응용입니다.

링크태그 <a> </a> 사이 이미지를 삽입하고 링크 태그의 href="mac.html"

즉, 링크의 목적지가 더 큰 사진이 있는 또 다른 html으로 설정하면 되는 겁니다. 정답을 보시겠습니다.

이것이 첫번째 페이지의 코드입니다. 링크의 목적지를 더 사진 페이지를 해놓고,

<a> </a> 사이의 추가 설명 부분에 이미지를 삽입하여 이미지를 누르면 이동하게되는 페이지를 만든 것 입니다.

그러면 두번째 페이지의 소스는 이와 같습니다.

이렇게 width와 height를 이용하여 더 큰 사진으로 자세히 볼 수 있게 하였습니다.

이 처럼 html 태그들은 홀로 쓰이기보다 조합되어 쓰이는 경우도 꽤 있습니다.

오늘은 쉽지만 중요한 이미지 삽입, 태그에 대하여 배워봤습니다 !

다음번에도 더 유익한 정보들을 가져와서 알려드리겠습니다. 감사합니다.