8.<img> 태그 기본편!(src, alt, width, height)

일주일에 꼭 한편씩은 올릴려고 하는데 욕심도 많고 상황도 안따라주고 참 힘드네요 ㅠㅠ

https://www.w3schools.com/html/html_images.asp 을 보면 메뉴가 4개로 나뉘어서 정리글도 4개로 나눠 작성하게 될 것 같습니다. 일단 어떻게 쓰는지 어떤  속성들이 있는지 살펴보도록 하겠습니다.

---

자 일단 HTML의 태그 패턴은 기본적으로 처음에 태그을 열고(<태그>), 내용을 적고(어쩌고 저쩌고), 태그를 닫는(</i태그>) 패턴으로 사용합니다.  그런데 <img>태그는 닫힘 태그가 없다고 설명되어 있네요.

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

자 그럼 글이 아니기 때문에 타이핑 할 수는 없고, image를 띄워야 하는데 어떻게 띄울 수 있을까요?

바로 URL, 즉 주소를 사용 하는 것 입니다. 인터넷 주소로요. 주소를 정의하는 속성은 src 입니다.

<img src="url">

태그 글쓰다가 캡쳐 했던 제 블로그내 이미지를 하나 가져와볼게요.

<img src="https://k.kakaocdn.net/dn/omHVf/btqBuv4Vr1D/jEXOPcFg8m4LVkKxbsr0A0/img.png">

자 위와 같이 url 주소를 넣어주면 이미지가 표현됩니다. (위 텍스트 이미지에요^^;)

---

자 다음 속성은 alt 라는 속성입니다.

alt는 image에 간단한 설명을 붙여주는 속성인데요. w3h 는 아래와 같이 설명했네요.

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

한 번 적용시켜보도록 할게요.

<img src="https://k.kakaocdn.net/dn/omHVf/btqBuv4Vr1D/jEXOPcFg8m4LVkKxbsr0A0/img.png" alt="7번째 태그 정리 글">

아마 마우스 커서를 갖다대면 설명이 뜰텐데.....?! 현재는 확인 할 수 없네요. (아... 아닌가;;?!)

위 설명대로라면 url 경로에 에러가 있는 경우 alt에 정의한 글이 나와야 하는데요, 위 url 글자를 일부 지워 경로가 틀리도록 해보겠습니다. 

자 위 처럼 image 파일이 보여지지 않고, alt에 정의한 글이 표현되네요.

그리고 note가 하나 있습니다. 

Note: The alt attribute is required. A web page will not validate correctly without it.

반드시 사용하라고 하네요! 웹 유효성을 위해서요!

---

자 이제 image를 띄우는 방법은 배웠는데... 아마 하다보니 image 크기를 조정하고 싶은 순간이 올 것 입니다.

그 때 사용하는 속성이 바로 width 와 height 인데요. 사용 패턴이 2가지 방법이 있습니다.

첫 번째 방법은

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

위와 같이 width 값과 height 값을 명시해주는 방법입니다. 위 방법은 기본 픽셀 단위로 너비와 높이를 정의합니다.

두 번째 방법은 style 속성을 사용하여 한번에 너비와 높이를 지정하는 방법입니다.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

위와 같은 방법으로 말이죠~! 세미콜론 빼먹지 않게 주의하시구요~!

---

자, 이제 image 크기를 조정하는 법을 알게 되었으니 image를 정렬하는 법도 궁금하실텐데요.

align 이라는 속성이 있었으나, 아쉽게도 HTML5에서는 지원하지 않는 속성이 되어버렸답니다.

image의 정렬 부분은 CSS 정리글에서 다뤄보도록 하겠습니다. (언젠가 될련지...)

 

감사합니다.!