[생활코딩] WEB1(HTML_04) 최후의 문법 속성과 img

* Windows 운영체제 기준으로 작성되었습니다.

 

§ 최후의 문법 속성 & img → Click!

 

지금까지의 웹 페이지에는 글밖에 없어 무난하게 보였습니다. 이미지를 넣어 기존보다 조금 더 화려한 페이지를 만들어봅시당. 이미지를 넣기 위해 사용하는 태그는 <img>입니다. <img> 태그의 경우 단순히 태그만 작성한다고 해서 이미지가 입력되지는 않습니다. 어떤 이미지인지를 나타내기 위한 속성들도 포함시켜야 이미지를 입력할 수 있다. src(source)를 활용해 이미지의 주소를 적어주면 <img>태그의 위치에 이미지를 넣어주게 됩니다. 이 때 꼭 이미지 파일의 확장명까지 작성해주어야 이미지가 로드됩니다. 이미지의 크기를 조절하고 싶을 땐 width 속성을 활용해주면 됩니다. width 속성의 경우 필수는 아니므로 (width="원하는 크기") 이렇게 표시해주었습니다.

<img src="이미지의 주소" (width="원하는 크기")>

속성(attribute)는 위치에 상관이 없기 때문에 width나 src의 순서를 바꾸어 적어줘도 문제가 되지 않습니다. 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해 더 많은 의미를 부과해줄 수 있습니다.