HTML Images Syntax.
<img src="이미지_파일_경로" alt="대체_텍스트"><img> : 이미지를 표시하기 위한 HTML 태그입니다.
src : 이미지 파일의 경로를 지정하는 속성입니다.
이미지_파일_경로에는 이미지 파일의 URL 또는 상대 경로를 입력합니다.
alt: 대체 텍스트(alternative text)를 지정하는 속성입니다.
이미지가 로드되지 못하는 경우나 스크린 리더 등에서 사용됩니다.
<!DOCTYPE html>
<html>
<body>
<p>아기 고양이</p>
<img src="https://cdn.pixabay.com/photo/2023/07/05/04/45/european-shorthair-8107433_1280.jpg" alt="FKitty">
</body>
</html>아기 고양이
<!DOCTYPE html>
<html>
<body>
<p>아기 고양이</p>
<img src="wrong_url.jpg" alt="FKitty">
</body>
</html>아기 고양이
Image Size - Width and Height
style속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="https://cdn.pixabay.com/photo/2023/06/15/13/50/coffee-machine-8065457_1280.jpg" alt="커피 머신" style="width:500px;height:600px;">
</body>
</html>Image Size
Here we use the style attribute to specify the width and height of an image:
또는 width및 height속성을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="https://cdn.pixabay.com/photo/2023/06/15/13/50/coffee-machine-8065457_1280.jpg"
alt="커피 머신" width="300" height="400">
</body>
</html>Image Size
Here we use the style attribute to specify the width and height of an image:
width및 속성 height은 항상 이미지의 너비와 높이를 픽셀 단위로 정의합니다.
항상 이미지의 너비와 높이를 지정하는게 좋다.
너비와 높이를 지정하지 않으면 이미지가 로드되는 동안 웹 페이지가 깜박일 수 있습니다.
Width and Height, or Style?
이미지의 너비와 높이를 조정하기 위해 HTML에서는 width와 height 속성, 그리고 CSS의 style 속성을 모두 사용할 수 있습니다. 그러나 일반적으로는 스타일링을 위해 CSS를 사용하는 것이 권장됩니다. 이유는 다음과 같습니다:
관심사의 분리: 스타일링을 위해 CSS를 사용하면 표현 (CSS)과 내용 (HTML)을 분리할 수 있습니다. 이는 코드를 유지보수하기 쉽고 이해하기 쉽게 만들어줍니다. 특히 복잡한 스타일이나 여러 이미지를 다룰 때 유용합니다.
반응형 디자인: CSS를 사용하면 반응형 디자인을 만드는 데 더 유연성을 제공합니다. 백분율 값이나 vw 및 vh와 같은 반응형 단위를 사용하면 이미지가 컨테이너 또는 뷰포트에 기반하여 비례적으로 조정될 수 있습니다.
따라서, 일반적으로 스타일링을 위해 CSS를 사용하는 것이 좋습니다. 이미지의 크기를 정확히 지정해야 하는 경우에만 width와 height 속성을 사용할 수 있습니다.
Image Floating
HTML에서 이미지를 플로팅하려면 CSS의 float 속성을 사용합니다.
float 속성은 요소를 왼쪽이나 오른쪽으로 부유시켜 주변 콘텐츠를 감싸는 방식으로 배치합니다.
<!DOCTYPE html>
<html>
<body>
<style>
.floated-image {
float: left;
margin-right: 10px;
width: 42px;
hegiht: 42px;
}
</style>
<h2>Floating Images</h2>
<img src="https://cdn.pixabay.com/photo/2016/03/08/21/50/watercolor-1244885_1280.jpg" class="floated-image" alt="비오는 날씨">
<p>잠마다 장마 비만 온다.<br>
플로팅된 이미지는 주변 콘텐츠에 간섭하지 않습니다.</p>
</body>
</html><!--인라인으로 지정할 때.-->
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>Floating Images
잠마다 장마 비만 온다.
플로팅된 이미지는 주변 콘텐츠에 간섭하지 않습니다.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML Page Title (0) | 2023.07.17 |
|---|---|
| HTML 튜토리얼 - HTML Favicon (0) | 2023.07.17 |
| HTML 튜토리얼 - HTML Links & URL 구조 (0) | 2023.07.13 |
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
| HTML 튜토리얼 - HTML Colors (0) | 2023.07.11 |