[HTML] 5. 속성

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다.

www.opentutorials.org/course/3084/18407

최후의 문법 속성과 img - 생활코딩

 

---

이미지 첨부

 

이렇게 텍스트만 있는 페이지는 너무 삭막하다.

 

이미지를 첨부해보자.

 

이미지를 첨부할 때 사용하는 태그는 <img>이다.

하지만 이 태그의 이름만으로는 내가 원하는 이미지를 불러올 수 없다.

 

내가 원하는 이미지를 불러오기 위해 속성(attribute)을 적용하게 되는데, 이 때 <img> 태그에 source의 줄임말인 src를 붙여본다.

이 때, src 옆에 내가 첨부하고자 하는 이미지의 주소를 함께 입력한다.

 

<img src="">

 

직접 이미지를 띄워보는 실습을 하기 위해 무료로 이미지를 사용할 수 있는 사이트를 이용해보자.

 

unsplash.com/

Beautiful Free Images & Pictures | Unsplash

위 사이트에서 마음에 드는 이미지를 하나 선택한 후 1.html 파일을 저장해두었던 WEB 폴더로 사진을 저장해보자.

 

 

WEB 폴더에 저장하면 에디터에서도 다운로드 받은 사진을 위와 같이 확인할 수 있다.

 

사진의 이름을 "sample.jpg"라고 저장했기 때문에 태그를 아래와 같이 바꾼 후 웹페이지를 새로고침한다.

<img src="sample.jpg" width="100%">

이 때, 가지고 있는 사진의 크기가 크기 때문에 width="100%" 라는 구문도 추가하는 것이 좋다.

width~를 추가하면 웹페이지의 크기를 자유자재로 바꾸어도 이미지가 웹페이지의 크기에 맞추어서 자동적으로 크기 조절이 된다.

 

 

이미지를 첨부한 웹 페이지는 위와 같다.

 

---

속성 Attribute

<img src="sample.jpg" width="100%">

<img width="100%" src="sample.jpg">

위의 실습에서 작성한 src="sample.jpg" 와 width"100%" 는 속성(Attribute)이다.

 

이 속성들의 위치는 바꾸어도 아무 상관이 없다.

 

태그의 이름만으로는 정보가 부족할 때 이러한 속성들을 통해 정보를 채울 수 있다.