CSS float 속성으로 목록 항목을 오른쪽으로 정렬하는 방법

웹 페이지에서 내비게이션 메뉴를 만들다 보면 일부 목록 항목만 오른쪽으로 정렬해야 하는 경우가 있습니다. 예를 들어 왼쪽에는 '홈', '뉴스' 메뉴를 배치하고, 오른쪽에는 '연락처', '소개' 메뉴를 배치하는 식입니다.

이럴 때 CSS의 float: right 속성을 사용하면 간단하게 해결할 수 있습니다. 기본적으로 목록 항목(li)은 세로로 쌓이지만, float 속성을 적용하면 항목들이 가로 방향으로 나란히 배치되며, float: right를 지정한 항목은 화면 오른쪽 끝으로 이동합니다.

구현 방법

먼저 ul 요소의 기본 여백과 불릿 마커를 제거하고, li 요소에 float: left를 적용해 메뉴를 가로로 배치합니다. 그다음 오른쪽으로 보내고 싶은 특정 항목에만 인라인 스타일로 float: right를 지정하면 됩니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         }
         li {
            float: left;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
      </style>
   </head>

   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li style = "float:right"><a href = "#contact">Contact</a></li>
         <li style = "float:right"><a href = "#about">About</a></li>
      </ul>
   </body>
</html>

코드 설명

list-style-type: none — 목록 앞에 표시되는 기본 불릿(점)을 제거합니다.
margin: 0; padding: 0 — 브라우저 기본 여백을 없애 메뉴가 화면 가장자리에 딱 붙도록 합니다.
float: left — 모든 li 항목을 왼쪽부터 차례대로 가로 배치합니다.
display: block — 링크 영역 전체가 클릭 가능하도록 만들어 사용성을 높입니다.
style = "float:right" — Contact와 About 항목만 오른쪽 끝으로 이동시킵니다.

참고 사항

float 속성은 전통적으로 많이 사용되는 방식이지만, 최신 프로젝트에서는 레이아웃 유지 관리가 더 쉬운 Flexbox(display: flex; justify-content: space-between;)를 활용하는 것이 권장됩니다. 다만 간단한 내비게이션 바나 기존 코드 유지보수 시에는 float 방식도 여전히 유용하게 사용됩니다.