목차
- border 예제 - 테두리 일괄 지정
- border 정의
- border 구문
- border 제거
- border 이슈 - <tr> 요소에 border 적용
- border 이슈 - <div> 요소 안 텍스트 여백 주기
- border 예제 - 두께 미선언 시 2px 정도 자동 할당
- border 예제 - 각 테두리 스타일 다르게 설정
- border 예제 - 각 테두리별로 (width style color) 별도 지정
- 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 속성들 한번에 지정.)
1.
2.
- 기본값: medium none color
- 상속여부: X
- 애니효과: O
- CSS버전: CSS1
- JS구문: object.style.border="3px solid blue"
3.
4. MDN border 예제보기
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>
결과보기
