HTML 목록 태그와 CSS를 활용하여 깔끔한 목록 스타일을 만드는 방법 / CSS list-style

HTML에서 지원하는 목록 관련 태그

HTML에서 사용할 수 있는 목록 관련 태그로는 <UL>, <OL>, <LI> 등이 있습니다. 이 중에서는 <UL>과 <LI>가 가장 많이 사용됩니다. <UL>태그와 <OL> 태그의 차이점은 순서의 기능이 있느냐 없느냐입니다. <OL> 태그는 목록의 기능에 순서의 기능까지 가지고 있습니다. 즉, <OL> 목록의 개별 아이템에는 입력된 순서대로 숫자 또는 알파벳이 부여됩니다.

하지만 이 글에서 소개하는 CSS를 활용한 깔끔한 목록 만들기에서는 <UL>, <OL> 태그를 구분할 필요가 없습니다. 왜냐하면 CSS의 list-style 속성을 이용하여 목록 태그가 기본적으로 가지고 있는 "목록의 기능"을 삭제할 것이기 때문입니다. 즉, <UL> 태그의 경우에는 개별 아이템 앞의 구분 문자가 사라지고, <OL> 태그의 경우에는 순서를 나타내는 숫자 또는 알파벳이 사라지게 됩니다.

<UL>, <OL> 태그 내부에서 사용할 수 있는 부가적인 태그로는 <LI>가 있습니다. <LI>는 List Item의 약자로서, 목록의 개별 아이템을 추가할 때 사용됩니다. <LI> 태그는 <UL>, <OL> 태그에서 공통적으로 사용됩니다.

HTML 목록 태그를 사용하는 방법은 다음과 같습니다.



<UL>, <OL> 태그의 사용법은 동일합니다. <LI> 태그 내부에 추가적인 목록을 만들고 싶다면 그대로 <UL> 또는 <OL> 태그를 추가하면 됩니다. 이렇게 중첩되는 목록 태그 구성은 홈페이지 또는 블로그의 사이드바 메뉴를 만들 때 주용 사용됩니다.

이 블로그에서도 목록 태그를 중첩하여 사이드바 메뉴를 구성하였습니다. 겉으로 보기에는 그렇게 보이지 않겠지만, 이 블로그의 사이드바 메뉴는 기본적으로 HTML의 목록 태그로 만들어졌습니다. 겉으로 보여지는 모습을 수정하기 위하여 CSS를 활용한 것입니다.

목록 디자인에 사용될 수 있는 CSS 속성

CSS를 활용하여 HTML 목록 디자인을 수정할 때 반드시 사용되는 속성은 list-style입니다. 이 속성은 HTML 태그가 가지고 있는 고유한 목록 기능을 제거할 때 사용됩니다. list-style 속성의 값을 none으로 설정하면 해당 HTML 목록 태그의 목록 기능이 싹 사라집니다.

하지만 list-style 속성을 이용하여 HTML 태그의 목록 기능을 제거하더라도 원래 가지고 있는 내부여백 속성padding과 외부여백 속성margin은 사라지지 않습니다. 이 문제는 해당 목록 태그의 padding, margin 속성 값을 0 또는 개발자가 원하는 수치로 변경함으로써 해결할 수 있습니다.

정리하자면, 목록 태그에 직접적으로 사용되는 CSS 속성은 list-style, padding, margin입니다. 이렇게 세 개의 속성을 이용하면 HTML 목록 태그의 기본 속성을 모두 제거할 수 있습니다. 아래의 예제 소스코드를 보면 쉽게 이해할 수 있을 것입니다.





위의 소스코드는 <UL>, <OL> 태그의 기본 목록 속성을 제거하는 방법을 보여줍니다. <UL> 태그에 스타일시트에 정의되어 있는 list class를 적용함으로써 해당 목록 태그의 기능을 모조리 지워버립니다. list class에 적용된 속성은 아래의 CSS 소스코드에서 볼 수 있는데, list-style, margin, padding 속성이 적용되었습니다.

