HTML 기본태그 / 이미지 태그

HTML 기본태그 / 이미지 태그

안녕하세요 AimHo 입니다.

이번에는 HTML 기본태그 네 번째 이미지태그에 대해 알아보겠습니다.

지금까지는 웹 페이지의 글자와 관련된 태그를 알아보았다면, 이번에는 이미지를 넣는 방법에 대해 살펴보겠습니다.

위 타이틀도 이미지 태그가 사용된 예시라고 볼 수 있겠네요!

이미지 태그는 나중에 알게될 멀티미디어 태그와 비슷하므로 꼭 기억하고 있어야 합니다.

---

이미지 태그

이미지를 삽입할 때는 img 태그를 사용하는데 형태는 다음과 같습니다. 

<img/> 이 형태로 단독으로 사용하는데, 이미지에 필요한 정보(경로, 크기 등)는 이미지 태그의 속성에 입력합니다.

이미지는 직접 등록할 수 있고 아니면 인터넷에 존재하는 이미지의 경로를 넣어주어도 됩니다.

직접 등록할 경우에는 HTML 페이지와 같은 폴더에 둬야 합니다.

예시로 제 블로그의 프로필 사진을 넣어봤습니다.

Tip!)

웹 페이지를 개발하다 보면 종종 디자이너가 이미지를 만들지 않아도 넣거나 공간을 확보해야 하는 상황이 발생합니다. 이러한 경우 의미없는 이미지를 사용하는데, http://placehold.it에서 만들 수 있습니다.

이미지 경로에 'http://placehold.it/너비x높이' 형식으로 입력하면 아래와 같은 이미지를 얻을 수 있습니다.