WEB LAB
    HTML/CSS 2.7 · 2부. CSS 기초

    배경과 테두리

    상자에 색과 선을 입힙니다. 표를 읽기 좋게 만듭니다.

    예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문
    개념 설명

    상자를 꾸미는 것들

    2.6 에서 상자의 자리를 정했습니다. 이 단원에서는 그 상자에 색과 선을 입힙니다. 표를 읽기 좋게 만드는 것도 여기서 다룹니다.

    최소 예제 · 편집 가능

    테두리

    border 는 두께 · 모양 · 색 셋을 한 줄로 적습니다. 차례는 상관없지만 셋 다 있어야 보입니다. 

    <p class="a">실선 테두리</p>
<p class="b">아래만 선을 그었습니다</p>
<p class="c">모서리를 둥글게</p>
<p class="d">동그라미</p>
    .a {
  border: 2px solid #6e56cf;  /* 두께 모양 색 */
  padding: 8px;
}

/* 한 방향만 그을 수 있습니다 */
.b { border-bottom: 1px dashed #999; padding-bottom: 8px; }

.c {
  border: 1px solid #d9cff7;
  border-radius: 12px;
  padding: 8px 14px;
}

/* 50% 면 동그라미가 됩니다 */
.d {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: #ece7fb;
  text-align: center; line-height: 90px;
}

    모양에는 solid(실선)·dashed(파선)· dotted(점선)이 주로 쓰입니다. 모양을 빠뜨리면 선이 아예 나오지 않습니다 — 기본값이 none 이기 때문입니다.

    최소 예제 · 편집 가능

    배경

    <div class="flat">한 가지 색</div>
<div class="grad">색이 이어지는 배경</div>
<div class="shadow">그림자를 넣었습니다</div>
    .flat, .grad, .shadow {
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 8px;
}

.flat { background: #ece7fb; }

/* 방향과 색 둘을 적습니다 */
.grad {
  background: linear-gradient(to right, #ece7fb, #fff);
}

/* 가로 세로 번짐 색 */
.shadow {
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

    box-shadow 는 가로 이동 · 세로 이동 · 번짐 · 색 차례입니다. 그림자는 자리를 차지하지 않아 옆 요소를 밀지 않습니다.

    상세 사용법

    표 꾸미기

    1.4 에서 만든 표는 선이 없었습니다. 표를 읽기 좋게 만드는 데는 세 가지면 충분합니다. 

    <table>
  <tr><th>부서</th><th>담당</th></tr>
  <tr><td>영업부</td><td>홍길동</td></tr>
  <tr><td>개발부</td><td>김철수</td></tr>
</table>
    /* ① 칸 사이 틈을 없애 선을 하나로 만듭니다 */
table { border-collapse: collapse; width: 100%; }

/* ② 칸마다 선과 여백 */
th, td {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
  text-align: left;
}

/* ③ 머리 줄 강조 */
th { background: #f4f2fb; }

    border-collapse: collapse 를 빼고 다시 그려 보십시오. 칸마다 선이 따로 그려져 두 겹으로 보입니다.

    흔한 실수

    세 가지

    • 테두리 모양을 빠뜨립니다. border: 1px #999 는 아무것도 그리지 않습니다. 기본 모양이 none 이기 때문입니다.
    • 테두리가 자리를 차지하는 것을 잊습니다. 마우스를 올렸을 때만 테두리를 주면 그때마다 요소가 밀립니다. 처음부터 투명한 테두리를 두거나 outline 을 사용하십시오.
    • 표에 border-collapse 를 지정하지 않습니다. 선이 두 겹으로 보이고 칸 사이가 벌어집니다.
    실습 문제

    직접 해보기

    1. 안내 상자 만들기 난이도 중

    왼쪽에만 굵은 색 선이 있고, 옅은 바탕에 모서리가 둥근 안내 상자를 만드십시오.

    한 방향만 그리는 것은 border-left 입니다. 모서리는 border-radius 입니다.
    .notice { border-left: 4px solid #6e56cf; background: #f4f2fb; border-radius: 6px; padding: 12px 16px; }
    요약

    정리

    • border 는 두께 · 모양 · 색을 함께 적습니다. 모양이 없으면 그려지지 않습니다.
    • border-radius: 50% 는 동그라미를 만듭니다.
    • box-shadow 는 자리를 차지하지 않습니다.
    • 표에는 border-collapse: collapse 를 지정합니다.