CSS / border-style / 테두리 모양을 정하는 속성
개요
border-style은 테두리(border)의 모양을 정하는 속성입니다.
- 기본값 : none
- 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 1
border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다.
문법
border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
initial과 inherit 이외의 값의 모양은 아래의 예제를 참고하세요.
속성값은 한 개에서 네 개까지 정할 수 있습니다.
border-style: xx
모든 모서리의 모양을 xx로 만듭니다.
border-style: xx yy
위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만듭니다.
border-style: xx yy zz
위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만듭니다.
border-style: xx yy zz ww
위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만듭니다.
예제 1
각 속성값이 어떤 모양인지 보여주는 예제입니다. 값에 따라서 브라우저마다 모양이 다르게 나올 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
h1 {
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>
<h1 class="none">No Border.</h1>
<h1 class="hidden">Hidden Border.</h1>
<h1 class="dotted">Dotted Border.</h1>
<h1 class="dashed">Dashed Border.</h1>
<h1 class="solid">Solid Border.</h1>
<h1 class="double">Double Border.</h1>
<h1 class="groove">Groove Border.</h1>
<h1 class="ridge">Ridge Border.</h1>
<h1 class="inset">Inset Border.</h1>
<h1 class="outset">Outset Border.</h1>
</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>
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+
Related Posts
문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...
CSS / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정한다. border-box : 테두리를 기준으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 <!doctype html> <html lang="ko"> <head> ...
CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성
개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...
CSS / linear-gradient - 선형 그라데이션 효과 만들기
linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...
CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법
표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
columns columns는 다단으로 만드는 속성입니다. 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다. IE는 버전 10 이상을 지원합니다. 예제 1 문단을 3단으로 만듭니다. 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb { columns : 3; } </style> </head> <body> <p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...