• Q&A
  • 회원가입
  • 로그인

[border] CSS - border 속성 ★ - 테두리일괄 (= border속성 = 보더속성) (상속X)

목차
  1. border 예제 - 테두리 일괄 지정
  2. border 정의
  3. border 구문
  4. border 제거
  5. border 이슈 - <tr> 요소에 border 적용
  6. border 이슈 - <div> 요소 안 텍스트 여백 주기
  7. border 예제 - 두께 미선언 시 2px 정도 자동 할당
  8. border 예제 - 각 테두리 스타일 다르게 설정
  9. border 예제 - 각 테두리별로 (width style color) 별도 지정
  10. border 예제 - 한줄가로선 만들기 (3가지 방법)

 

border 예제 - 테두리 일괄 지정

 

 

<style>

h1 {border: 5px solid red;}

h2 {border: 4px dotted blue;}

div {border: double;}

</style>


<h1>홈짱닷컴</h1>

<h2>Homzzang.com</h2>

<div>홈페이지 제작관리</div>


결과보기

 

border 정의


지정요소에 테두리 줄 때 사용.
(※ 아래 border 속성들 한번에 지정.)

 

border-width : 두께

border-style : 모양 (★ 필수)

border-color : 색상

 



1.
border 속성 중 두께나 색깔 선언은 안해도 되나, 스타일 속성(예:solid)은 반드시 선언해야 함.
테두리 스타일을 별도로 지정하지 않으면, border-style:none 작용해 테두리가 안 보이게 됨.
https://codepen.io/sinbi/pen/byeXVj 
 
기본값: medium none color
상속여부: X
애니효과: O
CSS버전: CSS1
JS구문: object.style.border="3px solid blue"

2.
모든 브라우저 지원.
 
 

border 구문

 

selector {border: width style color;}

(예) div {border: 2px solid red;}

 


[속성값]

 

width

선택. 테두리너비.

 

style

필수. 테두리스타일.

 

color

선택. 테두리색깔.

 

PS1. 순서는 자유지만 , 되도록 위 순서 권장.

 

PS2. 부모요소 속성 상속 : border:inherit;

 

 

border 제거

[방법1] 두께를 0으르 만들기. (※ 실질은 border-style:none 작동)

 

border:0
border-width:0px; border-style:none 과 동일

 


[방법2] 스타일을 none으로 설정. (= 존재조차 않는 상태)
 

border:none

border-width:OOpx; border-style:none 과 동일

 


[방법3] 스타일을 hidden으로 설정. (= 있지만 안 보이는 상태)

 

border:hidden
border-width:OOpx; border-style:hidden 과 동일

 


[예제]

 

<style>
div {border:10px solid red; margin:20px;  padding:20px;}
.a {border:0;}
.b {border:none;}
.c {border:hidden;}

</style>

<div class='a'>홈짱닷컴 Homzzang.com</div>

<div class='b'>홈짱닷컴 Homzzang.com</div>

<div class='c'>홈짱닷컴 Homzzang.com</div>

 
[참고] border-style:none , border-style:hidden 차이
 

border 이슈 - <tr> 요소에 border 적용

<table> 요소에 border-collapse:collapse; 속성 적용 필요.

 

<style>

table {

  border:1px solid red; 

  border-collapse:collapse;

}

tr {

  background:yellow; 

  border:5px solid blue;

}

td {

  margin:50px;

  padding:50px; 

  width:200px; 

  height:200px; 

  text-align:center;

}
</style>

<table>

  <tr><td>홈짱닷컴</td><td>홈짱닷컴</td></tr>

  <tr><td>Homzzang.com</td><td>Homzzang.com</td></tr>

</table>


결과 보기

 

border 이슈 - <div> 요소 안 텍스트 여백 주기


<style>
div {text-align: center; border: 1px solid red ;}
</style>

<div>
   <p>홈짱닷컴 (homzzang.com)</p>
</div>

결과 보기
※ div 요소 안 텍스트를 <p> 태그로 묶어주면 div 요소에 따로 padding 안 줘도 여백이 이쁘게 생김.
 

border 예제 - 두께 미선언 시 2px 정도 자동 할당


<style>
div {border: solid red ; text-align: center;}
</style> 

<div>
   <p>홈짱닷컴 (homzzang.com)</p>
</div>

결과 보기
 

border 예제 - 각 테두리 스타일 다르게 설정


1.
border 속성 경우, 테두리 상하좌우가 동일스타일 적용됨.

2.
테두리 상하좌우 다른 스타일 주려면 각 테두리별로 개별 속성 부여.

3.
이 경우도 두께나 색깔은 선언 안해도 되나, 
스타일 속성(예:solid)은 반드시 선언 필요.
(예)
border-top {width style color;}
border-right {width style color;}
border-bottom {width style color;}
border-left {width style color;}

 


[예제]
 
<style>
div {
   text-align: center;
   border-top: 2px solid red ;
   border-right: 2px solid blue;
   border-bottom: 2px solid green;
   border-left: 2px solid magenta;
}
</style>
 
<div>
    <p>홈짱닷컴 (homzzang.com)</p>
</div>

결과 보기
 

border 예제 - 각 테두리별로 (width style color) 별도 지정

 

[상단테두리]

border-top-width:  두께
border-top-style: 스타일
border-top-color: 색깔
 
[우측테두리]
border-right-width: 두께
border-right-style:  스타일
border-right-color: 색깔
 
[하단테두리]
border-bottom-width: 두께
border-bottom-style:  스타일
border-bottom-color: 색깔
 
[하단테두리]
border-left-width: 두께
border-left-style:  스타일
border-left-color: 색깔

 


[예제]

 

<style>

div {

  border-top-width:5px;

  border-top-style:solid;

  border-top-color:red;

 

  border-right-width:10px;

  border-right-style:dotted;

  border-right-color:blue;

 

  border-bottom-width:15px;

  border-bottom-style:dashed;

  border-bottom-color:green;

 

  border-left-width:20px;

  border-left-style:groove;

  border-left-color:magenta;  

}  

</style>


<div>

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

</div>

 

결과보기

※ 위 속성 모두 CSS1 버전이라 모든 브라우저에 적용됨.
 

border 예제 - 한줄가로선 만들기 (3가지 방법)

 

<style>

.a {border-top:1px solid red;}

.b {border-bottom:1px solid red;}

.c {height:1px; background:red;}
</style>

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

<hr>

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

<div class='a'></div>

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

<div class='b'></div>

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

<div class='c'></div>

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

 

결과보기

<hr> 태그 : 한 줄 가로선.
 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012