목차
border-width 예제 - 테두리 두께 thin 경우
border-width 정의
border-width 구문
border-width 예제 - 속성값 4개 경우 (px 단위 사용)
border-width 예제 - 속성값 4개 경우 (두께 키워드 사용)
border-width 예제 - 테두리 두께 thin 경우
<style>
h1 {
border-style: solid;
border-width: thin;
}
div {
border-style: solid;
border-width: thick;
}
</style>
<h1>홈짱닷컴</h1>
<div>Homzzang.com</div>
결과보기
border-width 정의
테두리 두께 지정.
1.
속성값 개수 이용해 테두리 두께 (일괄/개별) 모두 지정 가능.
단독 사용 불가. ( 반드시, border-style 속성 먼저 지정 필요 )
2.
기본값: medium
상속여부: X
애니효과: O
CSS버전: CSS1
JS구문: object .style.borderWidth ="1px 5px"
3.
모든 브라우저 지원 .
4. MDN border-width 예제 보기https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
border-width 구문
selector {border-width: medium|thin|thick| length |initial|inherit;}
[속성값]
thin
얇은 두께 (1px)
midium
중간 두께 (3px)
thick
굵은 두께 (5px)
length
px, cm, % 등 길이 단위값 (예) 5px
initial
이 속성의 기본값으로 자동설정.
inherit
부모 요소로부터 속성값 상속
※ 주의
none : 이런 속성값 존재 X
테두리 없애려면, 숫자 0 사용(예: border-width:0)하거나 border-style:none 사용.
[속성값 개수별 의미]
선택자 { border-width: 상하좌우 ;} /* 속성값 1개 경우 */
(ex) border-width: thin;
선택자 { border-width: 상하 좌우 ;} /* 속성값 2개 경우 */ (ex) border-width: thin midium;
선택자 { border-width: 상 좌우 하 ;} /* 속성값 3개 경우 */ (ex) border-width: thin midium thick;
선택자 { border-width: 상 우 하 좌 ;} /* 속성값 4개 경우 */ (ex) border-width: thin midium thick inherit; (상단부터 시계방향)
border-width 예제 - 속성값 4개 경우 (px 단위 사용)
<style type="text/css">
div{
border-style : solid;
border-width : 1px 3px 5px 10px;
padding:10px;
}
</style>
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
border-width 예제 - 속성값 4개 경우 (두께 키워드 사용)
※ 위 예제와 결과 동일
<style type="text/css">
div{
border-style : solid;
border-width : thin medium thick 10px;
padding:10px;
}
</style>
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>
결과 보기
주소 복사
랜덤 이동