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 같은 링크요.
저같은경우는 고기 이미지를 넣고싶기 때문에 고기 이미지 링크를 찾겠습니다.
이게 좋겠네요.
그럼 이 링크를 src 값에 넣어볼까요?
<img 표현할것="표현할 값">
라고 넣으면 되겠네요.
넣어보겠습니다.

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

???? 이게 뭐죠?
고기 사진이 너무 크잖아요.
왜 고기 사진이 너무 클까요?
"크기"를 지정을 안해줬기 때문이죠.
또 속성이 나갈 차례네요.
이번에 사용할 속성은 "width" 라는 속성인데요,
width가 영어로 "폭"이란걸 감안하면 대충 크기를 나타내는 거라고 생각할 수 있겠군요.
크기를 한... 200px 정도로 설정해볼까요?

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

잘 표시됨을 확인할 수 있습니다.
근데 맛있었다. 바로 옆에 사진이 있으니 불편하군요.
밑으로 내려볼까요?
이전 시간에 배웠던 br 태그를 활용해보겠습니다.

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

감사합니다! 다음 시간에 뵙겠습니다.
'웹코딩 > HTML' 카테고리의 다른 글
html 5강ㅣhtml, head, body 태그 (7) | 2020.12.31 |
---|---|
html 4강ㅣtitle 태그 (4) | 2020.12.30 |
html 2강ㅣbr 태그 (5) | 2020.12.27 |
html 1강ㅣ태그의 의미 (5) | 2020.12.26 |
html 0편ㅣ환경 설정 (10) | 2020.12.26 |