6. HTML로 이미지 넣는 방법을 알아보자

벌써 6번째 강의네요. 제가 이 강의를 시작하기 전 계획이 HTML을 10강 안에 끝내 보자였습니다. 그 이유는 짧은 시간에 내용을 효율적으로 전달하여 독자가 지치지 않게 하기 위함이었습니다. 계획대로만 잘 진행된다면 아마 10강 안에 다 마무리를 할 수 있지 않을까 싶습니다. 벌써 지친 건 아니시겠죠? 벌써 절반을 넘어섰습니다. 조금만 힘내시면 고지가 보이실 겁니다. 나머지 강의까지도 완주를 하신다면 어느 정도 html을 보는 시각이 달라질 것이라고 생각됩니다. 그러면 티스토리 html 수정을 하시는 분들에게, 더 나아가 웹 개발을 하시는 분들에게도 많은 도움이 되었으면 좋겠습니다.

6강에서는 html을 활용하여 이미지 삽입을 하는 방법에 대해 배워보도록 하겠습니다. 오늘 강의는 생각보다 간단하고 내용이 얼마 없습니다. 잘 따라와 주시기 바랍니다. 

---

<img src="이미지파일" alt="이미지 설명(만약 이미지가 로딩 안될 시에)" height = "세로 길이" width ="가로 길이" />

예전에 배웠던 <br/> 또는 <hr/> 기억 나시나요? 보통 태그는 <p> ... </p>같이 쌍을 이루지만 <br/>처럼 싱글 태그도 있다고 말씀을 드렸습니다. 이<img> 태그 또한 싱글태그로 사용됩니다. <img> 태그는 말그대로 홈페이지에 이미지를 삽입/추가 할 때 사용되는 태그입니다. 위에 보시면 이미지 태그가 갖는 속성 값들이 굉장히 많죠? alt, src, height 그리고 weight까지 하나 하나 차근차근 설명해 드리겠습니다. 

src

우선 src는 저번 강의에서 배웠던 href랑 유사합니다. href= " "에서 따옴표 사이에 링크(url)을 넣었던 것을 기억하시나요? 이것도 마찬가지 입니다. src=" "에서 따옴표 사이에 이미피 파일의 위치 혹은 이미지 링크를 넣어주시면 됩니다. 명심하셔야 할 점은 이미지 파일이기 때문에 끝이 .jpg , .png등 이미지 파일형식으로 명시되어 있어야 합니다.  

alt

간혹 어느 웹사이트에 방문했을 때 이렇게 사진이 안뜨는 경우를 보신적이 있으실 겁니다. alt 속성은 위와같은 경우에 사진이 출력되지 않으므로 텍스트를 대신 출력해주는 역할을 합니다. 위처럼 말이죠. 그래서 사용자들이 사진을 볼 수 없더라도 글을 통해 저 사진이 무엇이겠구나 추측이 가능합니다. 사용법은 alt =" ...내용..." 입니다. 위의 예시는 alt = "alternate text for image" 이렇게 출력했겠죠? 하지만 사진이 잘 출력되는 사이트 같은 경우 대체 텍스트가 위처럼 출력이 안됩니다. 

height

간단하게 말씀드리면 사진의 크기를 조절할 수 있습니다. height은 세로 길이를 조절합니다. 기본 사진 크기가 100 x 100 이라고 가정해 봅시다. 저는 세로의 길이를 200으로 바꾸고 싶으면 단순히 height = "200"으로 바꿔주시면 됩니다. 그러면 100 x 200 크기의 사진이 출력됩니다.  

 

width

height과 반대로 이것은 사진의 가로 크기를 조절합니다. 마찬가지로 적용하는 방법은 위와 동일합니다. 

---

예시를 빼놓고 갈 순 없겠죠? 같이 확인해 보겠습니다.

저는 디즈니랜드의 사진을 출력하는 코드를 작성해보려고 합니다. 우선적으로 1) 디즈니랜드 사진의 링크가 필요하며 (src) 2) 사진이 안 나올 때 어떻게 텍스트로 출력할 것인지 (alt) 3) 가로 세로의 길이는 얼마로 정할지 (height,weight)을 결정해야 합니다. 

여러분들도 연습을 하실 수 있게 링크를 아래 걸어놓겠습니다.

http://www.travelfreak.com/wp-content/uploads/2013/11/Walt-Disney-World-Castle-Wallpaper-.jpg

저는 아래와 같이 사진이 안나올 때 대신 나오는 텍스트를 alt="디즈니랜드"로 하였고 가로 세로 길이는 각각 300으로 할당하였습니다. 그랬더니 아래처럼 사진이 출력되는 것을 볼 수 있습니다. 한 번 하나씩 따라 쓰시면서 연습을 해보세요. 링크는 복사 붙여넣기 하시면 됩니다.  

---

연습문제

문제 아래 링크를 활용하여 <결과>값이 나오도록 코드를 작성해 보세요. 가로 높이의 길이는 각각 500, 400이며 대체 텍스트는 "유니버셜 스튜디오" 로 작성해 주시면 됩니다.  

<결과>

<정답>

이미지정답.txt