[border] CSS - border-bottom-width 속성 - 테두리하단너비 (= 테두리하단두께 = border-bottom-width속성 = 보더바덤위드스속성) (상속X)

목차

1. border-bottom-width 예제 - 테두리 하단 두께 thin 경우
2. border-bottom-width 정의
3. border-bottom-width 구문
4. border-bottom-width 예제 - medium 경우
5. border-bottom-width 예제 - thick 경우
6. border-bottom-width 예제 - 1px 경우
7. border-bottom-width 예제 - 10px 경우

border-bottom-width 예제 - 테두리 하단 두께 thin 경우

 

<style>

h1 {

  border-bottom-style: solid;

  border-bottom-width: thin;

}

div {

  border-style: solid;

  border-bottom-width: thin;

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

border-bottom-width 정의

 

테두리 하단 두께 지정.

 

---

 

1.

border-bottom-width 속성 지정 전 반드시 border-style 또는 border-bottom-style 속성을 먼저 정의 필요. (∵ 테두리 두께 변경하려면, 테두리 모양 필요.)

 

2.

• 기본값: medium
• 상속여부: X
• 애니효과: O
• CSS버전: CSS1
• JS구문: object.style.borderBottomWidth="5px"

 

3.

모든 브라우저 지원.

 

4. MDN border-bottom-width 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width

 

border-bottom-width 구문

 

selector {border-bottom-width: medium|thin|thick|length|initial|inherit;}

 

---

[속성값]

thin

얇은 두께 (1px)

 

midium

중간 두께 (3px)

 

thick

굵은 두께 (5px)

 

length

px, cm, % 등 길이 단위값 (예) 5px 

 

initial

이 속성의 기본값으로 자동설정. 

 

inherit

부모 요소로부터 속성값 상속

※ 주의

• none : 이런 속성값은 존재 X
• 테두리 없애려면, 숫자 0 사용. (예) border-bottom-width:0;

  

border-bottom-width 예제 - medium 경우

 

<style>

h1 {

  border-bottom-style: solid;

  border-bottom-width: medium;

}

div {

  border-style: solid;

  border-bottom-width: medium;

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<div>그누보드/영카트 강의</div>

 

결과보기

border-bottom-width 예제 - thick 경우

 

<style>

h1 {

  border-bottom-style: solid;

  border-bottom-width: thick;

}

div {

  border-style: solid;

  border-bottom-width: thick;

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<div>그누보드/영카트 강의</div>

 

결과보기

border-bottom-width 예제 - 1px 경우

 

<style>

h1 {

  border-bottom-style: solid;

  border-bottom-width: 1px;

}

div {

  border-style: solid;

  border-bottom-width: 1px;

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<div>그누보드/영카트 강의</div>

 

결과보기

border-bottom-width 예제 - 10px 경우

 

<style>

h1 {

  border-bottom-style: solid;

  border-bottom-width: 10px;

}

div {

  border-style: solid;

  border-bottom-width: 10px;

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<div>그누보드/영카트 강의</div>

 

결과보기