웹 사이트 레이아웃을 작업할 때 <html><body> 태그에 margin: 0padding: 0을 적용하는 것처럼 메뉴 버튼을 만들 때도 가운뎃점과 밑줄을 사라지게 하는 CSS 초기화 속성값을 반드시 적용해야 합니다.

    다음으로 <li> 태그에 메뉴 버튼 디자인 작업을 본격적으로 진행하겠습니다.

    <li> 태그는 widthheight 속성으로 공간의 크기를 설정할 수 있습니다. 메뉴 버튼의 배경을 노란색으로 설정하고 border 속성을 사용하여 테두리를 만듭니다.

    예제 소스 Exercise/11장/1_navigation/style.css

    li {
        width: 100px;
        height: 50px;
        background-color: yellow;
        border: solid 5px red;
    }

     

    그림 11-3 메뉴 버튼에 디자인을 적용한 결과

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.