CSS Keywords

{object_name}

CSS Background and Borders Module

  • 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

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

  • Borders

    • Image

      • Repeat

        • repeat

          변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.

        • round

          repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.

        • space

          repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.

        • stretch

          이미지의 영역을 늘려 요소의 테두리로 적용한다.

      • Slice

        • fill

          테두리 이미지의 중간 부분이 유지된다. 요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.

      • Width

        • auto

          테두리에 사용된 이미지 슬라이스의 실제 너비 또는 높이로 설정된다.

    • Style

      • dashed

        데쉬선으로 설정한다.

      • dotted

        점선으로 설정한다.

      • double

        이중선으로 설정한다.

      • groove

        홈이 파인 입체 선으로 설정한다.

      • hidden

        테이블 요소가 아닌 경우에는 'none'과 동일하다.

      • inset

        안쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

      • none

        테두리가 없고 색상과 두께는 무시된다.

      • outset

        바깥쪽으로 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

      • ridge

        융기된 입체 선으로 설정한다. 테두리 색상 값에 따라 효과가 적용된다.

      • solid

        실선으로 설정한다.

    • Width

      • medium

        기본 값이며 중간 굵기의 테두리 두께를 지정한다.

      • thick

        두꺼운 테두리 두께를 지정한다.

      • thin

        가는 테두리 두께를 지정한다.

©2024 devdic.com, Korea

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

master@cydemy.com