💡이미지 삽입
이미지를 삽입할 때 <img> 태그를 사용한다.
<img> 태그는 단독 태그이다.
<img> 속성
1. img.src
src는 source의 약자로, 이미지의 경로를 나타낸다.
경로는 절대 경로와 상대 경로 모두 사용할 수 있다.
<img src="images/manatee1.jpg">
<img src="images/manatee2.jpg" alt="매너티">
2. img.alt
대체 텍스트(alternate text)로서 이미지를 대신해서 출력할 문자열이다.
이미지가 깨지는 경우 alt에 작성한 내용이 출력된다.
alt는 필수 속성이지만, 작성하지 않아도 이미지가 출력되기는 한다.
공공기관 프로젝트에서는 alt 속성을 음성으로 읽어주는 경우가 있으므로 alt 작성을 반드시 작성하도록 한다.
3. img.width
4. img.height
사진의 크기를 알고 싶을 때 개발자 도구를 활용할 수 있다.
해당 이미지의 크기는 width 492 x height 640이다.
<img src="images/manatee1.jpg" width="49" height="64"><hr>
<img src="images/manatee1.jpg" width="491" height="640"><hr>
<img src="images/manatee1.jpg" width="982" height="1280"><hr>
<img src="images/manatee1.jpg" width="4910" height="6400"><hr>
이미지 크기를 -10배, 1배, 2배, 10배 등으로 자유롭게 조정할 수 있다.
그런데 화면에 출력되는 크기를 줄이거나 늘린다고 해서 파일의 용량까지 줄어들거나 늘어나지 않는다.
실제 파일의 용량이 100KB이라면 크기가 달라져도 똑같이 100KB이다.
만약 쇼핑몰을 운영한다고 하면 같은 사진을 썸네일로 쓰기도 하기 때문에 따로 사진을 만들 필요 없이 하나의 사진만으로 여러 곳에 다른 크기로 사용하는 게 가능해진다.
<img src="images/manatee1.jpg" width="500" height="200">
<h2>납작</h2>
<img src="images/manatee1.jpg" height="200">
만약 weight나 hegith를 직접 계산하기 어려울 경우 둘 중 하나만 쓰면 원본 종행비를 기준으로 자동 계산하여 채워 넣는다.
<img src="images/manatee1.jpg" border="10">
border 속성으로 사진의 외곽선을 생성할 수 있다.
외곽선의 색상은 바꿀 수 없다.
내 이름은 매너티
<img src="images/manatee1.jpg" vspace="20" hspace="20">
당신을 기다렸어요.
상하 여백은 vspace, 좌우 여백은 hspace으로 설정할 수 있다.
HTML 속성
1. 필수 속성 (Required)
필수 속성은 반드시 작성해야 하는 속성이다.
<img> 태그 한정, src, alt는 필수 속성이다.
2. 선택 속성 (Optional)
선택 속성은 필요시에만 작성하는 속성이다.
width, height가 선택 속성에 속한다.
