HTML - img (이미지)

이미지

 

- 웹 페이지에 이미지 넣기

 

<img src="" alt="">

 

- src 속성 : 출력하고자 하는 이미지의 경로
- alt 속성 : 해당 이미지에 대한 설명 (이미지 출력 실패시 대신 출력되는 문구)
- width 속성 : 이미지 너비
- height 속성 : 이미지 높이
- alt 속성은 화면 읽어주는 프로그램(Screen Reader)에서 그림을 읽을 때 사용하는 속성이기 때문에
   반드시 채워놓아야 한다

---

width, height를 모두 설정하면 이미지 비율이 깨질 가능성이 높다

<img 
src="https://cdn.huffingtonpost.kr/news/photo/202101/105669_198798.jpeg" 
alt="펭귄이 화나있는 사진"
width="100"
height="100">

---

width 또는 height를 하나만 설정하면 나머지 값은 자동으로 비율을 유지하며 조절된다

<img 
    src="https://cdn.huffingtonpost.kr/news/photo/202101/105669_198798.jpeg" 
    alt="펭귄이 화나있는 사진"
    width="100" height="auto">

<img 
    src="https://cdn.huffingtonpost.kr/news/photo/202101/105669_198798.jpeg" 
    alt="펭귄이 화나있는 사진"
    height="200">

---

h, p, hr태그는 기본적으로 박스 취급을 하는 태그다(block 요소)

<h1>h1</h1>
<h2>h2</h2>

 img 태그는 기본적으로 글자 취급을 하는 태그다 
         (글자들 사이에서 문단을 해치지 않음, inline 요소)

<a href="https://cdn.huffingtonpost.kr/news/photo/202101/105669_198798.jpeg">link1</a>
<a href="#">link2</a>

---

위에서 말한 alt 속성값은 

<img src="./images/펭귄.jpg" alt="펭귄이 졸고있는 사진" width="150">
<img src="./image/펭귄.jpg" alt="펭귄이 졸고있는 사진" width="150">

 

두번째 사진같은 경우 image/펭귄 으로 주소값이 맞지 않기 때문에 alt 안 값이 출력되게 된다