III. 박스 모델 - 2. 테두리 스타일 지정하기

📁Web Developing/CSS 기초

III. 박스 모델 - 2. 테두리 스타일 지정하기

Hush 2022. 6. 4. 00:54

박스 모델의 방향

박스 모델은 상하좌우 네개의 방향이 있어서 테두리나 마진, 패등 등을 지정할 때 한거번에 똑같이 지정하거나 모두 다르게 지정할 수도 있다.

박스 모델의 방향 top, right, bottom, left가 있으며, 시계방향 순서인 이 순서를 기억해 두자.

border-style : 테두리 스타일을 지정

기본값은 none이어서 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다.

그러므로 테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야 한다.

종류	설명
none	테두리 없음. 기본값.
hidden	테두리 감춤. 표에서 border-collapse : collapse일 경우 다른 테두리도 표시되지 않음.
solid	테두리를 실선으로 표시
dotted	테두리를 점선으로 표시
dashed	테두리를 짧은 직선으로 표시
double	테두리를 이중선으로 표시. 두 선의 간격이 border-width
groove	테두리를 창에 조각한 것처럼 표시. 홈에 파인 듯 한 입체 느낌
inset	표에서 border-collapse : seperate 일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시. collapse일 경우 groove와 똑같이 표시
outset	표에서 border-collapse : seperate 일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시. collapse일 경우 ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시

border-width : 테두리 두께를 지정

1px, 5px처럼 크기를 직접 입력할 수도 있고, thin이나 medium 같은 예약어를 선택할 수도 있다.

기본형은 다음과 같다

border-width: <크기> | thin | medium | thick

상하좌우 네 방향의 테두리 스타일을 지정할 수도 있다.

만약 속성값을 한개 사용하면 상하좌우 모두 적용된다.

만약 속성값을 두개 사용하면 첫째 값은 상하에, 둘째 값은 좌우에 적용된다.

만약 속성값을 세개 사용하면 세 값이 top-right-bottom 순서대로 적용된다. 마지막 left속성값은 마주보는 right 속성값과 똑같이 적용된다.

네개를 다 지정하면 순서대로 적용된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            table {
                caption-side: bottom;
                border: 1px solid black;
                border-collapse: collapse;
            }
            td, th {
                border : 1px dotted black;
                padding: 10px;
                text-align : center;
            }
        </style>
    </head>
    <body>
        <h1 style="border : solid; border-width : 2px;">box1</h1>
        <h1 style="border : solid; border-width : thick thin;">box2</h1>
        <h1 style="border : solid; border-width : thick thin thin;">box3</h1>
        <h1 style="border : solid; border-width : 12px 8px 4px 1px;">box4</h1>
    </body>
</html>

border-color : 테두리 색상을 지정

박스 모델에서 테두리 색상을 지정할 수 있다.

border-color 속성을 사용해서 4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고,

border-top-color 처럼 border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있다.

border : 테두리 스타일을 묶어서 지정

앞서 언급한 속성들을 한번에 지정하는 방법을 알아보자.

우선 네개 방향의 테두리 스타일이 같다면 border 속성만 사용하여 속성값을 적어주자.

이때 속성값 순서는 상관 없다.

border : 3px dotted blue

만약 네 방향의 스타일이 다르다면 border-top 처럼 방향까지 지정하는 속성을 사용하자.

border-radius : 둥근 테두리 만들기

border-radius 속성을 사용하면 꼭짓점 부분에 원이 있다고 가정하여 둥글게 처리한다.

이때 원의 반지름을 이용하면 둥근 정도를 나타낼 수 있다.

border-radius : <크기> | <백분율>

종류	설명
<크기>	반지름 크기를 px, em의 단위와 함께 수치로 표시합니다
<백분율>	현재 요소의 크기를 기준으로 비율(%)로 지정합니다

그리고 border-radius 속성을 사용하여 이미지를 원 형태로 만들 수 있다.

이미지의 가로 세로 너비를 동일하게 설정한 뒤, border-radius를 너비값의 절반으로 설정하면 원 형태가 된다.

꼭짓점마다 border-radius를 다르게 설정하고 싶다면 border과 radius사이에 위치를 나타내는 예약어를 넣어 사용한다.

예를 들어 왼쪽 윗부분이라면 border-top-left-radius라는 속성을 사용하면 된다.

top-left	top-right
bottom-left	bottom-right

꼭짓점을 타원으로 만들고 싶다면 반지름 대신 타원의 가로반지름과 세로반지름 쌍을 입력해주면 된다.

입력 형식은 다음과 같다.

-모든 모서리를 동일하게

border-radius : <가로 반지름> / <세로 반지름>;

-각 모서리를 다르게

border-위치-radius : <가로 반지름> <세로 반지름>

저작자표시 (새창열림)