목차
- border-left-width 예제 - 테두리 좌측 두께 thin 경우
- border-left-width 정의
- border-left-width 구문
- border-left-width 예제 - medium 경우
- border-left-width 예제 - thick 경우
- border-left-width 예제 - 1px 경우
- border-left-width 예제 - 10px 경우
border-left-width 예제 - 테두리 좌측 두께 thin 경우
<style>
h1 {
border-left-style: solid;
border-left-width: thin;
}
div {
border-style: solid;
border-left-width: thin;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
※ 주의: border-style 속성 정의 필수.
border-left-width 정의
테두리 좌측 두께 지정.
1.
border-left-width 속성 지정 전 반드시 border-style 또는 border-left-style 속성을 먼저 정의 필요. (∵ 테두리 두께 변경하려면, 테두리 모양 필요.)
2.
- 기본값: medium
- 상속여부: X
- 애니효과: O
- CSS버전: CSS1
- JS구문: object.style.borderLeftWidth="5px"
3.
모든 브라우저 지원.
4. MDN border-left-width 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
border-left-width 구문
selector {border-left-width: medium|thin|thick|length|initial|inherit;}
[속성값]
thin
얇은 두께 (1px)
midium
중간 두께 (3px)
thick
굵은 두께 (5px)
length
px, cm, % 등 길이 단위값 (예) 5px
initial
이 속성의 기본값으로 자동설정.
inherit
부모 요소로부터 속성값 상속
※ 주의
- none : 이런 속성값은 존재 X
- 테두리 없애려면, 숫자 0 사용. (예) border-left-width:0;
border-left-width 예제 - medium 경우
<style>
h1 {
border-left-style: solid;
border-left-width: medium;
}
div {
border-style: solid;
border-left-width: medium;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-left-width 예제 - thick 경우
<style>
h1 {
border-left-style: solid;
border-left-width: thick;
}
div {
border-style: solid;
border-left-width: thick;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-left-width 예제 - 1px 경우
<style>
h1 {
border-left-style: solid;
border-left-width: 1px;
}
div {
border-style: solid;
border-left-width: 1px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-left-width 예제 - 10px 경우
<style>
h1 {
border-left-style: solid;
border-left-width: 10px;
}
div {
border-style: solid;
border-left-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
