Chapter 2-5 테두리 스타일(CSS)

HTML & CSS

Chapter 2-5 테두리 스타일(CSS)

Chansman 2025. 3. 31. 10:24

📌 CSS 테두리(border) 스타일 활용법

웹 디자인에서 테두리는 요소의 경계를 명확하게 표시하여 가독성을 높이고 시각적으로 요소를 구분하는 데 매우 유용합니다. 이번 포스팅에서는 CSS를 이용하여 테두리를 꾸미는 다양한 방법을 알아보겠습니다.

📌 테두리(border) 속성 살펴보기

테두리를 설정할 때는 다음과 같은 CSS 속성을 사용합니다.

속성명 설명

border-width	테두리의 두께 설정
border-style	테두리의 스타일(실선, 점선, 겹선 등) 설정
border-color	테두리 색상 설정
border	위의 세 가지 속성을 한 번에 설정할 수 있는 단축 속성

예시 코드:

.box {
    border-width: 2px;
    border-style: dashed;
    border-color: blue;
}

/* 또는 단축 속성으로 한번에 */
.box {
    border: 2px dashed blue;
}

📌 테두리 스타일(border-style) 옵션

테두리 스타일로는 다음과 같은 것들이 있습니다:

solid: 실선
dashed: 긴 점선
dotted: 짧은 점선
double: 이중 실선
groove: 입체적 파인 느낌
ridge: 입체적 튀어나온 느낌
inset: 안쪽으로 들어간 효과
outset: 바깥쪽으로 튀어나온 효과

📌 모서리 둥글게 만들기(border-radius)

CSS의 border-radius 속성을 이용하여 요소의 모서리를 둥글게 설정할 수 있습니다.

사용법:

.box {
    border-radius: 10px; /* 네 모서리 모두 동일하게 둥글게 */
}

각 모서리마다 서로 다른 반경 값을 지정할 수도 있습니다.

.box {
    border-radius: 10px 20px 30px 40px; /* 시계방향(좌상단, 우상단, 우하단, 좌하단)으로 지정 */
}

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        <title>테두라</title>

        <style>
            .area{
                width: 200px;
                height: 100px;
            }

            .red{
                border-width: 3 px;
                border-style: solid;
                border-color: red;
            }

            .green{
                border: 3px solid green;
                border-radius: 20px;
            }

            /* .green{
                border: 3px solid green;
                border-radius: 10px 20px 30px 40px 왼쪽상단부터 시계방향순서서
            } */
        
        
        </style>

          

    </head>
    <body>
        <h2>현진영 - 흐린 기억속의 그대</h2>
        <p class="red">안개빛 조명은 흐트러진 내몸을 감싸고</p>
        <!-- 두개의 클래스값을 한번에 적용하여 각각 클레스별로 속성을 부여할수있다. -->
        <!-- HTML 요소에는 여러 개의 클래스를 공백으로 구분해서 동시에 지정할 수 있습니다.
        그리고 CSS에서는 각각의 클래스 이름을 기준으로 개별 스타일을 적용할 수 있어요. -->
        <p class="area green">술에 취해 비틀거리는 나의모습 이제는 싫어</p>     


    </body>
</html>

<!-- HTML 요소에는 여러 개의 클래스를 공백으로 구분해서 동시에 지정할 수 있습니다.

그리고 CSS에서는 각각의 클래스 이름을 기준으로 개별 스타일을 적용할 수 있어요. -->

✅ 복습 & 활용 포인트

테두리는 요소를 시각적으로 구분하는 데 매우 유용
border 단축 속성으로 간단하게 스타일 지정 가능
border-radius를 활용해 디자인을 부드럽고 세련되게 표현 가능

CSS의 테두리 스타일을 다양하게 활용하여 웹페이지의 디자인을 한층 업그레이드 해보세요!