HTML 쉽게 배우기 | 이미지 <img>

안녕하세요,

오늘은 이미지 태그를 살펴볼게요.

 

외국 속담에 "A picture is worth a thousand words" 이라는 말이 있습니다.

"사진은 천 마디 말의 가치가 있다" 라는 뜻이죠.

 

글로 아무리 자세하고 상세하게 써도 사진 한장만큼 확실하게 메세지를 전달하기는 어렵죠.

 

인터넷도 같습니다.

여러분 아마존에서 쇼핑 많이 하시나요?

만약에 아마존이 사진 한장 없이 오로지 글로만 되있다면 어떨까요?

생각만 해도 답답하고 불편하죠?

 

웹사이트를 만들때 사진을 사용하는건, 예쁜 디자인을 위해서도 있지만 사용자에게 정보를 좀더 정확하게 전달하기 위함도 있습니다.

 

 

 

그러면 이제 HTML코드를 볼게요.

 

이미지는 <img /> 태그를 사용합니다.

혹시 1편에서 요소는 열림 태그와 닫힘 태그로 이루어져 있다고한거 기억나시나요?

그런데, 이미지 태그는 닫힘 태그가 없는 요소중 하나 입니다.

이런 태그를 셀프 클로징 태그라고 부름니다.

이미지 태그를 사용하기 위해서는 몇 가지의 속성이 필요합니다.

이 속성들은 src 그리고 alt 입니다.

 

HTML 이미지 태그 예시

<img src="img1.jpg" alt="가을 나무">
여기서 src 는 소스, 즉 이미지의 출처를 뜻합니다.
src 는 이미지의 주소가 될수도 있고, HTML 문서와 같이 포함된 위치가 될수도 있습니다.

alt 는 대체 텍스트라는 뜻이고, 이미지에 대한 설명을 할수 있습니다.

 

아~. 1도 모르겠슴. 🤪

 

소스 부터 볼게요.

위에서 말한 것처럼 소스는 이미지의 출처 입니다.

여기서 출처라 함은, 브라우저한테 이 이미지를 어디서 찾을수 있는지를 알려 주는거에요.

만약에 인터넷에 있는 이미지를 사용하고 싶은 경우, 그 이미지의 주소가 소스가 되는거죠.

 

구글에서 이미지 주소 찾는 방법

예를 들어, 구글 이미지에서 "가을" 을 검색하고

검색 결과중 하나를 클릭하면 오른쪽에 그 이미지가 좀더 크게 나오죠.

그리고 오른쪽에 나온 이미지에서 마우스 오른쪽 클릭을하면 이미지 주소를 복사할수있는 옵션이 보입니다.

제가 복사한 이미지의 주소는 "https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/02/a0002718/img/basic/a0002718_main.jpg" 입니다.

 

이 주소를 이미지 태그의 소스 속성에 넣으면 <img src="https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/02/a0002718/img/basic/a0002718_main.jpg">; 이렇게 코드를 작성할수 있습니다.

 

만약에 내가 가지고 있는 이미지를 사용하고 싶으면 소스에 그 이미지로 가는 경로를 주면 됩니다.

경로는 현 HTML문서를 시작점으로 합니다.

이미지 파일 이름 앞에 "./" 을 사용하거나, 아니면 아무것도 없이 그냥 이미지 이름만 넣으면 그 이미지 파일이 현 HTML문서와 같은 위치에 있다는 뜻입니다.

이미지 파일 이름 앞에 "../"을 사용하면 이미지 파일이 현 HTML문서 전의 폴더에 있다는 뜻입니다.

예1:
     파일 구조:
     project
           - index.html
           - img1.jpg
     경로: "./img1.jpg" 또는 "img1.jpg"

예2:
     파일 구조:
     project [./]
           - images [images/]
                 - img1.jpg [img1.jpg]
           - index.html
     경로: "./images/img1.jpg"

예3:
     파일 구조:
     project [../]
          - images [images/]
                - img1.jpg [img1.jpg]
          - htmls
                - index.html
     경로: "../images/img1.jpg"

 

 

 

 

alt (대체 텍스트)

여러분, 인터넷 하면서 이런거 보신적 있나요?

대체 텍스트 예시

이미지는 안나오고, 무슨 이미지 아이콘 같은게 있고 그 옆에 글이 쓰여있는 경우 (가끔 글이 없는 경우도 있죠)?

여기서 보이는 이 글이 alt 입니다.

 

그러면 alt 의 목적은 정확히 뭘까요?

alt 의 본 목적은 스크린 리더한테 이미지의 정보를 주기 위합 입니다.

 

전 편에서도 말했듯이 시각 장애가 있으신 분들은 스크린 리더에 의존해서 웹사이트에 있는 정보를 접합니다.

이미지를 볼수 없기 때문에 스크린 리더가 읽어주는 alt 의 내용만으로 어떤 이미지가 있고 그 이미지의 정보가 무었인지를 알게 됩니다.

 

만약에 이미지가 내용과 아무 상관없고 어떤 정보도 주지 않는다면 alt 를 비워두면 됩니다 (alt="").

 

 

 

 

이미지의 크기는 두 가지 방법으로 조절할수 있는데요,

첫번째는 이미지 태그에 width(넓이) 와 height(높이) 속성을 사용하는 방법이고,

두번째는 CSS 를 사용하는 방법입니다.

 

CSS 를 사용하는 방법은 나중에 CSS 편에서 자세히 알아볼께요.

 

그럼, width 와 height 속성은 어떻게 사용 할까요?

width 에는 원하는 넓이 값을 주면 되고

height 에는 원하는 높이 값을 주면 됩니다.

 

width="300" 이라고 쓰면 이미지의 넒이를 300 픽셀 으로 맞추고

height="300" 이라고 쓰면 이미지의 높이를 300 픽셀 으로 맞춤니다.

 

이렇게 그냥 숫자만 제공하면 기본으로 픽셀이 사용되고, 퍼센트도 가능합니다.

 

이미지에 넓이만 제공하면 이미지의 높이는 자동으로 비율에 맞게 바뀝니다.

반대로 높이만 제공하면 이미지의 넓이는 자동으로 비율에 맞게 바뀝니다.

 

 

 

 

오늘도 수고하셨습니다.

 

끝!