개발자는 다른 HTML 요소와 관련된 이미지의 순서와 크기를 결정하여 명확한 시각적 계층 구조를 설정하도록 이미지의 위치를 설정합니다. 다양한 위치에 이미지를 배치하여 웹 사이트의 모양과 느낌을 변경할 수 있는 현대적이고 고유한 맞춤형 디자인도 생성할 수 있습니다. 이 문서에서는 CSS를 사용하여 이미지의 위치를 설정하는 절차를 보여줍니다.
CSS에서 이미지 위치를 설정하는 방법은 무엇입니까?
CSS에서 이미지의 위치를 설정함으로써 “ 정확한 배치 ”, “ 겹치는 요소 ' 그리고 ' 반응형 디자인 ” 쉽게 달성할 수 있습니다. 이러한 이점을 사용하여 개발자는 완벽하게 작동하고 눈길을 끄는 웹 사이트를 쉽게 사용자 정의하고 구축할 수 있습니다. 이미지의 위치를 설정할 수 있는 두 가지 방법/속성이 있습니다. 이러한 속성은 아래에 설명되어 있습니다.
방법 1: Float 속성 사용
“ 뜨다 ” 속성은 “에서 HTML 요소의 이동을 위해 CSS에서 제공합니다. 왼쪽 ' 또는 ' 오른쪽 ' 방향. HTML 요소의 정확한 배치를 위한 반응형 레이아웃을 만드는 동안 주로 활용됩니다.
예를 들어, 'float' 속성은 웹 페이지의 왼쪽과 오른쪽 모두에서 이미지를 정렬하는 데 사용됩니다.
< 사업부 >
< 이미지 소스 = 'bg.jpg' 키 = '300픽셀' 너비 = '400픽셀' 수업 = '오른쪽 위치' >
< 이미지 소스 = '책.jpg' 키 = '300픽셀' 너비 = '400픽셀' 수업 = '왼쪽 위치' >
사업부 >
위의 코드에서:
-
- 먼저 루트 ' 사업부 ” HTML 요소의 컨테이너 역할을 하는 요소가 생성됩니다.
- 다음으로 두 개의 '
” 태그는 “ <사업부> ” 태그.
- 그 후, '의 값 300픽셀 ' 그리고 ' 400픽셀 '에 제공됩니다. 키 ' 그리고 ' 너비 ” 둘 다의 속성
” 태그.
- 또한 ' 위치 오른쪽 ' 그리고 ' 왼쪽 위치 ”를 첫 번째 및 두 번째 “
” 태그에 각각 추가합니다.
이제 ' <스타일> ” 태그를 사용하여 다음 CSS 속성을 적용합니다.
< 스타일 >.positionRight {
플로트: 오른쪽;
}
.positionLeft {
왼쪽으로 뜨다;
}
스타일 >
설명은 다음과 같습니다.
-
- 먼저 ' 위치 오른쪽 ” 클래스를 만들고 “값을 설정합니다. 오른쪽 ” 그것의 “ 뜨다 ' 재산. 선택한 HTML 요소를 웹 페이지에서 올바른 방향으로 이동합니다.
- 다음으로 ' 왼쪽 위치 ” 클래스를 제공하고 “ 왼쪽 ' 로 ' 뜨다 ' 재산. 이렇게 하면 요소가 왼쪽으로 이동합니다.
컴파일 단계 종료 후:
출력은 이미지가 왼쪽 및 오른쪽 위치로 설정되었음을 보여줍니다.
방법 2: object-position 속성 사용
“ 개체 위치 ” 속성은 웹 페이지의 특정 위치에 이미지 또는 HTML 요소를 배치합니다. 수평 및 수직 위치를 제어할 수 있어 사용자가 원하는 시각적 효과 또는 레이아웃을 얻을 수 있습니다. 이미지 자르기, 썸네일 생성, 사용자 정의 레이아웃 등을 위해 개발자가 주로 사용합니다.
이 속성은 숫자 값과 키워드 값을 모두 사용할 수 있습니다. 예를 들어 ' 개체 위치 ' 재산. 아래 코드 조각에서 CSS의 이미지 위치를 설정합니다.
< 스타일 >.numericalValues
{
개체 위치: 100px 20px;
}
.keywordValues
{
개체 위치: 왼쪽;
}
스타일 >
< 몸 >
< 사업부 >
< 이미지 소스 = '책.jpg' 키 = '300픽셀' 너비 = '400픽셀' 수업 = '키워드값' >
< 이미지 소스 = 'bg.jpg' 키 = '300픽셀' 너비 = '400픽셀' 수업 = '숫자 값' >
사업부 >
몸 >
위의 코드 조각에서:
-
- 먼저 “ 숫자값 ” 클래스는 “ <스타일> ” 태그. 그리고 '의 수치는 100픽셀 20픽셀 '는 CSS '에 제공됩니다. 개체 위치 ' 재산. “ 100픽셀 는 가로 방향으로 추가된 공간이고 ' 20픽셀 ” 수직.
- 다음으로 “ 키워드 값 ” 클래스가 선택되고 키워드 값이 “ 왼쪽 '가 '에 제공됩니다. 개체 위치 ” 속성을 사용하여 이미지를 왼쪽 방향으로 정렬합니다.
- 그 후 '내부 <몸> ” 태그 두 개의 이미지가 생성되고, 위에서 생성된 클래스가 할당됩니다.
컴파일 단계가 끝나면 웹 페이지가 다음과 같이 나타납니다.
스냅샷은 이미지가 이제 특정 위치로 설정되었음을 보여줍니다.
결론
이미지의 위치는 CSS '를 사용하여 설정할 수 있습니다. 뜨다 ' 그리고 ' 개체 위치 ' 속성. “ 뜨다 ” 속성은 키워드를 값으로 받아 요소를 왼쪽 또는 오른쪽 위치로 이동합니다. 한편, “ 개체 위치 ”는 가로 세로 방향으로 키워드와 숫자 값을 모두 취합니다. 이 기사에서는 CSS에서 이미지 위치를 설정하는 절차를 설명했습니다.