배경 위치

Frontend SELF KO

레벨 18 , 레슨 2

사용 가능

2.1 background-position 속성

CSS에서 background-position 속성은 요소 내의 배경 이미지의 시작 위치를 설정하는 데 사용돼. 이 속성은 배경 이미지가 요소 내에서 어디에 위치할지를 정확하게 정할 수 있게 도와줘. background-position 속성을 사용하면 배경 이미지를 섬세하게 조정하고 더 복잡한 디자인을 만들 수 있어.

background-position 문법

background-position 속성은 배경 이미지의 수평 및 수직 위치를 나타내는 두 가지 값을 받아:

    
      background-position: 가로-위치 세로-위치;

하나의 값만 지정하면, 두 번째 값은 기본적으로 center로 간주돼.

수평 및 수직 위치 값들은 다음과 같이 지정될 수 있어:

키워드:
- left: 왼쪽 정렬
- center: 가운데 정렬
- right: 오른쪽 정렬
- top: 위쪽 정렬
- bottom: 아래쪽 정렬
백분율 값:
- 예를 들어, 50% 50%는 이미지를 가운데에 위치시켜
- 백분율 값은 이미지가 아닌 요소의 크기에 대해 적용돼
픽셀 값:
- 예를 들어, 10px 20px는 이미지를 왼쪽 가장자리에서 10픽셀, 위쪽 가장자리에서 20픽셀 떨어진 위치에 배치해
값의 조합:
- 키워드와 백분율 값을 조합할 수 있어, 예를 들어 left 50%

2.2 키워드

키워드:

left, center, right: 수평 정렬
top, center, bottom: 수직 정렬

키워드 사용 예제

이미지가 왼쪽 위 구석에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* 이미지를 왼쪽 위 구석에 위치시켜 */
      }

이미지가 가운데에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* 이미지를 가운데에 위치시켜 */
      }

이미지가 오른쪽 아래 구석에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* 이미지를 오른쪽 아래 구석에 위치시켜 */
      }

2.3 백분율

백분율 값은 요소 크기를 기준으로 이미지의 위치를 지정해.

백분율 사용 예제

이미지가 가운데에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* 이미지를 가운데에 위치시켜 */
      }

이미지가 왼쪽 위 구석에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* 이미지를 왼쪽 위 구석에 위치시켜 */
      }

이미지가 오른쪽 아래 구석에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* 이미지를 오른쪽 아래 구석에 위치시켜 */
      }

2.4 절대 단위 (px, em, rem)

픽셀 또는 다른 절대 단위 값은 이미지의 위치를 정확하게 지정할 수 있게 해줘.

이미지가 가운데에 위치해:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* 이미지를 왼쪽 위에서 10픽셀 오른쪽, 20픽셀 아래로 위치시켜 */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* 이미지를 2em 오른쪽, 3em 아래로 위치시켜 */
      }

2.5 값의 조합

더 정확한 위치 설정을 위해 키워드와 절대 단위를 조합할 수 있어.

값의 조합:

CSS

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* 이미지를 왼쪽 위에서 20픽셀 오른쪽, 10픽셀 아래로 위치시켜 */
      }

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION