[HTML] 11장, 최후의 문법 속성과 <img> 태그

지금까지 HTML의 가장 중요한 문법인 태그를 배웠다. 이번 시간에는 속성이라 하는 태그의 심화된 문법을 배울 것이다. 이제까지 글씨만 있으니 답답하다는 느낌이 들며 시각적 요소로 사진을 넣고 싶어진다. 사진을 넣는 방법을 살펴보자.

 

[ <img>: 이미지를 포함시킬 때 사용하는 태그 ]

 

 

위에 코드와 같이 <img> 태그를 삽입하고 새로고침을 해보면 사진은 보이지 않는다. 사진이 보이지 않는 이유는 그냥 img라고 한다면 어떤 이미지를 보여줄 것이라는 이야기가 없기 때문이다. 태그의 이름만으로는 정보가 부적할 때가 있다는 것이다. 그래서 이 태그라는 문법을 만든 컴퓨터 공학자들은 태그의 이름만으로는 정보가 부족하다는 것을 인식하고 고민 끝네 새로운 문법을 출현시킨다.

 

 

 

<img> 태그에 src 속성을 추가하였다. 어떤 이미지인지 알려주도록 약속된 속성이 source인데 너무 길기 때문에 줄여서 src로 쓴다. 여기에 우리가 원하는 이미지의 주소를 적으면 웹 브라우저는 그곳에 위치한 이미지를 표시한다.

 

태그를 확인하기 위해서는 이미지가 필요하다. 언스플래시(https://unsplash.com/)라는 사이트이다. 이 사이트에 있는 고품질 이미지들은 여러분이 저작권에 구애받지 않고 사용할 수 있는 공공재와 같다.

 

 

이 중 이미지를 임의로 선택해 보자. "coding"을 검색해서 이미지를 선택한 후 [Download free] 버튼을 누르면 이미지 파일을 내려받을 수 있다.

 

 

coding 이미지 파일을 현재 작업 중인 바탕화면의 web 디렉터리 안에 저장한다. 그 후 <img src="">에 다음과 같이 파일명을 저장하고 변경사항을 저장한다.

 

<img src="coding.jpg">

 

 

 

새로고침해 보면 다음과 같이 웹 페이지에 이미지가 나타나는 것을 볼 수 있다. 이미지가 너무 크면 이미지 크기 조절해서 자동으로 웹 브라우저의 크기에 맞게 이미지의 크기를 바꿀 수 있다.

 

이렇게 해서 이미지를 추가할 수 있다. 

 

<img> 태그를 통해 속성이라는 문법을 정리해 보자.

 

앞의 예제에서 src="coding.jpg"나 width="100%"와 같은 부분을 속성(attribute)이라고 한다. 그이고 이 속성은 어디에 두든 상관없다. 아무 위치에나 쓰면 되고, 태그가 태그의 이름만으로는 정보가 부족할 때 이 같은 속성을 통해 더 많은 의미를 부가할 수 있다고 이해하면 된다.

 

 

 

 

 

---

출처: 생활코딩! HTML+CSS+자바스크립트, 이고잉 지음