요소의 테두리의 두께를 설정한다.
border-width
속성에 사용되는 타입이다.
요소의 방향별 테두리의 두께를 일괄 지정할 수 있다.
공백으로 구분된 값의 갯수 | 작용 방향 | 예시 |
---|---|---|
value | 요소의 네 방향(상하좌우) |
|
value1 value2 |
|
|
value1 value2 value3 |
|
|
value1 value2 value3 value4 |
|
|
<line-width>{1,4}
최소 1개 값부터 최대 4개의 값을 공백으로 구분하여 작성할 수 있고 작성된 값의 갯수에 따라 적용되는 방향이 달라진다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
선의 두께를 나타낸다. <length>
또는 지정된 키워드를 사용한다.
<length [0,∞]> | thin | medium | thick
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
기본 값이며 중간 굵기의 테두리 두께를 지정한다.
두꺼운 테두리 두께를 지정한다.
가는 테두리 두께를 지정한다.
border-width: thin;
하나의 값으로 네 변의 테두리의 두께를 지정된 키워드 또는 직접 값을 설정한다.
border-width: thin 5px;
2개의 값을 공백으로 구분하여 지정시 첫 번째 값은 상하, 두 번째 값은 좌우 테두리의 두께를 지정한다. 따라서 상하단은 thin, 좌우는 5픽셀의 두께를 설정한다.
border-width: thin medium thick;
3개의 값을 공백으로 구분하여 지정시 첫 번째 값은 상단, 두 번째 값은 좌우, 세 번째 값은 하단의 테두리의 두께를 지정한다. 따라서 상단은 thin, 좌우는 medium, 하단은 thick 두께를 설정한다.
border-width: 1px 2px 3px 4px;
4개의 값을 공백으로 구분하여 설정하는 경우 차례대로 상단, 오른쪽, 하단, 왼쪽 순으로 테두리의 두께를 지정한다. 따라서 상단은 1픽셀, 오른쪽은 2픽셀, 하단은 3픽셀, 왼쪽은 4픽셀의 두께를 설정한다.
object.style.borderWidth="1px 3px";
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 |