html 이미지 크기 조절 하기 changing image size in html

html에서 이미지 크기를 조절하는 것으로 width와 height 속성을 사용한다. css style 을 사용할 때도 width height 속성을 사용할 수 있다. 선택자를 사용하여 style 을 지정하면 코드를 단순화 시킬 수 있다. 이미지 크기를 조절하는 것은 여러모로 사용 빈도수가 많다. 웹페이지의 구도를 맞춰야 하는 이유도 있고, 목록이나 상세화면과 같이 이미지가 작아졌다 커졌다 하는 작업도 필요하다.

html 이미지 크기 조절 하기
changing image size in html

웹페이지에서 이미지를 표현할 때 고민의 대상이 된다.

원본 크기 그대로 화면에 표시하면 화면 구도와 맞지 않는다. 데이터의 목록이나 화면 구도와 적절하게 표현할 수 있도록 이미지의 크기는 조절할 필요가 있다.

이미지를 표시하는 img 태그의 width와 height 속성을 사용하여 이미지 크기를 조절할 수 있다.

width 는 이미지의 폭을, height 는 이미지의 높이를 의미한다.

css style 에서 이미지 속성을 이용하면 크기를 조절할 수도 있다.

크기 조절 사용

크기를 지정하는 width ( 너비 ) 와 height (폭) 의 사용법은 다음과 같다.

img 태그에 직접 지정하는 방법은 태그에 직접 지정할 수도 있고, css 선택자를 이용하여 지정할 수 있다.

<!-- 태그에 직접 지정 -->
<img width="값" height="값">

<!-- css 선택자 지정 -->
css_선택자 {
	width: 값;
    height: 값;
}

이미지 크기 조절 width height

이미지 ( img ) 태그에서 width는 높이를 height는 너비를 조절하는 속성이다.

이미지 뿐만 아니라 div와 같은 다른 태그들도 width와 height 을 사용하여 크기를 지정할 수 있다.

width, height 속성의 값은 px % 등 html 웹에서 사용하는 모든 수치를 사용할 수 있다.

아래는 이미지 img 태그를 이용하여 이미지크기를 조절하는 방법을 나타낸다.

<!-- style 사용 -->
선택자 {
	width: 값;
    height: 값;
}

<!-- 직접 사용 -->
<img src="이미지url" alt="대체텍스트" width="값" height="값"/>

<!-- style 사용 -->
<img src="이미지url" alt="대체텍스트" style="width:값; height:값;"/>

샘플코드

위의 사용법으로 이미지 크기를 조절하는 html 예제를 만들어 본다.

이미지를 html 에 표시하기 위해 img 태그를 사용하고, 크기를 조절하기 위해 width와 height 속성을 사용한다.

css style 을 사용할 때도 width height 속성을 사용할 수 있다.

첫번째 / width, height 속성으로 크기 지정
두번째 / css style 사용하여 크기 지정
세번째 / 선택자를 사용하여 크기 지정

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>
    
	<!-- 문서 정보 -->
	<head>
        <style>
            .imgSize {
                width:200px;
                height:300px;
            }
        </style>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <img src="황금장군.png" alt="1호선 황금장군" width="200" height="300">
            <img src="붉은혜성.png" alt="1호선 붉은혜성" style="width:200px;height:300px;">
            <img src="태양만세.png" alt="1호선 태양만세" class="imgSize">
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

코드를 보면 여러가지가 있지만 크기를 조절하는 방법은 조금씩 다르다.

하지만 결과화면은 모두 같다.

원본 이미지는 서로 다르지만, 너비 width 는 200px 로 높이 height 는 300px 로 고정하여 표시하였다.

결과 화면을 보자.

'programming > web' 카테고리의 다른 글

html 이미지에 링크 연결 하기 how to link image to link in html (0)	2022.06.01
html img 태그 이미지 경로 지정 방법 Specifies img src path (0)	2022.05.30
html img 태그 사용 화면에 이미지 표시 using html image tag (0)	2022.05.23
html 링크 태그 북마크 처럼 사용하기 using a link tag bookmark (0)	2022.05.19
html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style (0)	2022.05.14

html 이미지 크기 조절 하기 changing image size in html