[CSS] 특정한 위치에 있는 DOM 요소를 지정하는 방법

CSS에서 (HTML) DOM 객체(또는 요소)를 선택하는 방법은 다양합니다. 이렇게 다양한 CSS 선택자를 잘 활용하면 자바스크립트를 사용하지 않고도 어느정도 동적인 문서를 제작할 수 있습니다. 이전 글에서는 CSS에서 DOM 객체를 선택하는 방법과 특정 객체에 마우스 커서가 올려졌는지 감지하는 방법을 설명하였습니다. 이 글에서는 “특정한” 위치에 있는 DOM 객체를 선택하는 방법을 소개하겠습니다.

CSS에서 특정 위치 객체를 선택하는 방법

CSS 버전이 CSS3로 향상되면서 특정 위치 객체를 선택하는 선택자가 추가되었습니다. 객체 중에서도 가장 첫 번째에 있는 객체와 마지막에 있는 객체를 선택하는 선택자가 추가되었습니다. :first-child와 :last-child 선택자를 사용하면 첫 번째 객체 또는 마지막 객체를 선택할 수 있습니다. :first-child는 가장 첫 번째 객체를 선택하는 선택자, :last-child는 가장 마지막 객체를 선택하는 선택자입니다.

여기에서 객체의 첫 번째와 마지막을 구분하는 기준은 선택된 객체의 상위 태그입니다. 쉽게 설명하면 HTML에서 블록(영역)으로 내용을 구성하는 태그(DIV, SPAN 등) 내부에서 가장 첫 번째 객체 또는 마지막 객체를 선택할 수 있습니다. 다음은 예제 스타일시트입니다.

#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; }

예제 스타일시트는 메뉴를 만들 때 사용합니다. 예제는 #menubox 영역에 포함되어 있는 ul, li 태그 속성을 정의하고 있습니다. ul, li 태그는 HTML에서 목록을 만들 때 사용합니다. 이 태그에는 나열하는 기능이 있기 때문에 메뉴를 만들거나 목록을 생성할 때 주로 사용됩니다.

예제를 보면 #menubox ul li:last-child, :last-child 선택자가 사용되었음을 확인할 수 있습니다. 이 선택자는 #menubox 영역에 포함되어 있는 ul 태그 내부에서 가장 마지막에 있는 li 태그를 선택합니다. 따라서 이 태그에만 위 스타일이 적용됩니다. :first-child 선택자 사용 방법은 :last-child 선택자와 같습니다. :first-child 선택자는 가장 처음 나오는 객체를 선택한다는 점만 다를 뿐입니다.

다음은 HTML에 예제 스타일시트를 적용한 전체 예제 소스코드입니다.

<!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="https://www.walterz.net/">블로그 홈으로 이동하기</a></li>
            <li><a href="http://blog.naver.com/erzsamatory">네이버 블로그로 이동하기</a></li>
        </ul>
    </div>
</body>
</html>

메뉴가 생각보다 쉽게 만들어져 놀랐을 수도 있겠습니다. 예제 소스코드에서 새로운 메뉴를 생성하고자 한다면 li 태그를 추가하면 됩니다. 같은 방법으로 메뉴를 삭제하고 싶다면 해당하는 li 태그를 제거하면 됩니다.

마무리

지금까지 CSS에서 “특정한” 위치에 있는 DOM 객체를 선택하는 방법을 알아보았습니다. 이 글에서 소개한 메뉴 생성 방법은 실제로도 많이 사용되는 방법이므로 잘 숙지하여 블로그 스킨을 개발할 때 또는 사이트를 제작할 때 직접 사용해보시기 바랍니다.

타이틀이미지: Markus Tacker, HTML Tag, Flickr. CC BY-ND 2.0.