박스

테두리, 배경, 그림자 - 콘텐츠를 감싸는 다양한 박스 CSS

박스 - 둥근 테두리
#박스 #테두리 #둥근모서리
✓ ✓ ✓ ⭐
박스 - 각진 테두리
#박스 #테두리 #사각형
✓ ✓ ✓
박스 - 상단 컬러 라인
#박스 #테두리 #상단색상
✓ ✓ ✓ ⭐
박스 - 왼쪽 컬러 라인
#박스 #테두리 #왼쪽색상
✓ ✓ ✓
박스 - 양쪽 선
#박스 #작가소개 #프롤로그
✓ ✓ ✓
박스 - 배경색 + 테두리
#박스 #배경색 #테두리
✓ ✓ ✓
박스 - 베이지 배경
#박스 #배경색 #베이지
✓ ✓ ✓
박스 - 그림자
#박스 #그림자 #모던
△ ✓ ✓
박스 - 점선 테두리
#박스 #점선 #테두리
✓ ✓ ✓
박스 - 도트 테두리
#박스 #도트 #점선
✓ ✓ ✓
박스 - 이중 테두리
#박스 #이중선 #격식
✓ ✓ ✓
노트/팁 박스
#박스 #팁 #노트 #제목포함
✓ ✓ ✓ ⭐
경고 박스
#박스 #경고 #빨강 #제목포함
✓ ✓ ✓
정보 박스
#박스 #정보 #파랑 #제목포함
✓ ✓ ✓
박스 - 상하 라인
#박스 #라인 #상하선
✓ ✓ ✓
접이식 박스
#박스 #접이식 #토글 #details
△ △ △
편지/서신 형식
#편지 #서신 #문학 #이탤릭
✓ ✓ ✓
워크시트/활동지
#활동지 #워크시트 #빈칸 #참여
✓ ✓ ✓ ⭐
박스 - 둥근 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="box-rounded" 지정 필요 */
.box-rounded {
    padding: 1em 1.2em;
    border: 1px solid #DDDDDD;       /* 테두리 — 1px=두께, #색상 */
    border-radius: 0.5em;            /* 둥글기 — 숫자↑ 더 둥글어짐 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-rounded">
  <p>감정을 기록하는 습관은 자기 이해의 첫걸음입니다. 매일 5분, 오늘 느낀 감정을 적어보세요.</p>
</div>

border-radius: 0.5em — 모서리를 둥글게 만듭니다.

  • 0 = 각진 직각
  • 0.3em = 살짝 둥근
  • 0.5em = 적당히 둥근 (추천)
  • 1em = 많이 둥근

가장 범용적인 박스 스타일입니다. 팁, 참고사항, 활동 안내 등에 사용하세요.

박스 - 각진 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-sharp" 지정 필요 */
.box-sharp {
    padding: 1em 1.2em;
    border: 2px solid #333333;       /* 테두리 — 2px=두께, #진한색 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-sharp">
  <p>중요: 이 연습은 조용한 공간에서 진행해야 효과적입니다.</p>
</div>

border-radius 없이 직각 모서리를 사용합니다. 진한 테두리로 강한 강조 효과입니다.

border: 2px solid #333333 — 두꺼운 진한 테두리로 주의 사항, 중요 안내에 적합합니다.

둥근 박스가 부드러운 느낌이라면, 각진 박스는 딱딱하고 공식적인 느낌입니다.

박스 - 상단 컬러 라인
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="box-top-color" 지정 필요 */
.box-top-color {
    padding: 1em 1.2em;
    border: 1px solid #EEEEEE;       /* 기본 테두리 — 연한 회색 */
    border-top: 4px solid #2FA599;   /* 상단만 색상 — 4px=두께, #색상 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-top-color">
  <p>감정 일기를 쓸 때는 판단하지 마세요. 느낀 그대로를 적는 것이 중요합니다.</p>
</div>

상단에만 굵은 색상 선을 넣어 포인트를 줍니다. 가장 인기 있는 박스 디자인 중 하나입니다.

border-top: 4px solid #2FA599 — 상단만 두껍고 색상 있는 선. 나머지는 얇은 회색.

색상을 바꾸면 다른 용도로 구분 가능: 팁(민트), 주의(주황), 위험(빨강) 등

박스 - 왼쪽 컬러 라인
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-left-color" 지정 필요 */
.box-left-color {
    padding: 1em 1.2em;
    border: 1px solid #EEEEEE;       /* 기본 테두리 — 연한 회색 */
    border-left: 4px solid #5B7FD4;  /* 왼쪽만 색상 — 4px=두께, #색상 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-left-color">
  <p>참고: 이 기법은 인지행동치료(CBT)의 핵심 원리를 바탕으로 합니다.</p>
</div>

왼쪽 컬러 라인 + 전체 테두리 조합입니다. 상단 컬러 라인의 변형입니다.

인용문 왼쪽 선과 비슷하지만, 전체 테두리가 있어서 더 박스 느낌이 납니다.

참고사항, 보충 설명 등에 잘 어울립니다.

박스 - 양쪽 선
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="section-special" 지정 필요 */
.section-special {
    padding: 0.5em 1.5em;                /* 안쪽 여백 */
    border-left: 2px solid #1A5C54;      /* 왼쪽 선 */
    border-right: 2px solid #1A5C54;     /* 오른쪽 선 */
    margin: 1.5em 1em;                   /* 바깥 여백 */
}
HTML
<div class="section-special">
  <p>저자는 15년간 심리상담을 해오며 수많은 사람들의 마음을 들여다보았습니다.</p>
</div>

border-left + border-right — 양쪽에 선을 넣어 특별한 섹션을 표시합니다.

작가 소개, 프롤로그, 에필로그 등 본문과 구분이 필요한 곳에 사용하세요.

💡 시길 팁시길 코드 뷰에서 <div class="section-special">로 감싸면 됩니다.
박스 - 배경색 + 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-bg" 지정 필요 */
.box-bg {
    padding: 1em 1.2em;
    background-color: #F0F7F5;        /* 배경색 — 연한 민트 */
    border: 1px solid #D4EFE6;       /* 테두리 — 배경보다 약간 진하게 */
    border-radius: 0.3em;            /* 살짝 둥근 모서리 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-bg">
  <p>하루 10분 명상은 스트레스 호르몬(코르티솔)을 평균 25% 감소시킵니다.</p>
</div>

배경색과 테두리를 동시에 사용합니다. 배경색만 쓸 때보다 경계가 더 뚜렷합니다.

팁: 배경색과 테두리 색은 같은 계열로 맞추면 자연스럽습니다.

  • 민트 계열: 배경 #F0F7F5, 테두리 #D4EFE6
  • 베이지 계열: 배경 #FDF6EC, 테두리 #F0DFC0
  • 회색 계열: 배경 #F5F5F5, 테두리 #E0E0E0
박스 - 베이지 배경
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-beige" 지정 필요 */
.box-beige {
    padding: 1em 1.2em;
    background-color: #FDF6EC;        /* 배경색 — 연한 베이지 */
    border: 1px solid #F0DFC0;       /* 테두리 — 베이지 계열 */
    border-radius: 0.3em;
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-beige">
  <p>매일 아침 감사 일기를 쓰면, 뇌의 긍정 회로가 강화됩니다.</p>
</div>

따뜻한 베이지 계열 배경 박스입니다.

민트 계열이 차가운 느낌이라면, 베이지는 따뜻하고 부드러운 느낌을 줍니다.

자기계발서, 에세이, 힐링 도서에 잘 어울립니다.

박스 - 그림자
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 ✓ 알라딘 ✓
CSS
/* class="box-shadow" 지정 필요 */
.box-shadow {
    padding: 1em 1.2em;
    border: 1px solid #EEEEEE;
    box-shadow: 0 2px 8px #00000014; /* 그림자 — 가로 세로 퍼짐 색상 */
    border-radius: 0.3em;
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-shadow">
  <p>글쓰기는 생각을 정리하는 가장 강력한 도구입니다. 머릿속 혼란을 종이 위에 펼쳐보세요.</p>
</div>

box-shadow: 0 2px 8px — 카드가 떠있는 듯한 그림자 효과입니다.

  • 0 = 가로 위치 (0이면 중앙)
  • 2px = 세로 위치 (아래로 약간)
  • 8px = 퍼짐 정도 (숫자↑ 더 넓게)
⚠️ 뷰어 참고교보문고에서 box-shadow가 안 보일 수 있습니다. 안 보여도 테두리는 남으므로 기능엔 문제없습니다.
박스 - 점선 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-dashed" 지정 필요 */
.box-dashed {
    padding: 1em 1.2em;
    border: 2px dashed #CCCCCC;      /* 점선 — dashed=대시선 */
    border-radius: 0.3em;
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-dashed">
  <p>여기에 자신만의 감정 단어를 적어보세요. 정해진 답은 없습니다.</p>
</div>

border: 2px dashed — 대시 점선 테두리입니다.

  • dashed = 대시선 (- - -)
  • dotted = 도트선 (. . .)
  • solid = 실선 (───)
  • double = 이중선

활동지, 빈칸 채우기 등 독자가 직접 참여하는 섹션에 잘 어울립니다.

박스 - 도트 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-dotted" 지정 필요 */
.box-dotted {
    padding: 1em 1.2em;
    border: 2px dotted #BBBBBB;      /* 도트선 — dotted=점선 */
    border-radius: 0.3em;
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-dotted">
  <p>오늘 가장 기억에 남는 순간은 무엇인가요?</p>
</div>

border: 2px dotted — 동글동글한 점선 테두리입니다.

대시선(dashed)보다 더 부드럽고 귀여운 느낌입니다.

질문 박스, 활동지, 아동용 도서에 잘 어울립니다.

박스 - 이중 테두리
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-double" 지정 필요 */
.box-double {
    padding: 1em 1.2em;
    border: 4px double #999999;      /* 이중선 — 4px 이상 필요 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-double">
  <p>본 저작물의 내용을 무단으로 복제, 전송, 배포하는 것을 금합니다.</p>
</div>

border: 4px double — 이중선 테두리입니다. 두께가 4px 이상이어야 이중선이 보입니다.

격식 있는 문서, 공지사항, 법적 고지 등에 적합합니다.

전통적이고 공식적인 느낌을 줍니다.

노트/팁 박스
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="note-box" + class="note-title" 지정 필요 */
.note-box {
    padding: 1em 1.2em;
    background-color: #FFF8E7;        /* 배경색 — 연한 노랑 */
    border-left: 4px solid #F0C36D;   /* 왼쪽 선 — 4px=두께, #색상 */
    border-radius: 0 0.3em 0.3em 0;  /* 오른쪽만 둥글게 */
    margin: 1.5em 0;
    line-height: 1.8em;
}
.note-title {
    font-weight: bold;
    color: #D4883A;                   /* 제목 색상 */
    font-size: 0.85em;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}
HTML
<div class="note-box">
  <p class="note-title">TIP</p>
  <p>전자책은 다양한 기기에서 읽히므로, 고정 크기(px)보다 상대 단위(em)를 사용하세요.</p>
</div>

제목 + 내용으로 구성된 팁/노트 박스입니다.

border-radius: 0 0.3em 0.3em 0 — 왼쪽은 직각(선과 맞닿는 부분), 오른쪽만 둥글게.

제목을 바꿔서 다양하게 활용하세요: TIP, NOTE, WARNING, POINT 등

경고 박스
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="warning-box" + class="warning-title" 지정 필요 */
.warning-box {
    padding: 1em 1.2em;
    background-color: #FFF0F0;        /* 배경색 — 연한 빨강 */
    border-left: 4px solid #E74C3C;   /* 왼쪽 선 — 빨강 */
    border-radius: 0 0.3em 0.3em 0;
    margin: 1.5em 0;
    line-height: 1.8em;
}
.warning-title {
    font-weight: bold;
    color: #C0392B;                   /* 제목 색상 — 진한 빨강 */
    font-size: 0.85em;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}
HTML
<div class="warning-box">
  <p class="warning-title">WARNING</p>
  <p>이 연습 중 강한 감정이 올라오면 즉시 멈추고 전문가와 상담하세요.</p>
</div>

팁 박스의 경고 버전입니다. 빨간 계열 색상으로 주의를 끕니다.

색상만 바꾸면 다양한 용도의 박스를 만들 수 있습니다:

  • 노랑(#FFF8E7 + #F0C36D) = TIP
  • 빨강(#FFF0F0 + #E74C3C) = WARNING
  • 파랑(#F0F4FF + #5B7FD4) = NOTE
  • 초록(#F0F7F5 + #2FA599) = SUCCESS
정보 박스
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="info-box" + class="info-title" 지정 필요 */
.info-box {
    padding: 1em 1.2em;
    background-color: #F0F4FF;        /* 배경색 — 연한 파랑 */
    border-left: 4px solid #5B7FD4;   /* 왼쪽 선 — 파랑 */
    border-radius: 0 0.3em 0.3em 0;
    margin: 1.5em 0;
    line-height: 1.8em;
}
.info-title {
    font-weight: bold;
    color: #3A5BA0;                   /* 제목 색상 — 진한 파랑 */
    font-size: 0.85em;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}
HTML
<div class="info-box">
  <p class="info-title">NOTE</p>
  <p>이 연구는 2023년 하버드 심리학과에서 발표된 논문을 기반으로 합니다.</p>
</div>

팁 박스의 정보 버전입니다. 파란 계열 색상으로 참고 정보를 표시합니다.

학술적 내용, 출처 안내, 부가 설명 등에 적합합니다.

박스 - 상하 라인
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="box-lines" 지정 필요 */
.box-lines {
    padding: 1em 1.2em;
    border-top: 2px solid #2FA599;   /* 위 선 */
    border-bottom: 2px solid #2FA599; /* 아래 선 */
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
}
HTML
<div class="box-lines">
  <p>핵심 요약: 감정을 억누르지 말고, 인정하되 거리를 두고 바라보는 연습을 합니다.</p>
</div>

위아래 가로선만 있는 박스입니다. 좌우가 열려 있어 시원한 느낌을 줍니다.

핵심 요약, 챕터 요약 등에 잘 어울립니다.

양쪽 선 박스의 가로 버전이라고 생각하면 됩니다.

접이식 박스
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 △ 리디 △ 알라딘 △
CSS
/* HTML: 
 +  태그 사용 */
details.collapsible {
    border: 1px solid #DDDDDD;
    border-radius: 0.3em;
    padding: 0.5em 1em;
    margin: 1.5em 0;
}
details.collapsible summary {
    font-weight: bold;
    color: #333333;
    padding: 0.3em 0;
    cursor: pointer;                   /* 클릭 가능 표시 */
}
details.collapsible p {
    margin: 0.5em 0 0.3em;
    line-height: 1.8em;
    color: #555555;
}
HTML
<details class="collapsible">
  <summary>더 알아보기: 마음챙김이란?</summary>
  <p>마음챙김(mindfulness)은 현재 순간에 의도적으로 주의를 기울이되, 판단하지 않는 태도를 말합니다.</p>
</details>

HTML5 <details> + <summary> 태그로 접고 펼 수 있는 박스입니다.

클릭하면 내용이 보이고, 다시 클릭하면 숨겨집니다. CSS가 아닌 HTML 기능입니다.

부가 설명, 참고 정보, 용어 해설 등을 본문 흐름 없이 넣을 수 있습니다.

⚠️ 뷰어 참고교보/리디/알라딘 모두 details 태그 지원이 불안정합니다. 안 되는 뷰어에서는 항상 펼쳐진 상태로 보입니다 (기능 손실 없음).
편지/서신 형식
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓
CSS
/* class="letter" + class="salutation" + class="signature" 지정 필요 */
.letter {
    padding: 1.5em 2em;
    border: 1px solid #DDD;
    border-radius: 0.3em;
    margin: 1.5em 0;
    line-height: 1.8em;
    color: #333333;
    font-style: italic;               /* 기울임체 */
}
.letter .salutation {
    margin-bottom: 0.8em;
    font-weight: bold;
    font-style: normal;               /* 인사말은 기울임 해제 */
}
.letter .signature {
    text-align: right;
    margin-top: 1em;
    font-style: normal;
    color: #777777;
}
HTML
<div class="letter">
  <p class="salutation">사랑하는 나에게,</p>
  <p>오늘도 수고했어. 완벽하지 않아도 괜찮아. 네가 여기까지 온 것만으로 충분히 대단해.</p>
  <p class="signature">- 1년 후의 나로부터</p>
</div>

편지, 서신 형식의 박스입니다. 자기계발서, 에세이, 힐링 도서에서 자주 사용됩니다.

.salutation — 인사말을 굵게, 기울임 해제

.signature — 서명을 오른쪽 정렬 + 회색으로

"미래의 나에게 쓰는 편지", "독자에게 보내는 편지" 등의 형식에 활용하세요.

워크시트/활동지
PC에서 보면 미리보기와 코드 복사가 더 편해요
교보 ✓ 리디 ✓ 알라딘 ✓ ⭐ 추천
CSS
/* class="worksheet" + class="ws-q" + class="ws-line" 지정 필요 */
.worksheet {
    border: 2px dashed #CCCCCC;
    border-radius: 0.3em;
    padding: 1.2em 1.5em;
    margin: 1.5em 0;
}
.ws-q {
    font-weight: bold;
    color: #333333;
    margin: 0 0 0.5em;
    font-size: 0.95em;
}
.ws-line {
    border-bottom: 1px solid #CCC;   /* 빈칸 밑줄 */
    height: 2.2em;                    /* 줄 높이 */
    margin: 0.3em 0;
}
HTML
<div class="worksheet">
  <p class="ws-q">Q. 지금 가장 감사한 것 3가지를 적어보세요.</p>
  <div class="ws-line"></div>
  <div class="ws-line"></div>
  <div class="ws-line"></div>
</div>

독자가 직접 작성할 수 있는 활동지/워크시트입니다.

border: 2px dashed — 점선 테두리로 "작성 공간" 느낌을 줍니다.

.ws-line — 빈 div에 밑줄만 넣어 적는 줄을 만듭니다.

자기계발서, 코칭북, 워크북 등에서 필수적인 요소입니다. 줄 수를 늘리려면 <div class="ws-line"></div>를 추가하세요.