웹 사이트 레이아웃을 작업할 때 <html>과 <body> 태그에 margin: 0과 padding: 0을 적용하는 것처럼 메뉴 버튼을 만들 때도 가운뎃점과 밑줄을 사라지게 하는 CSS 초기화 속성값을 반드시 적용해야 합니다.
다음으로 <li> 태그에 메뉴 버튼 디자인 작업을 본격적으로 진행하겠습니다.
<li> 태그는 width와 height 속성으로 공간의 크기를 설정할 수 있습니다. 메뉴 버튼의 배경을 노란색으로 설정하고 border 속성을 사용하여 테두리를 만듭니다.
예제 소스 Exercise/11장/1_navigation/style.css
li {
width: 100px;
height: 50px;
background-color: yellow;
border: solid 5px red;
}
그림 11-3 메뉴 버튼에 디자인을 적용한 결과