HMTL의 기본 목록 태그는 블록 스타일에 내부, 외부 여백이 기본적으로 설정되어 있다는 것을 위에서 잠깐 언급하였는데, 목록 스타일을 디자인할 때에는 이 속성을 제거하는 것이 가장 중요합니다.

예제 1 - 나만의 목록 만들기

어짜피 HTML 목록 스타일은 CSS에 의하여 제거되어야 하는데 왜 굳이 HTML 목록 태그를 사용해야 하는지 의문이 들 수도 있겠습니다. 물론 목록 태그가 아니라 <DIV>와 같은 블록 태그를 사용하는 것도 가능합니다. 하지만 블록 태그가 아닌 목록 태그를 사용하는 데에는 합당한 이유가 있습니다. HTML 목록 태그는 호환성을 위하여 사용됩니다. 사이트 방문자가 CSS를 사용할 수 없는 웹브라우저를 사용하고 있을 때에는 개발자가 만든 목록 디자인이 페이지에 적용될 수 없는데, 이와 같은 경우에도 최대한 페이지의 가독성을 높이기 위하여 HTML 목록 태그가 사용되는 것입니다.

그렇다면 HTML 기본 목록 스타일을 수정하여 나만의 목록 스타일을 만드는 방법에 대하여 알아보겠습니다.



우선 위의 HTML 소스코드를 끝까지 활용할 예정입니다. 가장 기본적인 형태로서 목록을 구성할 때 가장 많이 사용되는 구조입니다. 그런데 위의 소스코드는 단순히 목록을 출력하기 위한 것입니다. 만약 사이트의 메뉴를 목록으로서 출력하고 싶다면 목록 태그 블록을 <NAV> 태그로 감싸면 됩니다. <NAV> 태그는 HTML5에서 기본적으로 지원하는 시맨틱 태그 중 하나입니다. 다른 영역과 구분하여 사이트의 메뉴 영역을 지정할 때 사용됩니다.

위의 예제 소스코드에서는 <UL> 태그에 mylist class를 적용하였습니다. 그렇다면 CSS에서는 mylist class가 적용된 <UL>, <OL> 태그를 바탕으로 목록 스타일을 디자인하면 됩니다. 아래의 CSS 소스코드와 같이 <UL>, <OL> 태그 모두에 mylist class가 적용될 수 있도록 해줍니다. 그리고 mylist class에 max-width와 width 속성을 함께 적용함으로써 반응형 레이아웃스킨에서도 사용할 수 있도록 하였으며, 목록의 활용성을 높였습니다.



위에서 설명했던 HTML의 기본 목록 스타일을 제거하면 아래의 이미지와 같이 같이 블록 태그DIV, P를 사용한 것과 같은 모습을 보입니다. 하지만 CSS를 사용할 수 없는 웹 브라우저에서는 HTML의 기본 목록 스타일이 그대로 출력됩니다. 즉, 웹 브라우저 간의 호환성이 높아집니다. 참고로, DIV 태그를 사용하면 CSS를 사용할 수 없는 모든 웹브라우저에서 아래의 이미지와 같이 출력됩니다. 목록임을 알아차리는 것이 어려워집니다.

위에서도 설명했듯이 웹 브라우저 간의 호환성을 높이기 위하여 대부분의 개발자는 목록 스타일을 디자인할 때 HTML 목록 태그를 사용합니다. 이 글에서도 마찬가지입니다.



그렇다면 이제 다른 CSS 속성을 추가하여 나름 멋있는 목록 스타일을 만들어봅시다. 아래의 CSS 소스코드를 위의 HTML 예제 <style> 태그 영역에 추가합니다. 아래의 소스코드는 목록 스타일을 매우 깔끔하게 바꿔줄 것입니다. 그리고 방문자들로 하여금 목록임을 한 눈에 알아차릴 수 있게 해줄 것입니다. 참고로, 목록을 만들 때에는 <LI> 태그에 각종 스타일 속성을 지정해야 합니다. <UL> 태그는 목록 영역의 가장 바깥쪽에 위치하는 영역만을 지정해주는 태그로 사용됩니다.

