<img> 태그
· 이미지를 삽입하는 <img> 태그
<img> 태그에서 알아야 할 속성은 src와 alt입니다. src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할을 하며 반드시 있어야합니다.
<웹에서 사용하는 대표적인 이미지 파일 형식>
| 종류 | 설명 |
| GIF | 표시할 수 있는 색상 수는 최대 256가지입니다. 파일 크기가 다른 이미지 파일 형식보다 작아서 아이콘, 블릿 등 작은 이미지에 주로 사용합니다. |
| JPG/JPEG | GIF보다 색상과 명암을 다양하게 표현할 수 있습니다. 이미지 수정/저장 과정을 반복할 경우 화질이 떨어질 수도 있습니다. |
| PNG | 네트워크용으로 개발된 파일 형식으로, 다양한 색상을 표현하면서 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용합니다. |
※ 이미지나 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야합니다. 경로란 HTML 문서에서 이미지 파일이 있는 곳까지 찾아가는 지를 알려줍니다.
| 종류 | 설명 |
| 웹 문서가 같은 폴더에 있는 경우 | <img src ="이미지 경로" alt ="대체 이미지"> |
| 웹 문서가 같은 폴더에 없는 경우 | <img src ="상위 디렉토리/이미지 경로" alt="대체 이미지"> |
width, height 속성
· 이미지 크기를 조절하는 width, height 속성
<img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시됩니다. 웹 브라우저 창에서 보이는 이미지 크기를 조절하고 싶다면 width와 height 속성으로 이미지의 높이를 지정할수 있습니다.
| 종류 | 설명 |
| % | 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정합니다. |
| px | 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시합니다. |
'Doit!-개인공부(HTML+CSS+자바스크립트)' 카테고리의 다른 글
| 00. DOIT - 공부에 들어가기 전 (1) | 2024.04.17 |
|---|---|
| 09. DOIT - 입력 양식 작성하기(폼 삽입하기) (0) | 2024.04.17 |
| 07. DOIT - 웹 문서에 다양한 내용 입력하기(표 만들기) (1) | 2024.04.03 |
| 06. DOIT - 웹 문서에 다양한 내용 입력하기(목록 만들기) (1) | 2024.04.03 |
| 05. DOIT - 웹 문서에 다양한 내용 입력하기(택스트 입력하기) (1) | 2024.04.02 |
2024. 4. 4. 15:56
