오늘은 4개의 카테고리를 가진 세로 메뉴바 / 가로 메뉴바를 만들어보겠습니다.
w3school에 있는 예제를 참고했구요, html 소스는 다음과 같습니다.
■ HTML 소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <style type="text/css"></style> </head> <body> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> |
1. 세로 메뉴바
■ 스타일 소스1
※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요.
<style type="text/css">여기에 넣어주세요.</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } |
※ ul
- list-style-type: none; → 목록에 붙은 ● 모양을 없애줍니다.
- margin, padding을 0으로 초기화했습니다.
- width, background-color를 지정해줍니다.
※ a
- display: block; → a링크 요소의 영역을 확장해줍니다.
원래 a요소는 인라인 요소이기 때문에, a로 감싸진 글자부분만 클릭, 링크 효과가 있는데, 이를 블록으로 확장해서 네모박스를 클릭해도 링크 이동할 수 있도록 합니다.
- color, text-decoration:none; 을 지정합니다. 상위요소에 지정했을 때, 적용되지 않고 꼭 a요소에 직접 지정을 해줘야 합니다.
- 적당한 padding을 주었습니다.
※ a:hover / a.active
- a:hover:not(.active) → a요소에 마우스를 올린 경우 이면서, 클래스가 active가 아닌 경우
■ 결과화면1
2. 가로 메뉴바
■ 스타일 소스2
※ 아래 소스를 복사해서 HTML 소스의 스타일 태그 안에 넣어주세요.
<style type="text/css">여기에 넣어주세요.</style>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; } ul:after{ content:''; display: block; clear:both; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4CAF50; } |
※ ul
- list-style-type: none; → 목록에 붙은 ● 모양을 없애줍니다.
- margin, padding을 0으로 초기화했습니다.
- width, background-color를 지정해줍니다.
※ ul:after
- 부모요소가 float된 요소들을 감쌀 수 있도록 핵을 쓰겠습니다.
- content:''; display: block; clear:both;
- ul:after를 쓰지 않고, ul요소에 overflow:hidden;을 사용할 수 있습니다.
- 하지만 저는 핵을 쓰는게 가장 안전하다고 생각되네요. float를 clear하는 방법은 여기(CSS 플로트(float))를 클릭해 확인하세요^^
※ a
- display: block; → a링크 요소의 영역을 확장해줍니다.
원래 a요소는 인라인 요소이기 때문에, a로 감싸진 글자부분만 클릭, 링크 효과가 있는데, 이를 블록으로 확장해서 네모박스를 클릭해도 링크 이동할 수 있도록 합니다.
- color, text-decoration:none; 을 지정합니다. 상위요소에 지정했을 때, 적용되지 않고 꼭 a요소에 직접 지정을 해줘야 합니다.
- 적당한 padding을 주었습니다.
※ a:hover / a.active
- a요소에 마우스를 올리거나, 현재 페이지를 표시하기 위해 class="active"를 넣어, 색상이 변하는 효과를 주었습니다.
■ 결과화면2
지금까지 하나씩 소개했던 CSS 속성들이 복합적으로 사용되면서, 레이아웃이라 할 만한 그림이 점점 그려지고 있어요. 재밌네요^^
p.s. 흠.. 반디캠이 너무 대문짝만하게 보이군요ㅎㅎ (결과화면을 보여드리고 싶지만 참 거슬리네요ㅋㅋㅋ 다른 방법 없나용?)