안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 CSS 마법으로 웹사이트에 알록달록한 옷을 입히는 법을 배웠죠? 오늘은 웹사이트의 요소들을 원하는 곳으로 자유롭게 이동시키고 정렬하는 아주 강력한 기술, ‘공간 이동 마법 Flexbox’를 배워보겠습니다. 이 마법만 알면 게시판 목록이나 메뉴를 자로 잰 듯 반듯하게 정렬할 수 있어요!
1. Flexbox란 무엇인가요? ‘유연한 마법 상자’
지금까지는 글을 쓰면 무조건 위에서 아래로 차례대로 쌓였죠? 하지만 Flexbox 마법을 부리면 상자 안의 물건들을 가로로 나란히 세우거나, 정중앙에 배치하거나, 양 끝으로 밀어낼 수도 있어요. ‘Flexible Box’의 줄임말인 만큼, 화면 크기에 맞춰 유연하게 변하는 것이 특징이랍니다.
2. 가로로 나란히 정렬하기 (코드)
부모 상자에게 display: flex;라는 주문을 내리면, 그 안의 자식 요소들이 즉시 반응합니다. 게시판의 ‘번호, 제목, 작성자’ 칸을 나란히 배치하는 원리를 살펴볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
/* 1. 마법 상자(부모) 설정 */
.magic-container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
border: 2px dashed #999;
/* 자식들을 양 끝으로 벌려라! */
justify-content: space-between;
/* 높이의 정중앙에 맞춰라! */
align-items: center;
}
/* 2. 상자 안의 물건들(자식) 스타일 */
.item {
background-color: #ffcc00;
padding: 15px;
border-radius: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>📦 Flexbox 공간 이동 마법</h2>
<div class="magic-container">
<div class="item">마법사 번호</div>
<div class="item">주문 제목</div>
<div class="item">작성자</div>
</div>
</body>
</html>3. 꼭 기억할 두 가지 방향 주문
Flexbox 마법사들은 이 두 가지 주문을 가장 많이 써요!
1. justify-content: 가로(메인축) 방향으로 어떻게 배치할지 정해요. (가운데 모으기, 양 끝으로 벌리기 등)
2. align-items: 세로(교차축) 방향으로 어떻게 배치할지 정해요. (위로 붙이기, 아래로 내리기, 가운데 맞추기 등)
이 두 가지만 조합하면 화면 정중앙에 버튼을 놓는 일도 식은 죽 먹기랍니다!
[IMAGE_2]
4. 아이들과 함께하는 ‘장난감 기차 정렬’ 놀이
아이와 함께 거실 바닥에 긴 테이프로 기차 선로(Container)를 그려보세요. 그리고 기차 칸(Item)들을 선로 위에 놓게 하세요. 아빠가 “justify-content: center!”라고 외치면 아이가 기차 칸들을 선로 한가운데로 모으고, “space-between!”이라고 외치면 양 끝으로 벌리게 하는 놀이를 해보세요. 눈에 보이지 않는 정렬 알고리즘을 몸으로 익히는 최고의 방법입니다.
마치며: 조화로운 디자인의 완성
공간 이동 마법 덕분에 우리 웹사이트가 훨씬 정돈되어 보이게 되었습니다! 이제 어떤 요소든 원하는 위치에 척척 놓을 수 있겠죠? 다음 시간에는 마법 학교의 이미지를 더 생생하게 만들어주는 ‘그림자와 둥근 모서리 마법(Box-shadow & Border-radius)’을 배워보겠습니다. 더 입체적인 웹사이트를 만들어 볼까요? 다음 시간에 만나요!
