CSS 강좌 / Flexbox로 요소를 한 방향에 배치하기
Flexbox는 여러 요소를 한 줄의 방향을 기준으로 배치하고 크기와 간격을 조절하는 CSS 레이아웃입니다. 부모에 display: flex를 지정하면 직접 자식이 Flex 아이템이 되며, flex-direction으로 가로쓰기 기준의 행 또는 열 방향을 선택합니다.
Flexbox가 필요한 상황과 적용 대상
메뉴 항목, 검색창과 버튼, 카드 안의 아이콘과 설명처럼 한 방향의 관계가 중요한 부분에 Flexbox가 적합합니다. 요소를 옆으로 놓으려고 공백 문자를 여러 개 넣거나 각 요소를 절대 위치로 옮기면 글자 수와 화면 크기에 따라 배치가 쉽게 무너집니다. Flexbox는 부모의 사용 가능한 공간과 자식의 크기를 함께 계산합니다.
행과 열을 동시에 일정하게 맞추는 격자가 필요하면 Grid를 검토합니다. Flexbox도 여러 줄로 나눌 수 있지만 각 줄이 별도로 공간을 분배하므로 첫 줄의 열과 둘째 줄의 열이 항상 일치하는 것은 아닙니다. 페이지의 큰 영역은 Grid, 그 안의 버튼 모음은 Flexbox처럼 함께 사용할 수도 있습니다.
.menu {
display: flex;
gap: 12px;
}
이 선언은 .menu 자체를 부모 안에서 정렬하는 명령이 아닙니다. .menu 안의 직접 자식을 정렬하는 명령입니다. 예를 들어 .menu 안에 div 두 개가 있고 첫 div 안에 span 두 개가 있으면 Flex 아이템은 div 두 개입니다. span까지 가로로 배치하려면 그 div에도 별도의 display: flex를 지정해야 합니다.
주축과 교차축을 먼저 구분하기
주축(main axis)은 Flex 아이템이 나열되는 방향이고, 교차축(cross axis)은 주축에 수직인 방향입니다. 어떤 속성이 가로 또는 세로를 조절한다고 외우기보다 어느 축을 조절하는지 이해해야 column으로 바꿨을 때도 정확하게 정렬할 수 있습니다.
| flex-direction | 일반적인 가로쓰기·왼쪽에서 오른쪽 문서의 순서 | 주축 / 교차축 |
|---|---|---|
| row | 왼쪽 → 오른쪽 | 가로 / 세로 |
| row-reverse | 오른쪽 → 왼쪽 | 가로 / 세로 |
| column | 위 → 아래 | 세로 / 가로 |
| column-reverse | 아래 → 위 | 세로 / 가로 |
표의 물리적인 방향은 writing-mode: horizontal-tb와 direction: ltr인 문서를 기준으로 합니다. 오른쪽에서 왼쪽으로 쓰는 문서나 세로쓰기에서는 시작 방향이 달라질 수 있습니다. 실제 CSS의 row는 글의 인라인 방향을 따르므로 모든 문서에서 무조건 왼쪽부터 시작한다고 단정하지 마세요. MDN의 Flexbox 기본 개념에서 축과 쓰기 방향을 확인할 수 있습니다.
display: flex만 지정했을 때의 동작
별도의 값을 쓰지 않으면 방향은 row, 줄바꿈은 nowrap입니다. 항목은 주축의 시작 쪽에 모이며, 남는 공간을 채우려고 주축 방향으로 자동 확대되지는 않습니다. 공간이 부족하면 줄어들 수 있지만 콘텐츠의 최소 크기나 지정한 제약 때문에 충분히 줄어들지 못하면 부모 밖으로 넘칠 수 있습니다.
교차축에서는 stretch가 기본 정렬 동작입니다. row에서 높이가 auto인 항목들은 보통 같은 줄의 높이를 채웁니다. 짧은 설명 카드가 긴 설명 카드와 같은 높이로 보이는 이유입니다. 이미 명확한 높이가 있는 항목이나 자동 margin이 있는 경우까지 무조건 늘어난다고 생각하지 마세요. column에서는 교차축이 가로이므로 너비가 늘어나는 모습이 나타납니다.
아이템의 초기 크기 조절은 flex: 0 1 auto로 이해할 수 있습니다. 0은 남는 공간을 받아 확대하지 않음, 1은 부족한 공간에서 축소에 참여함, auto는 해당 주축의 크기 지정과 콘텐츠를 기초로 삼는다는 뜻입니다. 이 단계에서는 배치 방향과 기본 동작을 먼저 확인하고, 비율과 줄바꿈을 조절하는 실습은 정렬·크기 조절 강의에서 자세히 다룹니다.
전체 예제로 일반 배치와 방향 비교하기
아래 코드를 UTF-8 파일 flex-direction.html로 저장한 뒤 브라우저에서 엽니다. 별도 라이브러리가 필요하지 않습니다. 모든 링크는 첫째·둘째·셋째 순서로 작성되어 있으며 CSS만 달라집니다. 일반 배치 구역은 링크를 block으로 지정해 한 줄씩 보여 줍니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-direction.html</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
.demo > a, .nested > div { padding: 12px; background: #dceefa; }
.normal > a { display: block; margin-bottom: 8px; }
.row, .column, .reverse, .nested { display: flex; gap: 12px; }
.column { flex-direction: column; }
.reverse { flex-direction: row-reverse; }
.nested > div { flex: 1; min-width: 0; }
.nested span { display: block; }
.initial { display: flex; gap: 12px; border: 2px dashed #789; }
.initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
</style>
</head>
<body>
<h1>같은 HTML 순서, 다른 배치</h1>
<h2>일반 블록 흐름</h2><div class="demo normal"><a href="#result">첫째</a>
<a href="#result">둘째</a>
<a href="#result">셋째</a></div>
<h2>row</h2><div class="demo row"><a href="#result">첫째</a>
<a href="#result">둘째</a>
<a href="#result">셋째</a></div>
<h2>column</h2><div class="demo column"><a href="#result">첫째</a>
<a href="#result">둘째</a>
<a href="#result">셋째</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">첫째</a>
<a href="#result">둘째</a>
<a href="#result">셋째</a></div>
<h2>직접 자식과 중첩 자식</h2><div class="demo nested"><div><span>상자 A의 첫 줄</span><span>상자 A의 둘째 줄</span></div><div>상자 B</div></div>
<h2>초기 크기와 늘어남</h2><div class="initial"><div>짧은 설명</div><div>두 줄 설명<br>둘째 줄</div><div>세 줄 설명<br>둘째 줄<br>셋째 줄</div></div>
<p id="result">링크의 이동 대상입니다. 위 링크들은 키보드 순서를 확인하는 데도 사용합니다.</p>
</body>
</html>
- row 구역에서 세 항목이 같은 줄에 놓이는지 확인합니다. .row에 flex-direction: column만 추가하면 세로로 바뀝니다. 확인 후 해당 선언을 제거해 원래 row로 되돌립니다.
- column 구역의 링크가 가로로 넓어지는 모습을 확인합니다. .column에 align-items: flex-start를 추가하면 링크가 내용 너비에 가까워집니다. 이는 column의 교차축이 가로이기 때문입니다. 비교 후 추가한 선언을 제거합니다.
- row-reverse 구역에서는 첫째가 오른쪽에 보이지만 HTML에는 여전히 첫째가 먼저 있습니다. Tab 키를 눌러 첫째 → 둘째 → 셋째로 이동하는지 확인합니다. 화면의 좌우 순서와 키보드 탐색 순서가 달라질 수 있으므로 중요한 읽기 순서를 reverse만으로 고치지 마세요.
- 중첩 자식 구역에서는 큰 상자 A와 B만 옆으로 놓입니다. A 안의 두 span은 세로입니다. .nested > div에 display: flex를 추가하면 내부 배치까지 달라집니다. 확인 후 제거합니다.
- 마지막 구역에서 세 카드의 높이가 같고 넓은 화면에서는 각 카드가 남는 너비 전체를 채우지 않는지 확인합니다. 화면을 좁히면 줄바꿈 없이 카드 너비가 줄어듭니다. .initial > div에 flex-shrink: 0을 추가하면 축소되지 않아 가로 넘침이 생깁니다. 확인 후 제거합니다.
예상과 다를 때 확인할 항목
개발자 도구에서 정렬하려는 자식이 아니라 실제 부모를 선택하고 display의 적용값을 확인하세요. 그다음 flex-direction, 자식의 width·height·min-width, margin을 확인합니다. flex가 다른 규칙으로 덮였거나 정렬 대상이 한 단계 더 안쪽에 있으면 예상한 결과가 나오지 않습니다.
줄바꿈은 row와 column을 바꾸는 문제와 다릅니다. 가로 한 줄이 넘치는 상황에서 column이 적절한지, 여러 줄의 행을 유지하려고 flex-wrap이 필요한지 먼저 결정해야 합니다. 모바일에서 내용이 가려지면 overflow: hidden으로 감추기 전에 축소 가능한 최소 크기와 읽기 순서를 확인하세요. 개발자 도구의 임시 수정은 새로고침으로 되돌릴 수 있고 파일을 수정했다면 저장한 값을 직접 복구해야 합니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성
요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.
표의 자동·고정 레이아웃, 30:70 열 너비, 긴 문자열의 영향을 같은 데이터로 비교합니다. 모바일 가로 스크롤과 키보드 이동을 확인하고 말줄임 원문을 보존하는 방법을 설명합니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
z-index의 적용 조건과 부모 쌓임 맥락을 실제로 겹치는 예제로 이해합니다. 자식과 부모의 숫자 변경을 비교하고, overflow 잘림과 겹침 순서를 구분해 문제를 해결합니다.
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.