CSS 박스 모델( border, border-radius)

border 속성은 HTML 요소의 테두리를 정의하고 스타일링하는 데 사용된다. 테두리는 요소의 외곽을 둘러싸는 선으로, 요소를 시각적으로 구분하거나 강조하는 데 사용된다. border 속성은 테두리의 두께, 스타일, 색상을 조합하여 정의할 수 있다.

 

1. border 속성의 기본 사용법

border 속성을 사용하면, 테두리의 여러 속성(두께, 스타일, 색상)을 개별적으로 지정하지 않고, 한 번에 설정할 수 있다.

일반적으로 테두리의 세 가지 주요 속성인 두께(border-width), 스타일(border-style), 색상(border-color)을 각각 따로 지정할 수 있습니다. 하지만, border 속성을 사용하면 이 세 가지를 한 줄의 코드로 동시에 설정할 수 있다.

/* 개별 속성 사용 */
.box {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

 

예를들어 이렇게 , 코드를 작성한다면, 코드가 너무 길어지기 때문에, 

/* 단축 속성 사용 */
.box {
    border: 2px solid black;
}

 

이처럼 border 단축 속성을 사용하면 세 가지 속성을 한 줄로 간편하게 지정할 수 있다.

 

 

2. border-width (테두리 두께)

border-width 속성은 테두리의 두께를 설정하는 데 사용됩니다. 두께는 픽셀(px), em, rem 등의 단위를 사용할 수 있으며, 상대적인 값(thin, medium, thick)도 사용할 수 있다.

 

 

3. border-style (테두리 스타일)

border-style 속성은 테두리의 스타일을 설정한다. 이 속성은 다양한 스타일 옵션을 제공하며, 그 중 일부는 다음과 같다. 

 

• solid: 실선
• dashed: 대시선
• dotted: 점선
• double: 이중선
• groove: 입체적인 홈 효과
• ridge: 입체적인 돌출 효과
• inset: 요소가 눌려 보이는 효과
• outset: 요소가 튀어나온 것 같은 효과
• none: 테두리 없음
• hidden: 숨겨진 테두리

보통 solid, dashed, dotted, bouble 을 많이 사용한다. 

 

 

4. 테두리의 개별 면 설정

각 면(위, 오른쪽, 아래, 왼쪽)의 테두리 속성을 개별적으로 설정할 수 있다. 이를 통해 각 면에 다른 두께, 스타일, 색상을 적용할 수 있다.

 

• border-top: 위쪽 테두리 설정
• border-right: 오른쪽 테두리 설정
• border-bottom: 아래쪽 테두리 설정
• border-left: 왼쪽 테두리 설정

 

5. border-radius (모서리 둥글게 하기)

border-radius 속성은 테두리의 모서리를 둥글게 만드는 데 사용된다. 이 속성은 원형 테두리나 둥근 사각형을 만들 때 사용한다. 값은 픽셀(px) 또는 백분율(%)로 설정할 수 있으며, 백분율을 사용하면 완전한 원형을 만들 수 있다.