CSS로 이미지 스타일을 설정하는 방법-프런트엔드 Q&A-php.cn

CSS로 이미지 스타일을 설정하는 방법

PHPz

풀어 주다： 2023-04-24 09:51:56

원래의

3476명이 탐색했습니다.

CSS(Cascading Style Sheets)는 웹 페이지의 모양과 형식을 설명하는 데 사용되는 스타일 시트 언어입니다. CSS는 이미지를 포함한 스타일 시트를 통해 웹 페이지 요소에 다양한 스타일을 설정할 수 있습니다. 이번 포스팅에서는 CSS를 사용하여 이미지 스타일을 지정하는 방법을 알아 보겠습니다.

1. 사진 추가

사진 스타일 설정 방법을 배우기 전에 먼저 웹 페이지에 사진을 추가하는 방법을 알아야 합니다. 웹 페이지에 이미지를 추가하는 가장 쉬운 방법은 HTML의 img 태그를 사용하는 것입니다. img 태그를 사용하면 이미지의 URL(웹 주소)을 지정할 수 있습니다.

여기서 "src"(소스) 속성은 이미지의 URL을 지정합니다. 상대 또는 절대 URL을 사용할 수 있습니다. 이미지가 동일한 디렉토리에 있는 경우 상대 URL을 사용할 수 있습니다:

이렇게 하면 "image.jpg"라는 이미지 파일이 동일한 디렉토리에 있음을 지정합니다. . 이미지 파일이 다른 디렉터리에 있는 경우 다음과 같은 상대 경로를 사용할 수 있습니다.

이 예에서 ".."는 백업을 의미합니다. 그런 다음 "images" 디렉터리로 이동하여 "image.jpg"라는 파일을 찾으세요.

2. 이미지 크기 설정

이미지 크기 설정은 CSS에서 가장 일반적으로 사용되는 스타일 중 하나입니다. 이미지의 크기는 "너비" 및 "높이" 속성을 사용하여 지정할 수 있습니다. 이러한 속성은 픽셀(px), 백분율 및 기타 길이 단위를 값으로 허용합니다.

예를 들어 이미지 크기를 너비 200픽셀, 높이 100픽셀로 설정하려면 다음 CSS를 사용할 수 있습니다.

img {
width: 200px;
height: 100px; 또는 높이 속성을 백분율로 표시합니다. 예를 들어 이미지 크기를 포함 요소의 50%로 설정하려면 다음 CSS를 사용할 수 있습니다.

img {

width: 50%

height: 50%

}

단일 "너비" 속성을 사용하여 이미지의 너비를 설정하고 높이를 자동으로 계산하여 종횡비를 유지하면 됩니다. 예를 들어 다음 CSS는 이미지 너비를 300픽셀로 설정합니다.

img {

width: 300px;

}

3. 정렬 및 플로팅

CSS를 사용하여 이미지의 위치와 정렬을 설정할 수도 있습니다. . "margin" 및 "padding" 속성을 사용하여 이미지 주위의 공백을 제어할 수 있습니다.

예를 들어 다음 CSS는 이미지를 왼쪽으로 정렬하고 이미지 왼쪽과 위에 10픽셀 여백을 추가합니다.

img {

display: block;

float: left;

margin: 10px 0 0 10px ;
}

이 예에서 “display” 속성은 이미지를 블록 수준 요소로 설정하여 다른 콘텐츠 아래에 표시되도록 합니다. "float" 속성과 "left" 값은 이미지를 왼쪽으로 띄웁니다. 마지막으로 "margin" 속성의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 위쪽 및 왼쪽 여백을 10픽셀로 지정합니다.

"text-align" 속성을 사용하여 이미지를 정렬할 수도 있습니다. 예를 들어 다음 CSS는 이미지를 중앙에 정렬합니다.

img {

display: block;

margin: 0 auto;

text-align: center;
}

이 예에서 "margin" 값은 속성이 "0 auto"인 경우 이미지를 수평으로 중앙에 맞추는 것을 의미합니다. 마지막으로 "text-align" 속성을 "center"로 설정하여 이미지를 수직으로 중앙에 배치합니다.

4. 둥근 모서리와 테두리

또 다른 일반적인 이미지 스타일은 둥근 모서리와 테두리입니다. "border-radius" 속성을 사용하여 테두리의 모서리 반경을 설정할 수 있습니다. 예를 들어 다음 CSS는 이미지에 50px의 둥근 테두리를 설정합니다.

img {

border-radius: 50px;

}

"border"를 사용하여 이미지 테두리의 너비, 스타일 및 색상을 설정할 수도 있습니다. " 기인하다. 예를 들어 다음 CSS는 이미지를 검은색 테두리가 있는 3픽셀 너비로 설정합니다.

img {