아래의 소스코드에서는 padding과 margin 속성을 적당히 사용하여 보는 사람으로 하여금 목록 아이템을 잘 인식할 수 있도록 하였습니다. 만약 padding과 margin 속성을 사용하지 않는다면 목록 아이템의 텍스트가 서로 붙어버리는 대참사가 발생하게 됩니다. CSS의 padding, margin 속성을 사용하는 방법은 다음의 글에서 자세하게 설명하고 있습니다. → 홈페이지를 멋있게 만들어주는 CSS 기본 속성 알아보기 by Walter Erzsa

일반적으로 목록을 만들 때에는 각각의 목록 아이템을 구분할 수 있도록 아이템 외부에 선을 만들어줍니다. 여기에서는 각각의 아이템마다 하단에 선을 만들어주었습니다. HTML DOM 요소에 선을 생성하는 CSS 속성은 border입니다. 아래의 소스코드에서는 하단에 선을 만들기 위하여 border-bottom 속성이 사용되었습니다.



위의 CSS 속성들이 적용되면 아래의 이미지와 같이 매우 깔끔한 목록이 화면에 출력되는 것을 확인할 수 있습니다. 각각의 아이템마다 하단에 선이 형성되어 다른 아이템과의 구분이 더욱 쉬워졌습니다. 또한 글씨 크기를 조정하여 다른 콘텐츠로부터의 독립성을 높였습니다. 일반적으로 목록 콘텐츠는 외부 콘텐츠보다 글씨 크기를 작게하는 것이 좋습니다.

이 정도의 수준만 되더라도 목록 스타일로 사용하기에는 아무런 문제가 없을 것입니다. 하지만 필자가 아래의 목록 스타일을 보기에는 무엇인가2% 부족해보입니다. 그러므로 이 글에서는 목록 스타일과 관련하여 더 많은 것을 알려드리도록 하겠습니다.



목록 아이템 하단에 선이 생긴 것은 좋지만, 가장 마지막에 있는 아이템의 하단에까지 선이 형성되는 것은 조금 어색해보입니다. 보통 가장 아래에 있는 아이템의 하단 선은 제거하는 것이 일반적이기 때문입니다. 이 문제는 매우 간단하게 해결할 수 있습니다. :last-child CSS 선택자를 이용하면 됩니다. :last-child 선택자를 사용하는 방법은 다음 글에서 자세히 설명하고 있습니다. → 고급 사용자를 위한 CSS 선택자에 관한 지식 / 특정한 위치에 있는 HTML 요소 선택 방법 by Walter Erzsa

:last-child 선택자는 가장 마지막에 있는 HTML DOM을 선택할 때 사용됩니다. 위의 예제에서는 <LI> 태그 중 "목록 아이템 5"가 가장 마지막에 있는 HTML DOM 요소가 되는 것입니다. 아래의 CSS 소스코드를 위의 예제에 추가하면 목록 아이템 5 하단에 생성되었던 선이 제거됩니다.



그런데 보통 목록 아이템 앞 쪽에는 무엇인가 아이콘이 있는 것이 더 좋지 않겠습니까? 이 블로그만 하더라도 카테고리 목록을 보면 폴더 아이콘과 문서 아이콘이 아이템 가장 앞 쪽에 자리잡고 있는 것을 확인할 수 있을 것입니다.

각각의 아이템 앞 쪽에 아이콘을 추가하는 방법 역시 매우 간단합니다. :before CSS 선택자를 이용하면 됩니다. :before 선택자는 선택된 HTML DOM 객체의 내부에 추가적인 콘텐츠를 추가할 때 사용됩니다. :before 선택자는 DOM 객체 내부의 가장 앞 쪽에, :after 선택자는 DOM 객체 내부의 가장 뒷 쪽에 콘텐츠를 추가합니다.



