Categories: CSS

CSS border 테두리 설정 보더 꾸미기

css

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

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

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: 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>