웹 레이아웃을 구성하는 가장 현대적이고 편리한 방법인 Flexbox를 본격적으로 배워볼 시간입니다. 과거에는 요소를 가로로 나란히 배치하기 위해 float나 inline-block 같은 속성을 쓰며 복잡한 계산을 해야 했지만, 이제는 display: flex라는 설정 하나로 훨씬 수월하게 레이아웃을 잡을 수 있습니다.
오늘은 웹사이트의 얼굴이라고 할 수 있는 상단 네비게이션 바를 Flexbox를 활용해 세련되게 정렬해 보겠습니다. 이 과정을 통해 레이아웃을 잡는 기본기를 탄탄하게 다지실 수 있을 거예요.
1. Flexbox의 원리: 부모와 자식의 관계
Flexbox의 가장 큰 특징은 부모 요소(Container)에 설정을 부여하면, 그 안에 담긴 자식 요소(Item)들이 일정한 규칙에 따라 유연하게 정렬된다는 점입니다.
우리가 함께 달성해볼 목표는 다음과 같습니다:
- 로고는 왼쪽 끝에, 메뉴는 오른쪽 끝에 나란히 배치해 보겠습니다.
- 메뉴 아이템들이 서로 겹치지 않고 보기 좋게 가로로 나열되도록 설정합니다.
- 로고와 메뉴의 높이가 달라도 수직 중앙에 올바르게 정렬되도록 세심하게 맞춰보겠습니다.
먼저 네비게이션 전체를 감싸는 nav 태그에 Flexbox를 적용해 볼까요?
/* style.css */
nav {
position: fixed; /* 스크롤을 내려도 상단에 고정되게 합니다. */
top: 0;
width: 100%;
padding: 20px 50px;
/* Flexbox 선언! */
display: flex;
/* justify-content는 가로 방향 정렬을 결정합니다. space-between은 자식 요소들을 양 끝으로 밀어냅니다. */
justify-content: space-between;
/* align-items는 세로 방향 정렬을 결정합니다. center를 주면 요소들이 수직 중앙에 예쁘게 놓입니다. */
align-items: center;
z-index: 1000; /* 다른 요소들보다 위에 떠 있도록 순서를 높입니다. */
transition: all 0.4s ease; /* 나중에 스크롤 효과를 위해 미리 추가해 둡니다. */
}2. 메뉴 리스트 가로 배치
네비게이션 바 안에 있는 메뉴 리스트(<ul>)도 기본적으로는 세로로 나열됩니다. 이를 가로로 눕히기 위해 메뉴 리스트 자체에도 Flexbox를 한 번 더 적용해 주겠습니다.
.menu {
display: flex; /* 리스트 아이템들을 가로로 배치 */
list-style: none; /* 리스트 앞의 점(bullet)을 제거합니다. */
gap: 30px; /* 아이템 사이의 간격을 30px로 설정합니다. */
}
.menu a {
text-decoration: none; /* 링크의 밑줄을 제거합니다. */
color: var(--dark); /* 변수로 지정한 색상 사용 */
font-weight: 500;
transition: 0.3s; /* 호버 효과가 부드럽게 나타나도록 합니다. */
}
/* 마우스를 올렸을 때 색상 변경 */
.menu a:hover {
color: var(--primary);
}3. 로고 스타일링
로고는 사이트의 정체성을 나타내므로, 굵은 폰트와 포인트 컬러를 사용해 방문자의 시선을 사로잡을 수 있도록 스타일링합니다.
.logo {
font-size: 1.5rem;
font-weight: 900;
color: var(--primary);
cursor: pointer;
}결과 확인
이제 브라우저를 새로고침해서 확인해 보세요! 로고는 왼쪽 끝에, 메뉴는 오른쪽 끝에 아주 깔끔하게 배치되었을 것입니다.
이것이 바로 Flexbox가 제공하는 편리함입니다. 특히 justify-content와 align-items는 레이아웃을 잡을 때 거의 매번 사용되는 속성이니, 이번 기회에 확실히 눈에 익혀두시면 앞으로의 학습이 훨씬 수월해질 거예요.
다음 시간에는 사이트의 첫인상을 결정짓는 가장 중요한 영역인 히어로 섹션(Hero Section) 을 그라디언트 배경과 함께 멋지게 꾸며보겠습니다.
💡 작은 팁: 예전에는 요소 사이의 간격을 띄우기 위해 margin-right를 일일이 계산해서 넣었지만, 이제는 gap 속성 하나로 모든 간격을 일정하게 조절할 수 있어 매우 효율적입니다.
다음 시간에 만나요!