[생활코딩] 최후의 문법 속성과 img [Web1]

2022-10-10 최대 1 분 소요

이번 강의에서는 태그의 심화된 문법인 속성(attribute) 를 배웠다.

그리고 인기 태그 중 하나인 img 태그도 살펴보았다.

이미지 넣기

이미지를 넣는 태그의 이름은 img다.

<img>

이렇게만 선언하면 이미지가 로딩될까?

아니다. 어떤 이미지를 불러올 지에 대한 정보가 없기 때문이다.

태그를 만든 사람은 태그 이름만으로 정보가 부족하다는 것을 알게 되었다.

그리고 새로운 문법을 도입한다.

그것이 바로

추가한 내용은 다음과 같다

(이미지를 다운하여 같은 프로젝트 폴더 내에 위치했다는 가정 하에)

<img src="1.png" width="100%">

위의 코드에서 src가 바로 속성이다.

또 속성의 값인 아래 주소는 이미지의 이름이다. 저렇게 로컬위치를 지정할 수도 있고,

src = https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png 와 같이 링크로 주어도 된다.

그리고 width라는 속성값을 이용해 %나 숫자를 이용하여 원하는 크기로 조정할 수 있다.

귀여운 티모 ^오^