8강 · 가로로 세우기

한눈에

1강부터 우리 페이지의 모든 것이 위아래로 쌓여 왔습니다. 오늘은 상자 두 개를 나란히 놓아보겠습니다.

오늘 다룰 내용은 세 가지입니다. 먼저 덩어리가 왜 계속 쌓여 왔는지 봅니다. 그다음 쌓인 것을 한 줄로 바꾸는 선언 하나를 씁니다. 마지막으로 짧은 태그 두 개를 알약 모양으로 만듭니다. 기억해두실 부분입니다. flex 는 자식이 아니라 부모에 설정합니다. 알약 두 개한테 줄을 서라고 말하는 것이 아닙니다. 그 둘을 담고 있는 상자에게 말하는 것입니다. 플렉스박스 실수는 거의 전부 이것을 잊어서 생깁니다. 폴더를 다시 열어보겠습니다. 이번에는 HTML 도 조금 바뀝니다. 짧은 문단 두 개가 들어간 header 를 추가합니다. 그다음 스타일시트에 규칙 두 개를 넣어서 배치합니다. 부모를 위한 규칙 하나와 자식 둘을 위한 규칙 하나입니다. 먼저 추가할 태그입니다. header 하나에 top 이라는 class 를 붙입니다. 그 안에 role class 를 가진 문단 두 개를 넣습니다. 두 요소가 class 를 같이 쓰는 것이 class 의 쓰임 그대로입니다. 처음에는 쌓입니다. 문단은 덩어리 요소이기 때문입니다.

header 는 두 번째 문단 아래에 들어갑니다. 안쪽의 문단 두 개는 한 단계 더 들여써 줍니다. 저장하고, 고치기 전의 쌓인 모습을 먼저 보겠습니다. 기본값을 먼저 보면 변화가 분명하게 보입니다.

index.html

  <header class="top">
    <p class="role">Web developer</p>
    <p class="role">Lecture author</p>
  </header>

서버는 같은 방법으로 띄웁니다. 이제 새 줄 두 개가 위아래로 놓여 있습니다. 바로 그 동작을 바꾸려는 것입니다.

터미널

python -m http.server 5500

Web developer 와 그 아래 Lecture author 입니다. 문단 두 개가 쌓여 있고, 2강에서 본 그대로입니다. 글이 짧은데도 각각 전체 폭을 차지합니다. 덩어리 요소가 하는 일이고, 지금까지 쭉 그래왔습니다. CSS 한 줄이 그것을 바꿉니다. 이번 강의의 핵심이 선언 하나에 들어 있습니다. display 를 flex 로 두면 부모가 자식들을 한 줄로 배치합니다. gap 은 자식 사이에만 공간을 두고 양 끝에는 두지 않습니다. margin 값 세 개는 위, 좌우, 아래 순서입니다. 자식들은 자기 규칙을 그대로 유지하고 안쪽은 바뀌지 않습니다. 속성 네 개면 앞으로 만들 거의 모든 줄이 설명됩니다. display flex 로 줄을 만들고 gap 으로 자식 사이를 띄웁니다. justify-content 는 줄을 가로 방향으로 움직입니다. align-items 는 자식들을 위아래로 움직입니다. 네 개 모두 부모에 들어갑니다. 그것만 외워두시면 됩니다. 이것이 알약처럼 보이게 만드는 부분입니다. margin 을 0 으로 두면 문단이 기본으로 가진 공간이 없어집니다. 연한 배경과 padding 으로 작은 상자가 만들어집니다. 그리고 999픽셀 radius 로 양 끝이 완전히 둥글어집니다. 높이보다 큰 숫자면 어느 값이든 같은 결과가 나옵니다.

두 규칙 모두 맨 아래 lists 주석 밑에 들어갑니다. 첫 번째는 부모 규칙이고 두 번째는 자식 규칙입니다. 자식 규칙에는 줄에 선다는 내용이 전혀 없습니다. 플렉스박스가 주는 역할 분리입니다. 다음 시간을 위한 주석을 하나 남기고 저장합니다.

style.css

.top {
  display: flex;
  gap: 12px;
  margin: 16px 0 24px;
}

.role {
  margin: 0;
  background: #F2F3F5;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
}

/* screen */

이제 나란히 놓여 있습니다. 사이에 틈이 있는 둥근 알약 두 개입니다. 각각 자기 글자만큼의 폭만 차지합니다. flex 자식은 줄을 채우는 대신 내용만큼 줄어듭니다. display flex 가 한 일의 나머지 절반입니다. 지금 이런 화면이 보이고 계셔야 합니다. 자기 소개 두 줄 아래에 알약 두 개가 한 줄로 있습니다. 아직 쌓여 있으면 header 의 class 를 확인해주시면 됩니다. flex 가 부모에 있어야 아무 일이든 일어납니다. 여기서 grid 를 물어보시는 분이 많아서 짧게 말씀드립니다. 플렉스박스는 한 줄, 가로든 세로든 한 방향입니다. grid 는 행과 열을 동시에 다룹니다. 페이지의 대부분은 줄이라서 플렉스박스로 멀리까지 갈 수 있습니다. 플렉스박스를 먼저 제대로 익히고, 필요할 때 grid 를 배우시면 됩니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, display flex 를 부모가 아니라 자식에 두는 경우입니다. 그러면 그 자식의 내용물을 배치하는데, 여기서는 글자뿐입니다. 둘째, gap 대신 알약마다 margin 을 주는 경우입니다. 마지막 것에 필요 없는 여백이 붙습니다. 셋째, margin 0 을 빠뜨려서 알약이 너무 높게 나오는 경우입니다. 문단은 자기 여백을 가지고 오는데, 줄 안에서는 보통 필요 없습니다. 마치기 전에 서버를 멈춰두겠습니다. 페이지는 52줄, 스타일시트는 71줄입니다. 8강째인데 아직 프레임워크도 없고 설치한 것도 없습니다. 폴더는 그대로 두세요. 다음 시간에는 휴대폰에서 되게 만듭니다. 오늘 기억하실 것 세 가지입니다. flex 는 부모에 들어가고, 자식은 아무것도 몰라도 됩니다. gap 이 margin 보다 낫습니다. 양 끝에 남는 것이 없습니다. 줄부터 익히세요. grid 는 두 방향이 필요할 때 꺼내시면 됩니다. 다음 시간에는 휴대폰을 위한 meta 태그 하나와 규칙 묶음 하나를 다룹니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.