'생활코딩' - WEB1 11. 최후의 문법 속성 & img

'생활코딩' - WEB1의 모든 저작권은 '생활코딩'에 있으며, 단순 공부 및 정리를 위한 수단으로 생각해주시면 되겠습니다.

---

Attribute 

'속성' 이라는 태그의 심화된 문법

 

<img>

이미지를 웹페이지에 포함시킬 때 사용하는 태그의 이름

<img> 라고만 써놓으면 어떤 이미지를 보여줄 것인지에 대한 내용이 없겠죠.

태그의 이름만으로는 정보가 부족할 때가 있다는 거죠. 그래서 고민하다가 새로운 문법을 만들게 되었는데,

어떤 이미지인지를 알려주기로 약속된 속성이 'source' 인데 기니까 'src'로 하기로 합니다.

 

<img src="원하는 이미지의 주소">

 

* unsplash 

퀄리티 높은 이미지들을 저작권에 구애받지 않고 사용할 수 있는 사이트

 

현재 작업하고 있는 바탕화면의 web이라는 디렉토리에 다운로드받은 이미지를 저장,

파일명을 수정하든 하지 않든 그 파일명대로

<img src="이미지파일명.jpg"> 라고 입력을 하고 저장을 한 다음 웹페이지에서 리로드해보면 

이미지가 보이는 것을 확인할 수 있음.

 

<img src="이미지파일명.jpg" width="100"> 

크기 조절 속성 width 숫자에 %도 넣을 수 있음.

 

이 속성의 위치는 상관이 없다.

<img src="이미지파일명.jpg" width="100"> 

<img width="100" src="이미지파일명.jpg">  

같은 내용.

 

태그만으로 부족할 때 이런 속성을 통해 더 많은 의미를 부여할 수 있게 된 것이다.