웹 개발 강의 8편 - 가로로 세우기

1강부터 지금까지 페이지의 모든 것이 위아래로 쌓여 왔습니다. 문단도, 제목도,
목록도 전부 한 줄을 통째로 차지했습니다.

오늘은 상자 두 개를 나란히 놓습니다. 선언 하나면 됩니다.

flex 는 부모에 겁니다

기억해두실 부분을 먼저 말씀드립니다.

flex 는 자식이 아니라 부모에 설정합니다. 알약 두 개한테 줄을 서라고 말하는
것이 아니라, 그 둘을 담고 있는 상자에게 말하는 것입니다.

플렉스박스 실수는 거의 전부 이것을 잊어서 생깁니다.

태그 두 개 추가하기

index.html 의 두 번째 문단 아래에 넣습니다.

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

header 하나에 top 이라는 class 를 붙이고, 그 안에 role class 를 가진
문단 두 개를 넣습니다.

두 요소가 class 를 같이 쓰는 것이 class 의 쓰임 그대로입니다.

지금 저장하면 두 줄이 위아래로 쌓입니다. 문단은 덩어리 요소이기 때문입니다.
글이 짧은데도 각각 전체 폭을 차지합니다. 고치기 전의 모습을 한 번 보고
가시면 변화가 분명하게 보입니다.

선언 하나로 줄이 됩니다

style.css 의 /* lists */ 주석 아래에 넣습니다.

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

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

/* screen */

display: flex 가 부모에게 자식들을 한 줄로 배치하라고 말합니다.

gap 은 자식 사이에만 공간을 두고 양 끝에는 두지 않습니다. 각 자식에
margin-right 를 주면 마지막 것에도 필요 없는 여백이 붙습니다.

margin 값 세 개는 위, 좌우, 아래 순서입니다.

네 가지면 대부분 됩니다

네 개 모두 부모에 들어갑니다. 그것만 외워두시면 됩니다.

알약 모양 만들기

이어서 넣습니다.

margin: 0 으로 문단이 기본으로 가진 여백을 없앱니다. 없으면 알약이 너무 높게
나옵니다.

border-radius: 999px 는 높이보다 큰 숫자면 어느 값이든 같은 결과가 나옵니다.
양 끝이 완전히 둥글어집니다.

확인하기

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

알약 두 개가 나란히 놓였습니다. 각각 자기 글자만큼의 폭만 차지합니다.

flex 자식은 줄을 채우는 대신 내용만큼 줄어듭니다. display: flex 가 한 일의
나머지 절반입니다.

아직 쌓여 있으면 header 의 class 를 확인해주시면 됩니다.

grid 는 언제 쓰나

여기서 grid 를 물어보시는 분이 많아서 짧게 말씀드립니다.

플렉스박스는 한 줄, 가로든 세로든 한 방향입니다. grid 는 행과 열을 동시에
다룹니다.

페이지의 대부분은 줄이라서 플렉스박스로 멀리까지 갈 수 있습니다. 플렉스박스를
먼저 제대로 익히고, 필요할 때 grid 를 배우시면 됩니다.

자주 발생하는 오류

첫째, display: flex 를 부모가 아니라 자식에 두는 경우입니다. 그러면 그 자식의
내용물을 배치하는데, 여기서는 글자뿐이라 아무 일도 일어나지 않습니다.

둘째, gap 대신 알약마다 margin 을 주는 경우입니다. 마지막 것에 필요 없는
여백이 붙습니다.

셋째, margin: 0 을 빠뜨리는 경우입니다. 문단은 자기 여백을 가지고 오는데,
줄 안에서는 보통 필요 없습니다.

연습 문제

1. .top 에 justify-content: center 를 넣어보세요.
2. role class 를 가진 문단을 하나 더 추가해보세요.
3. gap 값을 0 으로 바꿔보고 알약이 어떻게 붙는지 확인해보세요.

다음 편

9강에서는 휴대폰 화면에 맞춥니다. meta 태그 하나와 규칙 묶음 하나입니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.