위의 CSS 소스코드는 각각의 목록 아이템 앞에 > 아이콘을 추가해줍니다. :before, :after 식별자를 사용하여 추가한 콘텐츠에는 독자적인 스타일 속성 지정이 가능합니다. 기본적으로 부모 DOM의 스타일 속성을 상속받지만, 식별자 내부에서 지정한 속성이 가장 우선적으로 적용됩니다. 단, 부모 DOM의 블록 성질은 상속받지 않습니다. 부모 DOM의 텍스트 스타일 속성만을 상속받을 수 있습니다.

위의 소스코드에서는 display 속성에 inline-block 값을 주었는데, 이것은 :before, :after 식별자를 통하여 생성된 콘텐츠는 기본적으로 인라인 텍스트의 속성을 가지기 때문입니다. display 속성에 inline-block 값을 주면 padding, margin, top 등과 같은 블록 전용 스타일 속성을 사용할 수 있으면서도, 텍스트와 같은 줄에 위치시킬 수도 있습니다.

위의 소스코드가 적용되면 다음과 같은 목록이 화면에 출력됩니다.



목록 아이템의 아이콘은 FontAwesome을 이용해도 됩니다. FontAwesome을 이용하는 방법은 다음 글에서 자세하게 설명하고 있습니다. → Font Awesome을 이용하여 CSS 폰트 아이콘 만드는 방법 / Font Awesome 사용 방법 by Walter Erzsa

위에서 설명한 스타일 속성 말고도 목록에는 매우 다양한 속성들이 적용될 수 있습니다. 목록을 메뉴로 사용한다면, cursor 속성을 사용하여 마우스 포인터를 손으로 바꿀 수도 있고, transition 속성과 :hover 선택자를 사용하여 마우스 커서를 올릴 때마다 부드럽게 배경 색이 하이라이트 되도록 할 수도 있습니다. 이 글에서 설명한 목록을 어떻게 발전시키느냐는 이 글을 읽고 있는 바로 당신에게 달려있습니다. It's up to you.

예제 2 - 기존의 목록을 완전히 새로운 방식으로 표현하기

목록 스타일이 반드시 수직으로 구성되어야 하는 것은 아닙니다. CSS를 활용하면 가로로 나열되어 있는 목록도 만들 수 있습니다. 특히 홈페이지의 메뉴를 만들 때 이 방법이 많이 사용됩니다.

예제 HTML 소스코드는 위의 예제 1에서 사용하였던 것을 그대로 사용할 것입니다. 이 예제에서는 CSS 부분만 수정해주면 됩니다. 놀라운 점은 수평으로 메뉴를 만드는 CSS 소스코드가 더 간단하는 점입니다.

가로로 나열되는 메뉴를 만드는 CSS 소스코드는 다음과 같습니다. 가장 큰 변화는 각각의 <LI> 태그에 인라인 블럭 스타일을 적용했다는 점입니다. display 속성의 값을 inline-block으로 지정함으로써 모든 <LI> 태그의 블록 속성이 인라인 블록으로 변경됩니다.

이제 모든 아이템메뉴 항목은 독립적인 객체로 간주되어야 하므로, 아이템 하단에만 선을 만드는 것이 아니라 아이템을 완전히 감쌀 수 있는 선을 만들어야 합니다. 따라서 위의 예제에서는 하단에만 선을 만들었기 때문에 border-bottom 속성을 적용하였으나, 이 예제에서는 상하좌우에 선을 만들어내는 border 속성을 적용하였습니다.

cursor 속성은 마우스 커서의 모양을 설정하는 속성입니다. 이 속성을 사용하면 운영체제에서 지원하는 모든 마우스 커서 모양을 지정할 수 있습니다. 이 예제에서는 pointer 값을 지정하여 손가락 모양의 커서 모양을 적용하였습니다.



위의 CSS 소스코드를 적용시키면 아래와 이미지와 같이 나름 괜찮은 수평 메뉴가 출력되는 것을 확인할 수 있을 것입니다. 그런데 한 줄이 아니라 두 줄로 보이고 있죠? 이것은 메뉴를 감싸고 있는 <UL> 태그에 max-width 속성을 적용하였기 때문입니다. <UL> 태그의 max-width 속성에 900px 값을 주었기 때문에 웹 브라우저의 가로 넓이에 따라 자동으로 메뉴 영역의 가로 넓이도 자동으로 변경됩니다. 따라서 이 메뉴는 반응형 레이아웃에 적용될 수 있으며, 웹 브라우저 화면을 줄이면 아래의 화면에서 보는 것과 같이 각각의 메뉴가 자동으로 줄바꿈되어 출력됩니다.

