CSS Types

CSS Types

Editing

<'border-style'>

데브딕에서 지정한 색인용 자료 타입

border-style 속성에 사용되는 타입이다.

요소의 테두리 모양을 지정하는 값을 나타낸다.

설정 값의 갯수의 작용하는 방향

공백으로 구분된 값의 갯수작용 방향예시
value요소의 네 방향(상하좌우)
border-width: 1px;
margin: 10px;
padding: 5px;
value1 value2
  • value1: 요소의 위쪽과 아래쪽
  • value2: 요소의 왼쪽과 오른쪽
border-width: 1px 2px;
margin: 10px 5px;
padding: 5px 2px;
value1 value2 value3
  • value1: 요소의 위쪽
  • value2: 요소의 왼쪽과 오른쪽
  • value3: 요소의 아래쪽
border-width: 1px 2px 3px;
margin: 10px 5px 3px;
padding: 5px 10px 20px;
value1 value2 value3 value4
  • value1: 요소의 위쪽
  • value2: 요소의 오른쪽
  • value3: 요소의 아래쪽
  • value4: 요소의 왼쪽
border-width: 1px 2px 3px 4px;
margin: 10px 5px 3px 2px;
padding: 5px 10px 20px 2px;

 

구문

  • CSS Backgrounds and Borders Module Level 3
    <line-style>{1,4}

    최소 1개 값부터 최대 4개의 값을 공백으로 구분하여 작성할 수 있고 작성된 값의 갯수에 따라 적용되는 방향이 달라진다.

사용되는 타입

  • <line-style>선의 모양에 대한 키워드를 나타낸다. solid, dotted, dashed 이외의 값은 선의 두께가 어느 정도 지정되어야 제대로 보여진다.

버전 명세

Modules
Module NameStatusSummary
CSS2.0

Last review date: 2022-6-4

CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

©2024 devdic.com, Korea

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

master@cydemy.com