[CSS] CSS 테두리(border)와 크기(width/height)

width/height 속성

width와 height는 요소의 너비와 높이를 설정하는 속성이다. 기본적으로, 요소의 width와 height는 콘텐츠 영역(content-box) 을 기준으로 설정된다. 테두리(border)와 패딩(padding)은 기본 크기에 포함되지 않는다.

border 속성

테두리와 관련된 속성은 여러 가지가 있다. 하나씩 살펴보자.

1) border-width

border-width는 테두리 두께를 변경하는 속성이다.
값으로 px, em, % 등의 단위를 사용할 수 있다.

div {
    border-width: 5px;
}

2) border-color

border-color는 테두리 색상을 변경하는 속성이다.
값으로 색상 이름, HEX 코드, RGB, 또는 HSL 값을 사용할 수 있다.

div {
    border-color: red;
}

3) border-style

border-style는 테두리 스타일을 변경하는 속성이다.
테두리 스타일에는 여러 값이 있다.

• solid: 실선
• dotted: 점선
• dashed: 대시선
• double: 이중선
• groove: 테두리가 파여 있는 것처럼 보임
• ridge: 테두리가 솟아 있는 것처럼 보임
• none: 테두리 없음
• hidden: 보이지 않는 테두리

div {
    border-style: solid;
}

4) box-sizing

box-sizing 속성은 요소의 크기를 계산할 때 테두리(border)와 패딩(padding) 을 포함할지 여부를 결정한다.

• content-box (기본값)
  • width와 height는 콘텐츠 영역을 기준으로 설정된다.
  • 테두리와 패딩은 크기에 포함되지 않는다.
• border-box
  • width와 height가 콘텐츠 영역 + 패딩 + 테두리를 포함한다.

div {
    width: 200px;
    height: 200px;
    border: 5px solid black;
    box-sizing: border-box;
}

위와 같이 작성하면, div 전체 크기를 (200px, 200px)로 유지할 수 있다.

5) border(width, style, color)

테두리의 두께, 스타일, 색상을 한 번에 설정할 수 있는 단축 속성이다.

사용법

border: width, style, color;

예시

div {
    border: 5px solid black;
}

6) border-radius

border-radius는 요소 테두리 모서리의 곡률을 조정하는 특성이다.
값은 픽셀(px) 또는 백분율(%) 로 설정할 수 있다.

• 50%: 요소를 완전한 원으로 만듦 (단, 요소의 너비와 높이가 같아야 한다.)
• 0: 모서리가 직각으로 설정된다.

div {
    width: 100px;
    height: 100px;
    border: 5px solid #4ddbff;
    background-color: #ccf5ff;
    border-radius: 50%; /* 또는 border-radius: 50px; */
}

50%로 주면 원을 만들 수 있다.