웹 브라우저의 가로 해상도를 넓게 만들면 다시 자동으로 한 줄의 메뉴가 출력됩니다. 바로 이것이 반응형 레이아웃에서 사용되는 미디어 쿼리를 사용하지 않고도 구현할 수 있는 반응형 스타일입니다.



만약 메뉴 아이템에 마우스 커서를 올리는 경우에 무엇인가 효과를 주고 싶다면, transition, background-color, font-weight 등의 다양한 CSS 속성들을 사용하면 됩니다. 이 글에서는 transition 속성과 background-color 속성을 이용한 메뉴 하이라이트 처리 방법에 대하여 알아보도록 하겠습니다.

우선 아래의 내용을 위의 CSS 소스코드 예제에 추가합니다.



transition 속성은 CSS 자체적으로 지원하는 애니메이션 속성입니다. transition 속성은 다음과 같은 방법으로 사용됩니다.

transition: {적용되는 속성} {지속 시간} {애니메이션 타입}

위의 예제에서는 background-color 속성에만 애니메이션을 적용하였으며, 애니메이션이 지속되는 시간은 0.3초, 애니메이션 타입은 linear입니다. linear 타입은 처음부터 끝까지 동일한 속력으로 진행되는 애니메이션을 말합니다. 애니메이션은 background-color 뿐만 아니라 border-color, top, width 등 거의 모든 스타일 속성에 적용될 수 있습니다. 특별히 지정하지 않고 모든 속성에 대하여 애니메이션을 적용하고 싶다면 alltransition: all ~을 입력하면 됩니다.

:hover 선택자를 사용함으로써 메뉴 아이템에 마우스 커서를 올렸을 때의 스타일을 지정하였으며, 마우스 커서를 올렸을 때 배경색background-color을 옅은 회색#f6f6f6으로 바꾸어줍니다.

이제 위의 소스코드를 웹 브라우저에서 직접 테스트해보십시오. 반응형 레이아웃을 지원하면서, 마우스 커서를 메뉴에 올렸을 때 부드럽게 배경 색이 바뀌는 것을 확인할 수 있을 것입니다. 이렇게 매우 간단한 CSS 속성만으로도 멋있는 메뉴를 만드는 것이 가능합니다. 어떻습니까? 이제 이 글에서 설명했던 메뉴에 더 많은 스타일 속성들을 추가하여 여러분만의 메뉴를 만들어보시기 바랍니다.

마무리 - 어디에서나 잘 활용되는 CSS

지금까지 CSS와 HTML 목록 태그 <UL>, <OL>을 이용하여 깔끔한 목록과 메뉴를 만드는 방법에 대하여 알아보았습니다. 겉으로 보기에 목록 태그를 사용한 것처럼 보이지 않았는데, 내부적으로는 HTML의 기본 목록 태그를 사용했었다니 적지 않게 놀라는 분들도 계실 것입니다.

CSS의 버전이 CSS3로 업그레이드되면서, 자바스크립트를 이용하지 않고도 CSS 자체적으로 지원하는 애니메이션 관련 속성들이 추가되었는데, CSS의 발전이 웹 디자인의 발전을 가져왔다고 볼 수 있습니다. 디자이너가 아닌 웹 프로그래머도 나름 괜찮은 애니메이션을 만들 수 있게 되었기 때문입니다. CSS3에서 추가된 애니메이션과 관련된 속성을 하나 예로 들어보자면, 위의 예제에서 사용하였던 transition 속성이 있습니다. 이렇게 새롭게 추가된 CSS3 속성들을 이용하여 더욱 멋있는 목록 스타일, 그리고 홈페이지, 블로그 등을 만들어보시기 바랍니다.