CSS / border-style / 테두리 모양 정하는 속성
개요
border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성이다.
border-top-styleborder-right-styleborder-bottom-styleborder-left-style
문법
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
initial: 기본값으로 설정한다. 기본값은none이다.inherit: 부모 요소의 속성값을 상속받는다.
속성값은 한 개에서 네 개까지 정할 수 있다.
- 다음은 모든 모서리의 모양을 xx로 만든다.
border-style: xx
- 다음은 위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만든다.
border-style: xx yy
- 다음은 위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만든다.
border-style: xx yy zz
- 다음은 위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만든다.
border-style: xx yy zz ww
예제 1
각 속성값이 어떤 모양인지 보여주는 예제이다. 값에 따라서 브라우저마다 모양이 다르게 나올 수 있다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
p {
font-family: Georgia;
font-style: italic;
padding: 10px;
}
.none {
border-style: none;
}
.hidden {
border-style: hidden;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
</style>
</head>
<body>
<p class="none">No Border.</p>
<p class="hidden">Hidden Border.</p>
<p class="dotted">Dotted Border.</p>
<p class="dashed">Dashed Border.</p>
<p class="solid">Solid Border.</p>
<p class="double">Double Border.</p>
<p class="groove">Groove Border.</p>
<p class="ridge">Ridge Border.</p>
<p class="inset">Inset Border.</p>
<p class="outset">Outset Border.</p>
</body>
</html>
예제 2
속성값 중 none과 hidden은 표(table)에서 border-collapse 속성의 값이 collapse일 때 차이가 난다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
table {
width: 100%;
font-family: Georgia;
font-style: italic;
border: 1px solid #000000;
border-collapse: collapse;
}
table td {
border: 1px solid #000000;
padding: 0px 20px;
}
table.none {
border-style: none;
}
table.hidden {
border-style: hidden;
}
</style>
</head>
<body>
<h1>border-style: none;</h1>
<table class="none">
<tr>
<td>
<p>Lorem</p>
</td>
<td>
<p>Ipsum</p>
</td>
</tr>
<tr>
<td>
<p>Dolor</p>
</td>
<td>
<p>Amet</p>
</td>
</tr>
<tr>
<td>
<p>Phasellus</p>
</td>
<td>
<p>Mauris</p>
</td>
</tr>
</table>
<h1>border-style: hidden;</h1>
<table class="hidden">
<tr>
<td>
<p>Lorem</p>
</td>
<td>
<p>Ipsum</p>
</td>
</tr>
<tr>
<td>
<p>Dolor</p>
</td>
<td>
<p>Amet</p>
</td>
</tr>
<tr>
<td>
<p>Phasellus</p>
</td>
<td>
<p>Mauris</p>
</td>
</tr>
</table>
</body>
</html>
CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...
CSS / font-size / 글자 크기 정하는 속성
개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...
목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성
개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...