테두리

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 36번째.

CSS에서 border는 요소를 둘러싸는 선으로, 다른 요소와 분리하고 그 경계를 정의합니다.

border 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: 테두리의 두께로, 픽셀(px), em(em) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다. thin, medium, thick과 같은 키워드를 사용할 수도 있습니다.

border-style: 테두리의 스타일로, 다음 중 하나일 수 있습니다:
- dotted: 일련의 점
- dashed: 일련의 대시(파선)
- solid: 실선
- double: 두 개의 실선

border-color: 테두리의 색상으로, 색상 이름, 16진수 값, RGB 값 또는 HSL 값을 사용하여 지정할 수 있습니다.

또한 단축 표기법(shorthand notation)을 사용하여 세 가지 테두리 속성을 한 번에 설정할 수 있습니다:

selector {
    border: width style color;
}

예를 들어:

p {
    border: 2px solid blue;
}

이 예제에서 모든 <p> (단락) 요소는 너비가 2px인 실선 파란색 테두리를 가집니다.

챌린지

쉬움

Friday, Saturday, Sunday의 영화 시간표를 나타내는 세 개의 <div> 요소가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 border 속성을 사용하여 이들을 스타일링하는 것입니다.

Friday 시간표를 3px solid black 테두리로 스타일링하세요.
Saturday 시간표를 4px dashed blue 테두리로 스타일링하세요.
Sunday 시간표를 5px dotted green 테두리로 스타일링하세요.

치트 시트

테두리(border)는 요소를 둘러싸는 선으로, 다른 요소와 구분하고 경계를 정의합니다.

테두리 속성:

border-width: 두께 (px, em 또는 thin, medium, thick과 같은 키워드)
border-style: 스타일 (dotted, dashed, solid, double)
border-color: 색상 (색상 이름, hex, RGB, HSL)

개별 속성:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

단축 표기법:

selector {
    border: width style color;
}

예시:

p {
    border: 2px solid blue;
}

직접 해보기

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>