[css] 요소 사이에 구분선 넣고 싶다면? ex) 게시판 | 1:1문의 | 회원가입

오늘은 요소 사이에 구분선을 넣는 방법에 대해 알아보도록 하겠습니다. 많은 웹사이트를 보면 아래와 같이 어떤 요소들을 구분해 주기 위해서 세로 구분선을 넣어주는 경우가 많습니다. 

 

삼성전자 홈페이지 푸터 부분

 

이런 구분선을 넣어주면 전반적으로 깔끔한 느낌도 주고, 요소들 구분을 확실히 시켜주기 때문에 많이 사용합니다. 

 

그럼, 한번 함께 만들어 가봅시다. html과 css를 활용해야 하는데, html 코드 먼저 살펴보겠습니다.

 

<div id="test">
    <span>요소1</span>
    <span>요소2</span>
    <span>요소3</span>
    <span>요소4</span>
</div>

 

아주 간단합니다. test라는 아이디를 가진 div 요소 안에 4개의 span 요소가 있습니다. css로 꾸며주지 않은 상태에서 웹 페이지를 열어보면 다음과 같이 보일 것입니다. 

 

 

요소1, 요소2, 요소3, 요소4가 순차적으로 같은 줄에 위치해 있습니다. span 태그를 사용했기 때문입니다.

 

이제 css로 꾸며보겠습니다. 요소2, 요소3, 요소4에 border-left를 부여해서 구분선을 넣는 것도 하나의 방법이 되겠지만, 저는 다른 방법을 사용하겠습니다. 

 

아이디어는 첫번째 요소를 제외하고 두번째 요소부터 앞쪽에 너비가 1px인 요소를 넣어주면서 background-color를 부여해주는 것입니다. 사실상 구분선이 아니라 너비가 1px인 사각형을 넣어주는 것입니다. 너비가 1px라서 선처럼 보일 뿐인 것이죠. 

 

우선 아이디가 test인 요소의 자식인 span 요소 중에서 2번째 요소부터 마지막 요소까지 position을 relative로 설정하고 margin-left와 padding-left를 적절히 부여해줍니다. 참고로 아이디가 test인 요소의 자식 span 요소 중에서 2번째 요소부터 마지막 요소까지에 대한 css 선택자는 다음과 같습니다.

 

#test span:nth-child(n+2)

 

그 다음에 ::after 가상요소를 활용해서 요소들의 좌측에 너비가 1px, 높이가 15px인 검정색 배경색의 요소를 넣어줍니다. 이 내용을 css 코드로 나타내면 다음과 같습니다. 

 

#test span:nth-child(n+2) {
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
}

#test span:nth-child(n+2)::after {
    position:absolute;
    left: 0;
    top: 3px;
    content: "";
    width: 1px;
    height: 15px;
    background-color: black;
}

 

이제 html 문서를 웹브라우저에서 열어보면 적절하게 구분선들이 들어간 것을 확인할 수 있습니다.