CSS Keywords

{object_name}

Background

  • Attachment

    • fixed

      뷰포트에 고정을 시킨다.

    • local

      요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.

    • scroll

      기본 값이며 요소와 함께 배경을 스크롤한다.

  • Position

    • bottom

      배경의 끝나는 위치를 요소의 하단에 맞춘다.

    • center

      배경의 중심을 요소의 중앙에 맞춘다.

    • left

      배경의 시작되는 위치를 요소의 좌측에 맞춘다.

    • right

      배경의 끝나는 위치를 요소의 우측에 맞춘다.

    • top

      배경의 시작되는 위치를 요소의 상단에 맞춘다.

  • Repeat

    • no-repeat

      반복하지 않는다.

    • repeat

      기본 값이며 수직, 수평으로 반복 적용한다.

    • repeat-x

      수평 방향으로만 반복 적용한다.

    • repeat-y

      수직 방향으로만 반복 적용한다.

    • round

      이미지는 배경 위치 지정 영역에 맞는 만큼 반복된다. 배경 이미지가 영역에 맞도록 조정된다.

    • space

      이미지가 잘리지 않고 배경 위치 지정 영역에 맞는 만큼 반복되어 해당 영역을 채우도록 적절한 간격을 계산해서 처리한다.

  • Size

    • auto

      이미지의 종횡비와 다른 차원의 크기를 사용하거나 실패하면 이미지의 원래 크기를 사용하거나 100%로 처리한다.

    • contain

      배경 이미지의 비율을 유지하면서 어느쪽도 잘리지 않도록 비율에 따라서 요소의 가로 또는 세로에 꽉 차게 맞춘다. 따라서 요소의 가로와 세로 중 어느 한 방향은 배경 이미지가 미치지 않은 빈 곳이 생길 수도 있다.

    • cover

      배경 이미지의 비율을 유지하면서 요소 내에 꽉 차게 보여 준다. 따라서 요소의 크기에 따라 배경 이미지의 가로와 세로 방향 중의 어느 한 곳은 일부 잘려 보이지 않을 수 있다.

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com