이번 시간에는 html 문서에 이미지를 삽입하는 태그에 대해 살펴보겠습니다. 사실, 일반적인 커뮤니티 게시판이나 댓글을 달 때 많이 써본 분들도 있어서 익숙하겠지만, 세부적인 속성 값과 적용 방식에 대해서 다시 한번 제대로 배워본다는 느낌으로 편하게 살펴보시기 바랍니다.
○ <img> 태그와 대표 속성 값
일단 기본적으로 이미지를 html 문서에 삽입하기 위해서는 <img> 태그를 사용합니다. 종료 태그 없이, 단독으로 사용하게 되죠. 하지만 대부분의 경우 <img> 태그만 단독으로 사용하는 경우는 없습니다. 바로 src라는 속성을 부여하게 됩니다. 이 src는 이미지의 경로를 의미합니다.
<img src="상대경로">
위에서 상대 경로로 경로 작성 속성 예시를 적어두었는데, 말 그대로 해당 태그가 작성되는 html 파일 경로를 기준으로 상대 경로를 작성해야 하기 때문입니다. 즉, 해당 html 문서와 같은 경로에 있는 이미지 파일일 경우에는 간단하게 이미지 파일 명만 작성해 주면 됩니다. 하지만 해당 문서 하위 폴더에 존재한다면 폴더 명을 작성해 줘야 합니다.
html과 같은 경로에 있는 sample.jpg와 해당 html 파일이 있는 폴더 하위의 images라는 폴더에 있는 sample2.jpg를 표시한다면, 태그는 아래와 같이 작성됩니다.
<img src="sample.jpg">
<img src="images/sample2.jpg">
여기에 이미지를 설명하는 메타 태그 속성으로서 alt를 사용하게 됩니다. 이미지가 정상적으로 로딩되지 않았을 때 출력되거나 혹은 스크린 리더가 읽는 값으로 사용됩니다. 만일 사이트의 메뉴로 사용되는 이미지라면, 해당 메뉴 이미지를 클릭했을 때 유저가 보게 되는 내용을 작성해 줍니다("최신상품", "홈 화면"...) 물론 단순 아이콘, 리스트용 불릿 등의 콘텐츠가 아닌 이미지에는 값을 넣지 않고 "" 처리를 하는 것이 좋습니다.
<img src="sample.jpg" alt="과일">
<img src="images/sample2.jpg" alt="생선">
이제 이미지 사이즈를 조절하는 속성에 대해서도 알아보겠습니다. 우선 간단하게 width, height 속성을 사용해 속성 값을 부여하면 됩니다. width나 height에 숫자를 입력하면, 지정된 픽셀(px)로 이미지를 표시하게 됩니다. 해당 픽셀 크기로 고정된 이미지 크기를 표시하게 됩니다.
하지만 해당 숫자 값을 %로 표시하게 되면, 이 때는 출력 방식이 달라집니다. 현재 이미지가 출력되는 브라우저 전체 가로 or 세로 크기를 기준으로 상대적인 크기를 출력하게 되죠. 만일 width 값을 100%로 지정했다면, 브라우저 크기를 줄였을 때 작아진 브라우저를 채울 만큼의 사이즈로 자동으로 변하게 됩니다. 참고로 width 값만 지정하게 되면, 해당 크기를 기준으로 height는 자동으로 변환됩니다. 아래와 같이 동일한 이미지를 여러가지 방식으로 표현해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><img src="https://url.kr/4yz7da" alt="샘플"></p>
<p><img src="https://url.kr/4yz7da" alt="샘플" width="50%"></p>
<p><img src="https://url.kr/4yz7da" alt="샘플" width="100" height="100"></p>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(6) - 하이퍼링크 삽입 (0) | 2023.03.03 |
|---|---|
| 2. 내용 입력하기(5) - 오디오/비디오 삽입 (0) | 2023.03.02 |
| 2. 내용 입력하기(3) - 표 생성하기 3 (0) | 2023.02.27 |
| 2. 내용 입력하기(3) - 표 생성하기 2 (0) | 2023.02.26 |
| 2. 내용 입력하기(3) - 표 생성하기 1 (0) | 2023.02.24 |
