[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