Erzsamatory Weblog


CSS의 버전이 업그레이드되면서 CSS에서 HTML 요소를 선택하는 방법이 매우 다양해졌습니다. 이렇게 다양한 HTML 선택자를 이용하면 자바스크립트를 사용하지 않고도 매우 동적인 HTML 소스코드를 작성할 수 있습니다. 이전 글에서는 HTML 요소를 선택하는 매우 기초적인 내용과 마우스 커서가 올려젔는가를 판단하는 방법에 대해서 알아보았습니다. 이번 글에서는 특정한 위치에 있는 HTML 요소를 선택하는 방법에 관해서 알아보겠습니다.



CSS에서 특정한 위치의 HTML을 선택하는 방법


CSS의 버전이 CSS3로 업그레이드되면서 특정한 위치의 HTML을 선택하는 선택자가 추가되었습니다. HTML 요소 중에서도 가장 첫 번째에 있는 요소와 마지막에 있는 요소를 선택하는 선택자가 추가되었습니다. :first-child:last-child가 바로 그것입니다. :first-child는 가장 첫 번째에 있는 HTML 요소를 선택하는 선택자이고, :last-child는 가장 마지막에 있는 HTML 요소를 선택하는 선택자입니다.

여기에서 HTML 요소의 첫 번째와 마지막의 기준은 선택된 HTML 요소의 상위 HTML 태그 블록입니다. 쉽게 말해서, HTML의 DIV, SPAN과 같이 블록으로 내용을 구성할 수 있는 HTML 태그 내부에 있는 HTML 요소 중에서 첫 번째, 마지막 태그를 CSS를 통해서 선택할 수 있는 것입니다. 다음은 :first-child와 :last-child 선택자를 사용한 CSS 예제 소스입니다.

#menubox ul {
    list-style: none;
    width: 200px;
    padding: 0px;
    margin: 0px;
    border:1px solid #ccc;
    box-sizing: border-box;
}
#menubox ul li {
    width: 200px;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    font-size: 15px;
    box-sizing: border-box;
}
#menubox ul li:last-child { border-bottom: 0px; }
#menubox ul li a { text-decoration: none; color: #555; }


위 CSS 소스코드는 사이트 메뉴를 만들 때 사용되는 소스코드입니다. 위의 소스코드는 ID가 menubox 인 HTML 태그 내부에 있는 ul 태그와 li 태그에 대한 속성을 정의한 스타일시트입니다. ul 태그와 li 태그는 HTML에서 목록을 만들 때 사용되는 태그입니다. 나열하는 기능이 있기 때문에 메뉴를 만들거나 목록을 생성할 때 주로 사용됩니다.

위의 소스코드를 보면 세 번째에 #menubox ul li:last-child 선택자가 사용되었다는 것을 확인할 수 있습니다. 이 선택자는 #menubox의 ul 태그 내부에서 가장 마지막에 있는 li 태그에 대해서만 스타일을 지정하겠다는 것을 의미합니다. 위에서는 border-bottom 을 0px로 설정하여 마지막에 있는 li 태그에서만 하단의 선을 삭제하였습니다. 만약 이 속성이 없다면 #menubox ul의 테두리와 가장 마지막에 있는 li 태그의 하단 선이 겹쳐서 메뉴 박스 디자인이 이상하게 변했을 것입니다.

하지만 :last-child 선택자를 사용함으로써 이러한 문제을 완벽하게 해결하였습니다. 한 번 :last-child 선택자를 뺀 것과 빼지 않은 것을 직접 확인하면 그 차이점을 명확하게 알 수 있을 것입니다.

:first-child 의 사용 방법은 :last-child와 같습니다. 다만, :first-child 는 가장 처음 나오는 HTML 요소를 선택하는 것만 다를 뿐입니다. 하지만 가장 첫 번째 나타나는 HTML 요소를 선택하는 것보다는 가장 마지막에 나타나는 요소를 선택하는 상황이 더 많기 때문에 이 글에서는 :last-child 선택자만을 소개하였습니다. 두 개 선택자 모두 사용법은 같으므로 :first-child 선택자에 관한 설명을 따로 하지는 않겠습니다.

다음은 HTML에 위의 CSS 예제를 포함한 전체 예제 소스코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>CSS 테스트</title>
    <style>
        #menubox ul {
            list-style: none;
            width: 200px;
            padding: 0px;
            margin: 0px;
            border:1px solid #ccc;
            box-sizing: border-box;
        }
        #menubox ul li {
            width: 200px;
            border-bottom: 1px solid #ccc;
            padding: 10px;
            font-size: 15px;
            box-sizing: border-box;
        }
        #menubox ul li:last-child { border-bottom: 0px; }
        #menubox ul li a { text-decoration: none; color: #555; }
    </style>
</head>
<body>
    <div id="menubox">
        <ul>
            <li><a href="http://www.erzsamatory.net">블로그 홈으로 이동하기</a></li>
            <li><a href="http://blog.naver.com/erzsamatory">네이버 블로그로 이동하기</a></li>
        </ul>
    </div>
</body>
</html>


메뉴 박스가 생각보다 쉽게 만들어지지 않았습니까? 새로운 메뉴를 추가하고자 한다면 li 태그만 새롭게 추가하면 됩니다. 메뉴를 삭제하고 싶다면 해당되는 li 태그를 삭제하면 됩니다.

예전부터 이와 같은 메뉴 디자인을 사용했던 것은 아닙니다. 이와 같은 방법을 사용하기 전에는 DIV 를 이용하여 박스를 추가하는 방식의 메뉴 생성 방법을 많이 사용했었지만 모바일 환경에서 빠르게 로드되어야 하는 상황이 많이 발생하는 현재에는 DIV 방식이 아닌 목록 방식의 메뉴 디자인 방법이 많이 사용됩니다. 또한 이 방법을 사용하면 프로그래밍을 할 때에도 매우 간단해집니다.

마무리


지금까지 CSS에서 특정한 위치에 있는 HTML 요소를 선택하는 방법에 대해서 알아보았습니다. 기존의 CSS 버전에서는 사용할 수 없는 기능이기 때문에 구형 웹브라우저에서는 사용이 가능하지 않을 수 있습니다.

하지만 최근들어 많은 사람들이 최신 웹브라우저로 업그레이드를 하고 있는 경향이 있으므로, 이제부터는 굳이 구형 웹브라우저를 신경쓰지 않아도 될 것입니다. 이 글에서 소개한 메뉴 생성 방법은 실제로도 많이 사용되는 방법입니다. CSS에서 :last-child 선택자를 사용할 수 없을 때에는 따로 last 클래스를 만든 후, 까다로운 프로그래밍을 거쳐야 했지만, CSS3 부터는 :first-child 와 :last-child 선택자를 지원하면서 이러한 불편한 과정을 생략할 수 있게 되었습니다.
http://www.erzsamatory.net/trackback/109

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기