HTML/CSS 2.9 · 2부. CSS 기초

display 와 문서 흐름

요소가 놓이는 방식과 여백 상쇄를 봅니다. 3부 배치의 출발점입니다.

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

개념 설명

요소가 놓이는 방식

태그마다 자리를 차지하는 방식이 정해져 있습니다. 문단은 한 줄을 통째로 쓰고, strong 은 글자 사이에 끼어듭니다. 그 차이를 display 가 정합니다.

3부에서 배울 배치도 모두 이 속성에서 시작합니다. 여기서 기본을 정리합니다.

최소 예제 · 편집 가능

block 과 inline

<div class="b1">block 하나</div>
<div class="b1">block 둘</div>

<p>
  <span class="i1">inline 하나</span>
  <span class="i1">inline 둘</span>
</p>

<p>
  <span class="ib">inline-block</span>
  <span class="ib">inline-block</span>
</p>

/* 줄을 통째로 씁니다. 너비와 위아래 여백이 듣습니다. */
.b1 {
  background: #ece7fb;
  width: 200px;
  margin-bottom: 8px;
}

/* 글자처럼 흐릅니다. 너비와 위아래 여백이 듣지 않습니다. */
.i1 {
  background: #ece7fb;
  width: 200px;   /* 듣지 않습니다 */
  padding: 4px;
}

/* 옆으로 흐르면서 크기도 가집니다 */
.ib {
  display: inline-block;
  background: #d9cff7;
  width: 120px;
  padding: 4px;
}

값	자리	크기	기본인 태그
`block`	줄을 통째로 씁니다.	너비·높이가 듣습니다.	`div`·`p`·`h1`·`ul`
`inline`	글자처럼 옆으로 흐릅니다.	너비·높이가 듣지 않습니다.	`span`·`a`·`strong`
`inline-block`	옆으로 흐릅니다.	너비·높이가 듣습니다.	`img`·`button`
`none`	사라집니다.	자리도 차지하지 않습니다.

inline 요소에 padding 을 주면 좌우로는 벌어지지만 위아래로는 다른 줄을 밀지 않습니다. 바탕색이 위아래 줄과 겹쳐 보이는 것이 그 때문입니다.

상세 사용법

숨기는 두 가지

display: none

자리를 차지하지 않습니다.
아래 요소가 위로 올라옵니다.

화면 읽기 프로그램도
읽지 않습니다.

visibility: hidden

자리는 그대로 두고
보이지만 않습니다.

아래 요소가
움직이지 않습니다.

최소 예제 · 편집 가능

여백 상쇄

위아래로 맞닿은 margin 은 더해지지 않고 큰 쪽 하나만 적용됩니다. 이것을 여백 상쇄라고 합니다.

<div class="a">아래 여백 30px</div>
<div class="b">위 여백 20px</div>
<p>두 상자 사이는 50px 이 아니라 30px 입니다.</p>

.a, .b { background: #ece7fb; padding: 8px; }

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }

상쇄는 위아래에서만 일어납니다. 좌우 여백은 그대로 더해집니다. 상쇄를 막으려면 둘 사이에 테두리나 안쪽 여백을 두거나, 한쪽 여백만 사용하는 습관을 들이십시오 — 아래 여백만 주기로 정하면 상쇄를 따질 일이 거의 없어집니다.

상세 사용법

넘치는 내용

상자보다 내용이 크면 overflow 가 그다음을 정합니다.

style.css

.box { height: 80px; }

overflow: visible;  /* 기본값 — 그냥 넘쳐 나옵니다 */
overflow: hidden;   /* 넘친 부분을 잘라 냅니다 */
overflow: auto;     /* 넘칠 때만 스크롤이 생깁니다 */
overflow-x: auto;   /* 가로만 */

넓은 표나 코드는 overflow-x: auto 로 감쌉니다. 그러지 않으면 좁은 화면에서 화면 전체가 가로로 밀립니다.

흔한 실수

세 가지

inline 요소에 너비를 줍니다. span 에 width 를 적어도 듣지 않습니다. inline-block 으로 바꾸거나 block 으로 만드십시오.
여백이 사라진 줄 압니다. 30px 과 20px 을 주었는데 30px 만 나오면 상쇄입니다. 값을 더 키우는 대신 한쪽만 주는 방식으로 바꾸십시오.
화면이 가로로 밀립니다. 어딘가에 화면보다 넓은 요소가 있는 것입니다. 넓은 표·코드·그림을 overflow-x: auto 로 감싸십시오.

실습 문제

2부 마무리 — 읽을 만한 글 화면

1. 2부에서 배운 것으로 글 화면 꾸미기 난이도 중

1.8 에서 만든 소개 문서에 아래를 적용하십시오. 3부의 배치는 아직 사용하지 않습니다.

모든 요소에 border-box(2.6)
본문 글꼴과 줄 간격 1.8(2.5)
제목 색을 브랜드 색으로(2.4)
표에 선과 머리 줄 바탕(2.7)
목록 항목의 홀수 줄에 옅은 바탕(2.3)

규칙을 하나씩 더해 가며 다시 그려 보십시오. 표는 border-collapse 부터입니다.

* { box-sizing: border-box; } body { font-family: "Pretendard", "맑은 고딕", sans-serif; line-height: 1.8; color: #3b4252; } h1, h2 { color: #6e56cf; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #dee2e6; padding: 8px 12px; } th { background: #f4f2fb; text-align: left; } li:nth-child(odd) { background: #f8f7fd; }

요약

정리

block 은 줄을 통째로, inline 은 글자처럼 흐릅니다.
inline 에는 너비와 위아래 여백이 듣지 않습니다.
위아래로 맞닿은 margin 은 큰 쪽 하나만 적용됩니다.
넓은 내용은 overflow-x: auto 로 감쌉니다.