본문으로 건너뛰기
실습하기

이미지의 높이, 너비 조절하기

이제 이미지의 너비와 높이를 바꾸어보겠습니다.

요소의 너비와 높이를 지정할 때는 widthheight 속성을 사용합니다.


width

요소의 가로 길이를 지정하며, 픽셀(px), 백분율(%) 등의 단위를 사용하여 값을 지정할 수 있습니다.

예를 들어, width: 300px;는 요소의 가로 길이를 300픽셀로 설정합니다.


height

요소의 세로 길이를 지정합니다.

마찬가지로 픽셀(px), 백분율(%) 등의 단위를 사용하여 값을 지정할 수 있습니다.

예를 들어, height: 200px;는 요소의 세로 길이를 200픽셀로 설정합니다.

아래 CSS 코드는 profile-image 클래스의 가로 길이와 세로 길이를 150px로 지정합니다.

이미지 너비, 높이, 테두리 속성 지정
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
}

다음 수업에서는 프로필을 위 아래로 움직이는 애니메이션 효과를 넣어보겠습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!