html 이미지(img) 태그와 속성 알아보기
html 이미지(img)태그와 속성 알아보기
이미지는 텍스트보다 효과적으로 정보를 제공하고, 웹페이지의 디자인을 향상시키는데요! 처음 html을 배우고 글자 태그만 사용해서 문단 형식의 html문서만 작성하다가 이미지 태그를 사용해서 처음 웹페이지에 이미지를 삽입하니 이제야 웹페이지를 구상하고 있는 것 같았답니다.ㅎ
html 이미지 태그
<img src="puppy.jpg" alt="강아지">
실행결과
1. <img> 태그
- 이미지를 나타내줄 수 있는 태그
- 단독태그
- 인라인요소 성질
- 이미지 파일 경로나 대체 텍스트 등을 필수 속성으로 가짐
2. src 속성
- 이미지 태그는 이미지를 화면에 띄우는 태그이지만 어떤 이미지를 띄울지는 반드시 속성으로 선언해야 함
- src="파일경로" > 이미지 파일의 경로를 속성값으로 지정함
- 파일 경로를 올바르게 선언하지 않으면 이미지가 표시되지 않음
<img src="파일경로">
3. alt 속성
- alt 속성은 이미지가 로드되지 않았을 때 나타나는 대체 텍스트
- alt="대체문"
- 웹 접근성에 의한 필수요소
- 검색엔진최적화(SEO)에 도움이 됨
<img src="파일경로" alt="대체문">
★중요★ 이미지파일 경로추적
1) 현재 html 문서와 이미지 파일의 위치가 같은 경우 = "파일이름.확장자"
<img src="puppy.jpg" alt="강아지">
<img src="jpg.jpg" alt="jpg">
<img src="png.png" alt="png">
2) 현재 html 문서와 이미지 파일이 다른 위치에 있을 경우
경우 1. 폴더안의 파일을 가지고 오고 싶을 경우 ="폴더/파일이름.확장자"
<img src="img_1/a01.jpg" alt="1번이미지">
경우 2. 폴더밖의 파일을 가지고 오고 싶을 경우 ="../파일이름.확장자"
<img src="../a02.jpg" alt="예시2">
<img src="../../../../big.jpg" alt="big">
3) 현재문서와 같은 위치의 파일을 검색하고 싶을 때 ="./"
<img src="./jpg.jpg" alt="">
4) 웹에서 이미지 소스를 가져올 경우 ="url"
<img src="https://i.pinimg.com/564x/4e/5a/17/4e5a172d72dea34110f41add46010c58.jpg" alt="웹이미지">
<figure> 태그
이미지나 사진, 삽화 같은 콘텐츠를 넣을때 사용하는 태그입니다. 이미지 태그를 단독으로 사용하게 될 경우 인라인으로 계속 이어지기 때문에 특정한 박스 안에 이미지를 넣어야해요.
<figure>
<img src="jpg.jpg" alt="이미지">
</figure>| <figure> 태그 없을 때, | <figure> 태그 있을 때, |
|
<img src="puppy.jpg" alt="강아지">
|
<figure>
<img src="puppy.jpg" alt="강아지">
</figure>
|
 |
 |
참고) ftp 파일 전송시 유의사항
이미지 파일도 같이 전송해야하며 전송하기 전 파일 추적 경로를 "파일명.확장자"로 수정해야한다.
참고) 파일 확장자 종류
| 확장자 | 특징 | 비고 |
| jpg | - 가장 대표적인 이미지 표현방식 - 이미지의 색상을 가장 잘 표현할 수 있는 확장자 - 용량이 가볍다 |
투명한 배경은 사용할 수 없다(누끼 사진 사용x) |
| png | 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있는 확장자 | jpg 보다 용량이 무겁다 |
| gif | - 움직이는 이미지를 표현시 사용한다 - 투명한 배경 처리가 가능하다 |
256가지의 색상 표현만 가능하다(RGB 컬러) |
| webp | 기존 확장자를 인코딩 후 웹페이지의 최적화된 확장자로 변환한 것이다 |
Think,
폴더와 파일 관리를 잘해야 나중에 이미지 파일 경로를 추적할 때 오류가 생기지 않을 것이다. 이미지를 저장할 때 파일이름을 대충 저장하지 말고 직관적이고 모두가 확인할 수 있는 파일명을 작성하는 연습을 하자.