CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기
오늘은 HTML + CSS 에서 가로형태의 메뉴를 만들어 보겠습니다. 홈페이지나 블로그에서 심심찮게 살펴볼 수 있는 항목입니다. 주로 ul li 요소를 가로로 배치하여 사용하게 됩니다. 예전에 div를 가로 정렬하는것에 있어서 float 요소를 사용한다고 배운 바 있습니다. 그리고 float을 사용하셨다면 반드시 이것을 해제해 주셔야 다음에 배치될 태그 요소들이 정상적으로 제 위치에 놓여지게 됩니다. 한번 알아보겠습니다.
먼저 HTML 마크업 상태 입니다. 현재 style을 외부스타일로 지정했습니다. head 안쪽에 link 태그를 사용해서 스타일을 불러와 인식하는 방법입니다. body 본문을 살펴보시면 ul 그리고 li 태그를 써서 메뉴를 4개 만들었습니다. 그리고 ul 요소를 menu1 이라고 하는 id 값을 가진 div가 감싸고 있습니다. 구조는 이렇게 간단하게 완성하였습니다.
그리고 외부스타일 중 하나는 html 본문을 초기화 하는 요소로 구성했습니다. 살펴보시면 다음과 같이 되어 있습니다. 마지막의 li 요소의 스타일은 앞에 점이 없는 그냥 텍스트만 나오는 상태로 만드는 태그 입니다.
위의 스타일과 본문 html을 그대로 출력하면 이와같은 형태로 나타나게 됩니다.
우선 메뉴항목의 사이즈를 설정하도록 합니다. 여기에서는 가로와 세로를 고정 사이즈로 지정해 보겠습니다.
보시면 빨간색 도트선이 보이는데 여기에 메뉴들이 가로로 배치가 될 것입니다.
가로로 배치되어야 할 것은 li 요소들이므로 이와같이 마크업 했습니다. 하나하나 살펴보겠습니다.
float: left; → 왼쪽부터 가로 정렬
width: 25%; → li 항목이 모두 4개 이므로 4등분을 위한 사이즈 정의
height: 50px; → float 해제를 위한 세로 사이즈 지정
line-height: 50px; → 텍스트 중앙 정렬 (위/아래에 대한)
text-align: center; → 텍스트 가운데 정렬
background: #98E0AD; → 백그라운드 색상 지정
그러면 결과를 살펴보겠습니다.
보시는 것 처럼 순식간에 가로형 1단 메뉴가 완성 되었습니다.
여기에 마우스를 오버하면 배경 색상, 그리고 글씨 색상도 변경하도록 만들어 보겠습니다. #menu1 이라고 하는 div 안에 있는 ul 요소 안에 있는 li 요소에 대한 a 링크 요소에 대해서 속성을 display:block; 으로 지정했습니다. 이것은 a 요소를 블록요소로 바꿔주는데 이렇게 하게 되면 글씨에서만 링크가 걸리는 것을 li 전체 사이즈에서 링크가 걸리도록 변경해 줍니다.
또한 그 밑에 있는 스타일은 마우스가 올라갔을 때 스타일의 변화에 대한 요소 입니다. 백그라운드와 글자 색상이 변경되는데 지정된 색으로 바뀝니다. 그럼 결과를 살펴보겠습니다.
보시는 것 처럼 이렇게 변경이 됩니다.
메뉴를 가운데로 배치할 수는 없을까요? 가능합니다. 이렇게 지정해 주시면 됩니다. 먼저 #menu1 의 div에는 백그라운드 색상만 집어넣었습니다. 굳이 이렇게 안 해도 상관 없지만 보통 메뉴의 li 색상을 지정해 주셨다면 해당 가로줄은 모두 같은 색으로 넣어주는것이 보기 좋으니까 이렇게 만들어 주었습니다. 그리고 ul에 대해서 스타일을 지정해 주었는데, 가로 사이즈가 정해졌으니 margin : 0 auto; 를 해주면 브라우저의 화면에 맞게 가운데로 정렬이 됩니다. 또한 overflow:hidden 을 해준 이유는 #menu1의 백그라운드 색상 때문입니다. 이 요소가 없으면 div에 백그라운드를 지정해 줬어도 가로로 쭉 색상 배치가 진행되지 않습니다. 직접 이렇게 마크업 해보시고 차이점을 느껴보시면 어떤 뜻인지 한번에 이해되실거에요. 아니면 그냥 #menu1 의 div에 세로크기를 지정해주면 됩니다. ul 세로 사이즈가 50px 이니까, 똑같이 height:50px; 을 주시면 됩니다.
결과 화면입니다. 이런식으로 보기좋게 메뉴가 구성되었습니다. 꼭 이 방법이 절대적인것은 아닙니다. 여러분들의 취향과 입맛에 맞게 구성해 보세요. 끝.
"친절한효자손 취미생활" 을 검색!
