● 기본 예제 코드
앞으로 플렉스 박스 레이아웃을 학습하는 데 사용할 기본 예제 코드를 소개합니다.
07/01/flex-basic.html
<head>
(중략)
<link rel="stylesheet" href="flex-basic.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
<div class="flex-item">item-4</div>
</div>
</body>
플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. 그래서 HTML 요소도 flex-container 클래스와 flex-item 클래스를 지정해 직관적으로 구성했습니다. CSS는 외부 스타일 시트로 분리했습니다. 외부 스타일 시트로 분리한 부분은 단순히 초기 시각 효과를 위한 용도입니다. 이 장에서 다루는 플렉스 박스 레이아웃 속성만 내부 스타일로 작성해 더 집중하기 위해서입니다.