테두리(border)
- border 속성은 내용(content)과 패딩(padding)영역을 둘러싸는 테두리의 스타일을 설정한다.
border-style 속성
- border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있다
- dotted : 테두리를 점선으로 설정함.
- dashed : 테두리를 약간 긴 점선으로 설정함.
- solid : 테두리를 실선으로 설정함.
- double : 테두리를 이중 실선으로 설정함.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- none : 테두리를 없앰.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Border</title>
<style>
.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;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: solid dashed dotted double;}
</style>
</head>
<body>
<h1>border-style 속성을 이용한 테두리의 모양 변경</h1>
<p class="dotted">border-style 속성값을 dotted로 한 단락입니다.</p>
<p class="dashed">border-style 속성값을 dashed로 한 단락입니다.</p>
<p class="solid">border-style 속성값을 solid로 한 단락입니다.</p>
<p class="double">border-style 속성값을 double로 한 단락입니다.</p>
<p class="groove">border-style 속성값을 groove로 한 단락입니다.</p>
<p class="ridge">border-style 속성값을 ridge로 한 단락입니다.</p>
<p class="inset">border-style 속성값을 inset으로 한 단락입니다.</p>
<p class="outset">border-style 속성값을 outset으로 한 단락입니다.</p>
<p class="none">border-style 속성값을 none으로 한 단락입니다.</p>
<p class="hidden">border-style 속성값을 hidden으로 한 단락입니다.</p>
<p class="mix">border마다 각각의 border-style 속성값을 적용한 단락입니다.</p>
</body>
</html>border-width 속성
- border-width 속성은 테두리(border)의 두께를 설정한다.
- px, em, cm등과 같은 css 크기 단위를 이용해 두께를 직접 설정 가능하다.
또는 thin, medium, thick를 사용하여 설정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Border</title>
<style>
.dottedA {
border-style: dotted;
border-width: 2px;
}
.dottedB {
border-style: dotted;
border-width: 5px;
}
.dashedA {
border-style: dashed;
border-width: thin;
}
.dashedB {
border-style: dashed;
border-width: thick;
}
.doubleA {
border-style: double;
border-width: 5px;
}
.doubleB {
border-style: double;
border-width: thick;
}
.mix {
border-style: solid;
border-width: 1px 2px 10px thick;
}
</style>
</head>
<body>
<h1>border-width 속성을 이용한 테두리의 두께 설정</h1>
<p class="dottedA">border-width 속성값을 2px로 한 단락입니다.</p>
<p class="dottedB">border-width 속성값을 5px로 한 단락입니다.</p>
<p class="dashedA">border-width 속성값을 thin으로 한 단락입니다.</p>
<p class="dashedB">border-width 속성값을 thick으로 한 단락입니다.</p>
<p class="doubleA">border-width 속성값을 5px로 한 단락입니다.</p>
<p class="doubleB">border-width 속성값을 thick으로 한 단락입니다.</p>
<p class="mix">border마다 각각의 border-width 속성값을 적용한 단락입니다.</p>
</body>
</html>
border-color 속성
- border-color 속성은 테두리(border)의 색상을 설정한다.
- 투명한 선을 나타내는 transparent 속성값을 사용할 수 있다.
- border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Border</title>
<style>
p {
border-style: solid;
border-width: 3px;
}
.red { border-color: red; }
.green { border-color: rgb(0,255,0); }
.blue { border-color: #0000FF; }
.mix { border-color: red green blue maroon; }
.color { color: teal; }
</style>
</head>
<body>
<h1>border-color 속성을 이용한 테두리의 색상 변경</h1>
<p class="red">border-color 속성값을 red로 한 단락입니다.</p>
<p class="green">border-color 속성값을 green로 한 단락입니다.</p>
<p class="blue">border-color 속성값을 blue로 한 단락입니다.</p>
<p class="mix">테두리마다 각각의 border-color 속성값을 적용한 단락입니다.</p>
<p class="color">border-color 속성의 속성값을 명시하지 않은 단락입니다.</p>
</body>
</html>테두리 축약 표현(border shorthand)
모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Border</title>
<style>
.good { border: 3px solid teal; }
.wrong { border: 5px teal; }
</style>
</head>
<body>
<h1>테두리의 스타일 변경</h1>
<p class="good">border-style 속성을 설정한 단락입니다.</p>
<p class="wrong">border-style 속성을 설정하지 않은 단락입니다.</p>
<p>테두리의 축약 표현시에는 반드시 border-style 속성이 먼저 설정되어 있어야 제대로 표현됩니다!</p>
</body>
</html>
백엔드 개발자