728x90
(4) border(테두리)란
- 테두리 표현시 동서남북 네방향을 설정할 수 있으며 다음과 같은 값을 설정할 수 있다
1) 선의 두께 : border-width
2) 선의 종류 : border-style
3) 선의 색상 : border-color
(참고1)테두리 설정
방향은 4방향 : top, right, bottom, left
작성1) 방향이 지정되지 않은 경우
border : width style color;
작성2) 방향이 지정된 경우
border-방향 : width style color;
(참고2)선의 종류
- solid(실선)
- dotted(점선)
- dashed(간격이 좁고 그려지는 라인이 긴 형태)
(참고3) border를 없애는 경우
- border: none;
- border : 0 none; (→ 권장)
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>테두리</title> <style type="text/css"> *{margin: 0; padding: 0;} /* border를 적을 때 width - style - color 순으로 적음. border를 적을때, top -> right -> bottom -> left 순으로 적음 */ .box1{background-color: #ccc; border-top: 10px solid #000; border-right: 10px solid #000; border-bottom: 10px solid #000; border-left: 10px solid #000; } .box2{background-color: #f0f; border: 10px solid #0ff;width: 300px; height: 100px;} .box3{border-top: 10px solid #0f0; border-bottom: 10px solid #00f;} .box4{border-left: 10px dashed #0ff; border-right:5px dotted #0f0; height : 100px;} .box5{border : 5px solid #f00; border-bottom:0 none;} </style> </head> <body> <p class="box1">테두리 테스트1</p> <p class="box2">테두리 테스트2</p> <p class="box3">테두리 테스트3</p> <p class="box4">테두리 테스트4</p> <p class="box5">테두리 테스트5</p> </body> </html> |
■ 실행화면
반응형