이미지

픽셀
HTML에서 무언가의 크기를 설정할 때는 기본적으로 '픽셀(px)' 단위를 사용합니다.

픽셀은 화면을 구성하는 기본 단위입니다. 아래 이미지를 보세요.

source: imgur.com

별 이미지의 일부를 확대해서 보니까 작은 정사각형 단위로 되어 있죠? 각 정사각형을 픽셀이라고 부릅니다. 만약 어떤 이미지의 가로 길이가 100px로 설정되었다면, 가로로 저 작은 정사각형 100개가 있다는 거죠.

폰트 크기
폰트 크기도 픽셀로 설정하는 경우가 많은데요. 폰트 크기가 24px로 설정되어 있으면 폰트의 세로 길이가 24px이라는 뜻입니다.

퍼센트
길이를 픽셀 말고 퍼센트(%)로 설정할 수도 있습니다.

HTMLCSS
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="100%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="50%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="25%">