CSS border 란?
CSS border(테두리)는 웹 디자인에서 요소 주위에 경계를 생성하고 스타일을 부여하는 데 사용되는 스타일링 속성입니다. border는 웹 개발 페이지의 시각적인 디자인을 향상 시키는 데 중요한 역할을 합니다.
CSS border 속성
border는 CSS에서 사용되는 속성 중 하나로, HTML 요소의 테두리를 지정하는 데 사용됩니다.
이 속성은 요소 주위에 테두리를 만들거나 스타일을 지정하는 데 활용됩니다.
- 값:
- border 속성의 값은 다음 세 가지로 나뉩니다. border-width, border-style, border-color
- border 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다. 예) border: 2px solid black;
- 테두리 너비(border-width):
- 테두리의 두께를 지정합니다. 픽셀(px) 단위로 값을 지정하거나 thin, medium, thick 과 같은 상대적인 값도 사용할 수 있습니다.
- 테두리 스타일(border-style):
- 테두리의 스타일을 지정합니다. solid, dashed, dotted, double 등 다양한 스타일을 선택할 수 있습니다.
- 한 개의 값을 지정하면 모든 네 면의 테두리 스타일을 설정합니다.
- 두 개의 값을 지정하면 첫 번째 값은 위와 아래, 두 번째값은 왼쪽과 오른쪽 테두리 스타일을 설정합니다.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 스타일을 설정합니다.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 스타일을 설정합니다. (시계방향)
- 테두리 색상(border-color):
- 테두리의 색상을 지정합니다. 색상 코드, 색상 이름, RGB 값 등 다양한 방식으로 색상을 표현할 수 있습니다.
- 세부 설정:
- border 속성을 사용하지 않고 border-width, border-style, border-color 를 각각 따로 사용할 수도 있습니다.
- 각 방향에 대한 테두리 속성:
- 특정 방향에 대한 테두리 속성을 설정할 수 있습니다.
예를 들어, border-top, border-bottom, border-left, border-right 등이 있습니다.
- 특정 방향에 대한 테두리 속성을 설정할 수 있습니다.
CSS border 예제
기본 스타일
아래 예제는 2px의 너비, solid 스타일, black 색상을 갖는 테두리를 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
width: 200px; /* 너비 200px */
height: 150px; /* 높이 150px */
border: 2px solid black; /* 테두리 설정 */
}
</style>
<title>border 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML![borderbox](https://i0.wp.com/suover.com/wp-content/uploads/2023/11/image-6.png?resize=328%2C249&ssl=1)
border: 2px solid black 이 적용 된 스타일입니다.
border-style: dotted
이번에는 5px의 너비, dotted 스타일, orange 색상을 갖는 테두리 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
width: 200px; /* 너비 200px */
height: 150px; /* 높이 150px */
border: 5px dotted orange /* 테두리 설정 */
}
</style>
<title>border 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML![dottedbox](https://i0.wp.com/suover.com/wp-content/uploads/2023/11/image-12.png?resize=336%2C265&ssl=1)
border: 5px dotted orange 이 적용 된 스타일입니다.
방향 설정
방향을 지정해서 설정해 보겠습니다.
오른쪽과 아래쪽에 2px의 너비, dotted 스타일, green 색상을 갖는 테두리 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
width: 200px; /* 너비 200px */
height: 150px; /* 높이 150px */
border-right: 2px dotted green; /* 테두리 설정 */
border-bottom: 2px dotted green; /* 테두리 설정 */
}
</style>
<title>border 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML![border_right_bottom_box](https://i0.wp.com/suover.com/wp-content/uploads/2023/11/image-13.png?resize=329%2C265&ssl=1)
border-right: 2px dotted green;
border-bottom: 2px dotted green;
방향 마다 다른 스타일
이번에는 border-style 로 4방향 다른 style 을 적용해 보겠습니다.
border-style 에 4개의 속성을 적게 되면,
처음부터 차례대로 위, 오른쪽, 아래, 왼쪽 시계방향으로 각각 다른 스타일이 적용 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
width: 200px; /* 너비 200px */
height: 150px; /* 높이 150px */
border-width: 2px; /* 테두리 너비 */
border-style: solid inset dotted groove; /* 테두리 스타일 */
}
</style>
<title>border 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML![borderstylebox](https://i0.wp.com/suover.com/wp-content/uploads/2023/11/image-10.png?resize=329%2C249&ssl=1)
border-style: solid inset dotted groove 12시부터 시계 방향으로 적용 됩니다.
결론
이 글에서는 CSS의 border 속성을 사용하여 웹 요소에 테두리를 설정하고 꾸미는 방법에 대해 다루었습니다. 테두리는 웹 디자인에서 중요한 역할을 하며, 시각적인 디자인을 향상 시킵니다.