CSS
CSS 테두리 border
css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다.
테두리 모양 border-style
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<!-- 주석 --!>
<p class="dotted">점선</p>
<p class="dashed">굵은 점선</p>
<p class="solid">실선</p>
<p class="double">이중 실선</p>
<p class="groove">3D groove</p>
<p class="ridge">3D ridge</p>
<p class="inset">3D inset</p>
<p class="outset">3D outset</p>
<p class="none">없음</p>
<p class="hidden">숨김</p>
<p class="mix">혼합</p>
</body>
</html>점선
굵은 점선
실선
이중 실선
3D groove
3D ridge
3D inset
3D outset
없음
혼합
border-style은 1~4개의 값을 가질 수 있다.
위의 혼합 테두리를 보면
border-stylep.mix {border-style: dotted dashed solid double;}
이렇게 4개의 값을 가지고 있다. 순서는 "상-우-하-좌" 다.
테두리 두께 border-width
border-width: px, pt, cm, em 단위와 thin, medium, thick로 설정한다.
두께도 4가지 값을 가질수 있다. 순서는 "상-우-하-좌"다.
<!DOCTYPE html>
<html>
<head>
<style>
p.bw1 {
border-style: solid;
border-width: 5px;
}
p.bw2 {
border-style: solid;
border-width: medium;
}
p.bw3 {
border-style: dotted;
border-width: 2px;
}
p.bw4 {
border-style: dotted;
border-width: thick;
}
p.bw5 {
border-style: double;
border-width: 15px;
}
p.bw6 {
border-style: double;
border-width: thick;
}
p.bw7 {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<p class="bw1">실선 두께 5px</p><p></p>
<p class="bw2">실선 medium</p><p></p>
<p class="bw3">점선 두께 2px</p><p></p>
<p class="bw4">점선 두께 thick</p><p></p>
<p class="bw5">이중선 두께 15px</p><p></p>
<p class="bw6">이중선 두께 thick</p><p></p>
<p class="bw7">실전 상2 우10 하4 좌20px</p>
</body>
</html>
실선 두께 5px
실선 medium
점선 두께 2px
점선 두께 thick
이중선 두께 15px
이중선 두께 thick
실전 상2 우10 하4 좌20px
테두리 색상 border-color
border-color: 색상; 으로 지정한다.
색은 색이름, 16진수, rgb로 설정한다. 기본은 검정색이다.
테두리 색상 또한 4가지 요소를 가질 수 있다. 순서는 "상-우-하-좌" 다.
<!DOCTYPE html>
<html>
<head>
<style>
p.bc1 {
border-style: solid;
border-color: red;
}
p.bc2 {
border-style: dotted;
border-color: green;
}
p.bc3 {
border-style: solid;
border-color: red green blue yellow;
}
</style>
</head>
<body>
<p class="bc1">실선 빨강</p><p></p>
<p class="bc2">점선 녹색</p><p></p>
<p class="bc3">실선 상빨강 우녹색 하파랑 좌 노랑</p>
</body>
</html>
실선 빨강
점선 녹색
실선 상빨강 우녹색 하파랑 좌노랑
테두리 상우하좌 개별 컨트롤
border-top-style
border-right-style
border-bottom-style
border-left-style
색상이나 모양은 동일하게 지정하면 됩니다.
참고 : border-style의 상우하좌 지정.
border-style: solid - 상우하좌 모두 실선
border-style: dotted solid; - 상/하:점선 우/좌:실선
border-style: dotted solid double; - 상:점선 우/좌:실선 하:이중선
테두리 스타일 한 번에 쓰기
border: 2px solid #fff;
border-left: 5px dottef tomato;
이렇게 두께[공백]모양[공배]색; 으로 쓸 수 있다.
모서리가 둥근 테두리
둥근 모서리는 border-radius로 지정한다. 값은 px로 정하면 된다.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid tomato;
}
p.round1 {
border: 2px solid tomato;
border-radius: 5px;
}
p.round2 {
border: 2px solid tomato;
border-radius: 8px;
}
p.round3 {
border: 2px solid tomato;
border-radius: 12px;
}
</style>
</head>
<body>
<p class="normal">기본</p><p></p>
<p class="round1">둥근 모서리 5px</p><p></p>
<p class="round2">둥근 모서리 8px</p><p></p>
<p class="round3">둥근 모서리 12px</p>
</body>
</html>
기본
둥근 모서리 5px
둥근 모서리 8px
둥근 모서리 12px
이글에서 사용한 제목 부분.
babackground-color: tomato;
padding: 10px;
border-bottom: 5px solid;
제목 부분 예시
배경색을 토마토색, 안쪽 여백을 10px을 주고 아래에 두께 5px 테두리를 넣었다.
제목 부분 예시
babackground-color: tomato;
padding: 10px;
border-left: 5px solid;
이렇게 왼쪽에 넣어서 예쁘게 만들 수 있다.