2.3 테두리 처리

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

2.3 테두리 처리

CSS에서 테두리(Border)는 요소의 경계선을 설정하여 시각적으로 요소를 구분하는 데 사용됩니다. 테두리는 디자인의 중요한 요소로, 사용자에게 정보를 전달하고 요소의 중요성을 강조하는 데 기여합니다. 이번 장에서는 테두리의 기본 속성부터 다양한 옵션을 사용하여 테두리를 다루는 방법을 배워보겠습니다.

1. 테두리의 기본 이해

테두리는 다음의 세 가지 속성으로 구성됩니다:

border-width: 테두리의 두께를 설정합니다.
border-style: 테두리의 스타일을 설정합니다. (예: solid, dashed, dotted 등)
border-color: 테두리의 색상을 설정합니다.

이 세 가지 속성을 조합하여 테두리를 디자인할 수 있습니다.

2. 기본 예제

아래는 간단한 HTML 구조와 CSS로 테두리를 적용하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테두리 처리 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">테두리가 있는 박스입니다.</div>
</body>
</html>

/* styles.css 파일 */
.box {
    border-width: 5px; /* 두께 */
    border-style: solid; /* 스타일 */
    border-color: blue; /* 색상 */
    padding: 20px; /* 내부 여백 */
    text-align: center; /* 텍스트 정렬 */
}

위의 코드에서는 5px 두께의 파란색 실선 테두리를 가진 박스를 생성합니다. padding 속성을 사용하여 박스 내용과 테두리 사이에 내부 여백을 추가했습니다.

3. 실습

이번 실습에서는 두 개의 박스를 사용하여 서로 다른 테두리 스타일을 적용해 보겠습니다. 같은 HTML 코드를 사용하지만 CSS 부분에서 각기 다른 테두리 속성을 적용하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테두리 스타일 실습</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box solid">실선 테두리 박스</div>
    <div class="box dashed">대쉬 테두리 박스</div>
</body>
</html>

/* styles.css 파일 */
.box {
    padding: 20px;
    text-align: center;
    margin: 10px;
}

.box.solid {
    border: 5px solid red; /* 실선 테두리 */
}

.box.dashed {
    border: 5px dashed green; /* 대쉬 테두리 */
}

여기서 solid 클래스를 가진 박스는 빨간 실선 테두리를 갖고, dashed 클래스를 가진 박스는 초록색 대쉬 테두리를 갖습니다.

4. 정리

이번 장에서 우리는 CSS의 테두리 속성을 배워 다양한 테두리 스타일을 적용하는 방법에 대해 알아보았습니다. border-width, border-style, border-color 세 가지 속성을 통해 원하는 테두리를 자유롭게 꾸밀 수 있다는 점을 명심하세요.

실습 과제

자신만의 테두리 스타일을 가진 박스를 만들고, 각각의 박스에 대해 다른 색상, 두께, 스타일을 부여해 보세요. 여러 개의 박스를 추가하여 다양성을 줄 수 있습니다.

자주 발생하는 오류 및 해결 방법

테두리가 보이지 않음: 테두리 스타일이 none으로 설정되어 있진 않은지, 혹은 테두리 두께가 0으로 설정되어 있지 않은지 확인하세요.
박스가 예상한 것보다 작음: width 또는 height 속성이 제대로 설정되었는지, padding이나 margin 사이의 조화로운 관계를 고려해야 합니다.

이제 실습을 통해 더 나아가보세요!

2.3 테두리 처리

2.3 테두리 처리

1. 테두리의 기본 이해

2. 기본 예제

3. 실습

4. 정리

실습 과제

자주 발생하는 오류 및 해결 방법

댓글 0