개발이글스
[HTML] 이미지태그 <img> 본문
<img>태그는 HTML문서에서 이미지를 정의할 때 사용합니다.
거의 모든 웹페이지에는 이미지가 필수로 들어갑니다.
이미지를 넣어줌으로써 좀더 생동감 있는 웹페이지를 만들 수 있기때문이죠.
<img src="이미지파일경로" alt="대체용테스트">. -->기본적인 이미지태그의 모습입니다.
여기서 src 는 이미지 소스의 URL을 뜻합니다.
!!!여기서 alt는 왜쓰는건가요?!!!
이미지가 나오지 않을경우에 대체용으로 나오는 텍스트라고 보시면 됩니다.
↓↓↓밑에 사진을 보면서 같이 이해해봅시다!!↓↓↓
<body>안에 제목과 이미지를 넣어줬습니다.
제목은 <h1>으로 사용해주었고, 이미지는 <img>태그를 사용하였습니다.
웹페이지로 구현한 모습은 이렇습니다!! 제목태그가 맨위에있고, 바로밑에 이미지태그를 이용해 넣어준 이미지가 구현되었습니다.
참고로, 이미지태그에 어떠한 css도 적용되지 않았기때문에 원본사진 픽셀 그대로 구현되었습니다.
그렇다면, VisualStudioCode 에서는 어떻게 이미지를 넣을수 있을까요?_?
이렇게 day1이라는 폴더안에 img폴더를 따로 만들어 내컴퓨터에서 이미지를 여기다가 옮겨준뒤 사용해줍니다.
이미지태그 안에있는 src에 "img/" 을 쳐주면 자동으로 이미지선택창이 나옵니다. 원하는 이미지를 눌러 src를 완성시켜줍니다.
느낀점:
평소에 웹페이지를 보면 이미지를 어떻게 넣었을지 참 궁금했는데 이렇게 쓰는거구나 ! 정확히 이해 했습니다.
이제 css를공부하며 삽입한 이미지들로 어떻게 꾸밀수 있고,다양한 크기조정등을 배우며 이미지태그를 깊이 이해할 계획입니다.
'Programming > HTML' 카테고리의 다른 글
| [HTML]입력태그 <form> <input> <textarea> <label> (0) | 2022.07.25 |
|---|---|
| [HTML]미디어 삽입 <audio> <video> (0) | 2022.07.25 |
| [HTML]표만들기 <table> <tr> <td> <th> <caption> (0) | 2022.07.25 |
| [HTML] <ul>__<ol>__<li> (0) | 2022.07.25 |
| [HTML] <h1~6>__<p>__<a>__<br> (0) | 2022.07.24 |
