[HTML&CSS] 테두리(border) 영역
- Language & Solution/HTML&CSS
- 2019. 10. 7. 15:13
*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다.
[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기
| 테두리(border) 영역
박스 모델(box model)에서 테두리는 텍스트 단락 뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다.
| border-style : 테두리 스타일
border-style은 테두리의 스타일을 정하는 속성으로 쓰이며 다음과 같은 값을 지정할 수 있습니다.
none |
테두리가 나타나지 않습니다. (기본값) |
hidden |
테두리가 나타나지 않습니다. none과 같다고 보시면 됩니다. |
dashed |
테두리를 짧은선으로 표시합니다. |
dotted |
테두리를 점선으로 표시합니다. |
double |
테두리를 겹선으로 표시합니다. 두 선 사이의 간격은 border-width로 정합니다. |
groove |
테두리를 창에 조각한 것처럼 표시합니다. |
inset |
테두리를 창에 박혀 있는 것처럼 표시합니다. (좌측 음영) |
outset |
테두리를 창에 박혀 있는 것처럼 표시합니다. (우측 음영) |
ridge |
테두리를 창에 조각한 것처럼 표시합니다. (groove 와 반대음영) |
solid |
테두리를 선으로 표시합니다. |
| border-style : 테두리 스타일 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
text-align : center;
border-width : 15px;
width: 150px;
height: 50px;
margin: 20px;
}
.box-none {
border-style: none;
}
.box-hidden {
border-style: hidden;
}
.box-dotted {
border-style: dotted;
}
.box-dashed {
border-style: dashed;
}
.box-dotted {
border-style: dotted;
}
.box-double {
border-style: double;
}
.box-groove {
border-style: groove;
}
.box-inset {
border-style: inset;
}
.box-outset {
border-style: outset;
}
.box-ridge {
border-style: ridge;
}
.box-solid {
border-style: solid;
}
</style>
</head>
<body>
<div class="box-none">none</div>
<div class="box-hidden">hidden</div>
<div class="box-dashed">dashed</div>
<div class="box-dotted">dotted</div>
<div class="box-double">double</div>
<div class="box-groove">groove</div>
<div class="box-inset">inset</div>
<div class="box-outset">outset</div>
<div class="box-ridge">ridge</div>
<div class="box-solid">solid</div>
</body>
</html>
| border-width : 테두리 두께 지정
border-width는 테두리 두께를 지정하는 속성입니다. 테두리의 두께를 지정하는 속성들은 다음과 같습니다.
아래의 속성들은 <크기>, thin, medium, thick 중 하나의 속성값으로 지정하는 것이 가능합니다.
border-top-width |
위 테두리 두께 지정 |
border-right-width |
오른쪽 테두리 두께 지정 |
border-bottom-width |
아래쪽 테두리 두께 지정 |
border-left-width |
왼쪽 테두리 두께 지정 |
border-width |
한꺼번에 테두리 두께를 지정. 속성값의 개수에 따라 달리 적용 - 한 개 : 전체 테두리 두께 - 두 개 : 위아래와 좌우를 묶어 지정 - 세 개 : 첫 번째 : 위쪽, 두 번째 : 좌우 동시 적용, 세 번째 : 아래쪽 - 네 개 : 위 -> 오른쪽 -> 아래쪽 -> 왼쪽 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
text-align : center;
width: 150px;
height: 50px;
margin: 20px;
border-style: solid;
}
.div1 {
border-width: 5px;
}
.div2 {
border-width: thick thin;
}
.div3 {
border-width: 5px 10px 20px
}
.div4 {
border-width: 5px 10px 15px 20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
| border-color : 테두리 색상 지정
border-color는 테두리 색상을 지정하는 속성입니다. 테두리의 색상을 지정하는 속성들은 다음과 같습니다.
border-top-color | 위쪽 테두리 색상 결정 |
border-right-color | 오른쪽 테두리 색상 결정 |
border-bottom-color | 아래쪽 테두리 색상 결정 |
border-left-color | 왼쪽 테두리 색상 결정 |
border-color | 한꺼번에 테두리 색상을 결정. 속성값에 개수에 따라 달리 적용 규칙은 border-width와 동일 |
| border-color 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
text-align : center;
width: 150px;
height: 50px;
margin: 20px;
border-style: solid;
border-width: 5px;
}
.div1 {
border-color: red;
}
.div2 {
border-color: red blue;
}
.div3 {
border-color: red green purple;
}
.div4 {
border-color: red green purple blue;
}
.div5 {
border-top-color: brown;
border-bottom-color: red;
border-left-color: purple;
border-right-color: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
| border : 테두리 두께, 색상, 스타일 묶어 지정
border는 테두리의 두께, 색상, 스타일을 묶어서 지정하는 속성입니다. border 속성은 아래와 같이 쓰입니다.
border : <두께> | <색상> | <스타일>
border말고도 각 위치에 각각 적용할 수 있는 border-top, border-right, border-left, border-bottom 속성을 지정하여 쓸 수 있습니다.
| border 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.head-line {
font-weight: bold;
padding: 10px;
border: 1px purple solid;
}
.content {
width: auto;
height: 400px;
border: 10px darkgreen dashed;
}
</style>
</head>
<body>
<div class="head-line">
테두리 스타일 묶어서 지정
</div>
<div class="content">
콘텐츠가 기재되는 부분. 테두리 스타일에 대한 설명!
</div>
</body>
</html>
| border-radius : 박스 모서리 둥글게 하기
border-radius는 박스 모서리를 둥글게 만들어 좀 더 부드러운 요소를 구현하기 위한 속성입니다. border-radius는 아래와 같이 쓰입니다.
border-radius : <크기> | <백분율>
<크기> | 둥글게 처리할 반지름 크기를 px 혹은 em 같은 단위로 표시 |
<백분율> | 현재 요소 크기를 기준으로 반지름 크기를 %로 지정 |
또한 border-radius 뿐만 각 위치에 맞게 속성을 적용할 수 있도록 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 속성들을 지원하고 있습니다. 이 속성들은 아래 그림에 표시된 곳과 일대일 대응되어 표현됩니다.
border-radius는 또한 속성값을 한 개만 넣을 시 둥그런 원을 기준으로 곡선을 처리하게 됩니다. 만약 요소를 타원형 형태로 둥글게 만들고 싶다면 속성값을 두 개를 넣으면 됩니다.
border-radius : <가로 크기> <세로 크기>
| border-radius 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin : 50px;
width : 50%;
height : 100px;
}
.round {
border: 5px solid blue;
border-radius: 150px;
}
.round2 {
border: 5px solid red;
border-bottom-left-radius: 100px;
}
.round3 {
border: 5px solid yellow;
border-bottom-right-radius: 100px;
}
.round4 {
border: 5px solid green;
border-top-left-radius: 100px;
}
.round5 {
border: 5px solid grey;
border-top-right-radius: 100px;
}
.round6 {
border: 5px solid black;
border-top-right-radius: 200px 50px;
}
</style>
</head>
<body>
<div class="round">
</div>
<div class="round2">
</div>
<div class="round3">
</div>
<div class="round4">
</div>
<div class="round5">
</div>
<div class="round6">
</div>
</body>
</html>
| box-shadow : 선택한 요소에 그림자 효과
box-shadow 속성은 선택한 요소에 그림자를 내어 보다 멋진 효과를 내기 위해 쓰는 속성입니다. box-shadow 속성은 다음과 같이 쓸 수 있습니다.
box-shadow : none | <그림자 값>, [, <그림자값>]*;
<그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
box-shadow에서 그림자값을 쓸 시 그 개수에 따라서 상하좌우에 적용되는 그림자에 각각 적용됩니다. 전에 보셨던 border-style, border-width 같은 속성에서 대응되는 법칙과 같다고 생각하면 됩니다.
다음은 그림자 값에 적어야 되는 속성값들에 대한 설명입니다.
<수평 거리> | 그림자의 수평 offset 거리(수평으로 얼마나 떨어져 있는지). 양수값은 요소의 오른쪽, 음수값은 요소의 왼쪽에 그림자를 만듬. |
<수직 거리> | 그림자의 수평 offset 거리(수평으로 얼마나 떨어져 있는지). 양수값은 요소의 아래쪽, 음수값은 요소의 위쪽에 그림자를 만듬. |
<흐림 정도> | 그림자의 흐림 정도(blur radius)를 지정. 생략할 시 0을 기본값으로 진한 그림자를 표시. 값이 커질수록 부드러운 그림자를 표시. 음수값 사용 불가. |
<번짐 정도> | 그림자의 번지는 정도를 나타냄. 양수값을 사용할 시 모든 방향으로 그림자가 번짐. 음수값 사용 시 모든 방향으로 축소되어 나타남. 기본값은 0. |
<색상> | 그림자의 색상을 나타냄. 한 가지 이상의 색상값을 지정할 수 있음. 기본값은 현재 글자색. |
inset | 안쪽 그림자로 그릴 지를 결정하는 속성값 |
| box-shadow 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 30%;
height: 120px;
margin : 20px;
border: 2px solid;
border-radius: 30px;
}
.shadow1 {
box-shadow: 2px -5px 5px 0px black;
}
.shadow2 {
box-shadow: 2px 5px 15px 5px black;
}
</style>
</head>
<body>
<div class="shadow1">
</div>
<div class="shadow2">
</div>
</body>
</html>
'Language & Solution > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성 (0) | 2019.10.08 |
|---|---|
| [HTML&CSS] 콘텐츠(content) 영역 (0) | 2019.10.07 |
| [HTML&CSS] 박스모델 (Box Model) (0) | 2019.10.07 |
| [HTML&CSS] CSS 스타일 우선순위 (2) | 2019.10.02 |
| [HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element) (1) | 2019.10.02 |
