이미지 조절하기

img 태그의 width와 height 속성으로 이미지 크기를 조절할 수 있습니다.

예를 들어,

이미지 크기 조절하기

<img src="image.jpg" alt="이미지 설명" width="300" height="200" />

위 코드는 이미지 크기를 가로로 300px, 세로로 200px로 설정합니다.

이미지 크기를 지정하지 않으면, 이미지 원본 파일의 크기로 표시됩니다.

원형 이미지 만들기

border-radius는 요소의 모서리를 둥글게 만드는 CSS 속성입니다. 이미지를 원형으로 만들거나, 박스의 모서리를 둥글게 만들 때 사용합니다.

border-radius 속성은 다음과 같이 사용할 수 있습니다.

border-radius 속성 사용하기

선택자 {
  border-radius: 값;
}

여기서 선택자는 모서리를 둥글게 만들고 싶은 요소를 가리킵니다. 값은 얼마나 둥글게 만들지를 픽셀(px)이나 백분율(%)로 지정합니다.

예를 들어, 다음과 같은 CSS 코드는 box라는 클래스를 가진 요소의 모서리를 10px만큼 둥글게 만듭니다.

모서리 둥글게 만들기

.box {
  border-radius: 10px;
}