CSS | <nav> 메뉴들을 가로로 정렬시키기

또 다른 문제가 발생했습니다. 계속해서 홈페이지 클로닝을 하고 있는데 아주 기초적인 듯 하지만 제 머릿속에서는 도저히 생각나지 않는 문제...

CSS 적용하기 전

 

현재 홈페이지 상단의 메뉴 상태는 이러합니다. <nav>를 적용해서 메뉴를 구성하는 것도 이제 좀 알겠고, 

각각을 <ul>과 <li>로 지정하는 것도 알겠습니다. 

 

하지만 제가 결과적으로 만들어내야 하는 모양은 content, works, experience, behance, twitter, linkedin이 가로로 쭉- 나열되어야 해요. 여기서 뭘 어째야 하는건지....?

 

 

CSS에 적용했었던 건 알겠는데, 예전에 연습할 때 했었던 기억이 날듯 말듯 하긴 한데

무엇을 어디에 어떻게 적용해야 하는 지 당최 기억이 나질 않습니다.

 

 

 

다시 돌아가서

구글 창에 열려있는 현재 진행중인 웹페이지를 분석해 봅니다. 

작업관리자를 열어서 메뉴 하나하나를 살펴보면 각각의 <li>가 글자 이후에 화면 오른쪽 끝까지 쭉 색칠되어 있는 게 보입니다. 각각의 <li>가 큰 블록들로 화면을 차지하고 있다는 것을 알 수 있네요. 

 

 

그러면 블록을 작게 나누는 방법은 없을까요?

 

 

 

다음 화면에 답이 있습니다.

 

바로 CSS에 inline-block을 적용해 주는 것입니다.

 

이렇게 적용해 주고 나면 다음과 같이 <nav>가 가로로 정렬됩니다.

 

CSS 적용 후

 

display: inline-block은 요소에 너비와 높이를 허용한다는 점이 display: inline과 다른 점이고,

또한 줄바꿈<br>을 허용하지 않으므로 메뉴들이 가로로 서로 나열될 수 있게 할 수 있습니다.

 

<nav>메뉴 가로로 정렬하는 법 꼭 활용해보세요!