display: inline-block;을 사용하면 메뉴 버튼 사이에 미세한 공백이 생깁니다. 공백을 제거하려면 display: inline-block; 대신 ‘왼쪽부터 차곡차곡 태그를 배치하겠다’는 의미인 float: left;을 입력합니다.

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

    li {
        float: left;
        width: 100px;
        height: 50px;
        background-color: yellow;
        border: solid 5px red;
        text-align: center;
        line-height: 50px;
    }

     

    그림 11-6 float: left를 적용한 결과

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