html 3강ㅣimg 태그

img 태그라... 무슨 역할일 것 같나요?

대충 아셨을 분도 있을 거 같은데요,

바로 "이미지"를 보여주는 역할을 하는 태그입니다.

 

여러분은 img 태그가 어떻게 생겼을 것 같나요? <h1> 태그처럼 2개일까요?

아니요. img 태그는 1개입니다.

 

왜 1개일까요?

그 이유는 간단합니다. img 태그는 무엇을 감싸면서 "이건 이거다" 하는 게 아니거든요.

그냥 이미지 그 자체입니다.

생각해보세요. 글자를 감싸면서 "이건 이미지야" 할 순 없잖아요?

그래서 img 태그는 하나뿐이랍니다.

<img>

근데, 이렇게 되면 문제가 생깁니다.

어느 이미지를 표현한다는건지 html이 알 수가 없잖아요.

심지어 사람도 몰라요. 이건 무슨 이미지를 뜻하는지 아무도 모릅니다.

그래도 궁금하니 한번 해볼까요?

이렇게 해보겠습니다.

열어보면 아주 완벽하게 img 태그를 무시를 까는 걸 볼 수 있습니다.

그럼 어떻게 해야할까요?

여기서 중요한데요. 바로 "속성" 이란 것을 이용해야 합니다.

속성

속성이 뭘까요?

다들 단어의 뜻은 알고있을거라 생각되는데요,

사전을 찾아보니 

"사물의 본질을 이루는 성질. 그것이 없이는 그 사물을 생각할 수 없는 조건임."

이라고 되어있네요.

그럼 대충 html에서의 속성은 대충 태그의 성질을 나타내는 거라 볼 수 있겠네요.

 

그래서 그 "속성" 은 어디에 넣는걸까요?

일단 넣을 부분이 있어야 나타내든지 말든지 하죠.

 

바로 여기에 넣습니다.

<img 여기>

제가 이전 시간에 h1 태그같은 경우에 내용을 안쪽에 넣으면 안된다고 한 이유가 이겁니다.

거긴 "속성"을 나타내는 곳이거든요.

 

그럼 속성을 표현하는 방법은 뭘까요?

이런식으로 표현하는데요,

<img 표현할것="표현할 값">

표현할 것을 앞에 두고 "=" 을 한 다음에 표현할 값을 ""로 감싸줍니다.

저같은 경우에는 이미지를 표현하고 싶단 말이에요.

그럼 어떻게 해야할까요?

바로 "src" 를 이용하면 됩니다.

 

src는 img 태그에서만 이용되는 건 아닙니다.

그냥 파일을 가져오는 "속성" 이라고 보시면 되는데요,

img태그 안에 있는 src 속성의 값은 html이

"아 img 태그 안에 src 속성을 넣었으니 이건 이미지겠구나" 하면서 이미지로 읽게됩니다.

그럼 src 안에는 뭘 넣어야 할까요?

바로 링크를 넣을수도 있고 파일 이름도 넣을 수 있습니다.

 

여기서 말하는 링크는 "이미지"의 링크를 말하는거지 tistory.com과 같은 사이트를 말하는 게 아닙니다!

즉 확장자가 .png나 .jpg, .svg와 같은 링크를 넣어야 한다는거죠.

sans.com/wasans.png 같은 링크요.

 

저같은경우는 고기 이미지를 넣고싶기 때문에 고기 이미지 링크를 찾겠습니다.

https://get.pxhere.com/photo/dish-food-bbq-eat-meat-barbecue-pork-cuisine-beef-steak-grill-prosciutto-tasty-raw-frisch-prepare-ham-grilled-meats-red-meat-roast-beef-animal-source-foods-kobe-beef-sirloin-steak-salt-cured-meat-back-bacon-capicola-kassler-491407.jpg

이게 좋겠네요.

 

그럼 이 링크를 src 값에 넣어볼까요?

<img 표현할것="표현할 값">

이니까 src="https://get.pxhere.com/photo/dish-food-bbq-eat-meat-barbecue-pork-cuisine-beef-steak-grill-prosciutto-tasty-raw-frisch-prepare-ham-grilled-meats-red-meat-roast-beef-animal-source-foods-kobe-beef-sirloin-steak-salt-cured-meat-back-bacon-capicola-kassler-491407.jpg"

라고 넣으면 되겠네요.

넣어보겠습니다.

이렇게 하고 파일을 열었더니...

 

???? 이게 뭐죠?

고기 사진이 너무 크잖아요.

 

왜 고기 사진이 너무 클까요?

"크기"를 지정을 안해줬기 때문이죠.

또 속성이 나갈 차례네요.

이번에 사용할 속성은 "width" 라는 속성인데요,

width가 영어로 "폭"이란걸 감안하면 대충 크기를 나타내는 거라고 생각할 수 있겠군요.

크기를 한... 200px 정도로 설정해볼까요?

 

이렇게 추가해주고 새로고침해보면..

잘 표시됨을 확인할 수 있습니다.

 

근데 맛있었다. 바로 옆에 사진이 있으니 불편하군요.

밑으로 내려볼까요?

 

이전 시간에 배웠던 br 태그를 활용해보겠습니다.

이렇게 해주면 잘 표시됨을 알 수 있습니다.

 

감사합니다! 다음 시간에 뵙겠습니다.