테두리 두께 정하는 속성

CSS
Created 2024-04-03 Last Modified 2024-04-04

1 개요
2 문법
3 예제

개요

border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다.

border-top-width
border-right-width
border-bottom-width
border-left-width

문법

border-width: medium | thin | thick | length | initial | inherit;

initial : 기본값으로 설정한다. 기본값은 medium이다.
inherit : 부모 요소의 속성값을 상속받는다.

속성값은 한 개에서 네 개까지 정할 수 있다.

다음은 모든 테두리의 두께를 xx로 만든다.

border-width: xx

다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 만든다.

border-width: xx yy

다음은 위쪽 두께는 xx로, 왼쪽과 오른쪽의 두께는 yy로, 아래쪽의 두께는 zz로 만든다.

border-width: xx yy zz

다음은 위쪽 두께는 xx로, 오른쪽 두께는 yy로, 아래쪽 두께는 zz로, 왼쪽 두께는 ww로 만든다.

border-width: xx yy zz ww

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      p {
        margin: 20px 0px;
        padding: 10px 20px;
        font-family: Consolas;
        font-style: italic;
        border-style: solid;
        border-color: #e3f2fd;
      }
      .a {
        border-width: 10px;
      }
      .b {
        border-width: 10px 20px;
      }
      .c {
        border-width: 10px 20px 30px;
      }
      .d {
        border-width: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <p class="a">border-width: 10px;</p>
    <p class="b">border-width: 10px 20px;</p>
    <p class="c">border-width: 10px 20px 30px;</p>
    <p class="d">border-width: 10px 20px 30px 40px;</p>
  </body>
</html>

CSS

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...

CSS / border / 테두리 만드는 속성

개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...

CSS / Grid / display

display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 표(table) 꾸미기 / 배경색 만들기

배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...

CSS / clip / 요소의 특정 부분만 보이게 하는 속성

개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...

CSS / Flex / align-content

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...

CSS / 구분선 만들기

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...