Posis

[HTML] 이미지 사용하기 본문

HTML, CSS

[HTML] 이미지 사용하기

CooNiHong 2023. 1. 4. 19:12

img 태그

웹 문서에 이미지를 삽입할 때 사용합니다.

img 속성 종류

  • src: 이미지 파일 경로
    • ./ 현재 폴더
    • ../ 상위 폴더
  • alt: 이미지를 설명하는 대체 텍스트, 시각장애인들이 사용하는 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌(웹 접근성)
<img src="images/tangerines.jpg" alt="레드향">
<h1>레드향</h1>

이미지 크기 지정하기

이미지 크기는 보통 CSS에서 설정하지만 HTML에서도 가능합니다.

<p>원래 크기의 이미지</p>
<img src="images/salad.jpg" alt="레드향">
<p>width="50%", height="50%"로 지정한 이미지</p>
<img src="images/salad.jpg" alt="레드향" width="50%">  
<p>width="150"으로 지정한 이미지</p>
<img src="images/salad.jpg" alt="레드향" width="150">

 

728x90

'HTML, CSS' 카테고리의 다른 글

[CSS] 선택자와 우선순위  (0) 2023.01.05
[HTML] 표 만들기  (0) 2023.01.04
[HTML] 목록 만들기  (0) 2023.01.04
[HTML] 텍스트 태그  (0) 2023.01.04
[HTML] 시맨틱 태그(Semantic Tag)란?  (0) 2023.01.03