![[CSS] 깔끔한 목록 스타일 만드는 방법 / CSS list-style](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/07/40292979610_d20c14aca6_z.jpg?resize=640%2C427&ssl=1)
HTML에서 목록을 만드는 태그는 UL과 OL입니다. 이 태그는 활용도가 높기 때문에 메뉴를 생성하는 데에도 사용됩니다. 이 블로그에서도 여러 부분에 사용되었습니다. 그런데 HTML에서 기본적으로 제공하는 이 태그는 목록 형태가 매우 지저분합니다. 따라서 CSS를 이용하여 홈페이지 레이아웃에 맞게 목록 스타일을 수정하는 것이 일반적입니다. 이 글에서는 UL, OL 태그를 이용하여 만들어진 목록 스타일을 깔끔하게 꾸미는 방법에 대하여 알아보겠습니다.
HTML에서 지원하는 목록 관련 태그
HTML에서 사용할 수 있는 목록 관련 태그로는 UL, OL, LI 등이 있습니다. 이 중에서는 UL과 LI가 가장 많이 사용됩니다. UL태그와 OL 태그의 차이점은 순서의 기능이 있느냐 없느냐입니다. OL 태그는 목록 기능에 순서 기능까지 포함하고 있습니다. OL 목록의 개별 아이템에는 입력된 순서대로 숫자 또는 알파벳이 부여됩니다.
하지만 이 글에서는 UL, OL 태그를 구분할 필요가 없습니다. 왜냐하면 CSS의 list-style 속성을 이용하여 목록 태그가 기본적으로 가지고 있는 목록의 기능을 삭제할 것이기 때문입니다. 따라서 UL 태그의 경우에는 개별 아이템 앞의 구분 문자가 사라지고, OL 태그의 경우에는 순서를 나타내는 숫자 또는 알파벳이 사라지게 됩니다.
UL, OL 태그 내부에서 사용할 수 있는 부가적인 태그로는 LI가 있습니다. LI는 List Item의 약자로서 목록의 개별 아이템을 추가할 때 사용됩니다. LI 태그는 UL, OL 태그 내에서 공통적으로 사용됩니다.
HTML 목록 태그를 사용하는 기본적은 방법은 다음과 같습니다.
<ul>
<li>순서 없는 목록의 아이템 1</li>
<li>
순서 없는 목록의 아이템 2
<ul>
<li>추가 목록 아이템 1</li>
<li>추가 목록 아이템 2</li>
</ul>
</li>
<li>순서 없는 목록의 아이템 3</li>
</ul>
<ol>
<li>순서 있는 목록의 아이템 1</li>
<li>순서 있는 목록의 아이템 2</li>
<li>순서 있는 목록의 아이템 3</li>
</ol>
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 class="mylist">
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>
ul.mylist, ol.mylist {
list-style: none;
margin: 0px;
padding: 0px;
}
위 예제는 UL, OL 태그의 기본 목록 속성을 제거하는 방법을 보여줍니다. UL 태그에 mylist class를 적용시킴으로써 해당 목록 태그의 기능을 제거하였습니다. mylist class에 적용된 속성은 CSS 소스코드에서 볼 수 있는데, list-style, margin, padding 속성이 적용되었습니다.
예제 1 – 나만의 목록 만들기
어짜피 HTML 목록 스타일은 CSS에 의하여 제거되어야 하는데 왜 굳이 HTML 목록 태그를 사용해야 하는지 의문이 들 수도 있겠습니다. 물론 목록 태그가 아니라 DIV와 같은 블록 태그를 사용하는 것도 가능합니다. 하지만 블록 태그가 아닌 목록 태그를 사용하는 데에는 합당한 이유가 있습니다. HTML 목록 태그는 호환성을 위하여 사용됩니다. 사이트 방문자가 CSS를 사용할 수 없는 웹브라우저를 사용하고 있을 때에는 개발자가 만든 목록 디자인이 페이지에 적용될 수 없는데, 이와 같은 경우에도 최대한 페이지의 가독성을 높이기 위하여 HTML 목록 태그가 사용되는 것입니다.
또한 목록 태그를 사용하여 보다 효율적으로 목록 또는 메뉴를 구성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>예제 1 - 나만의 목록 만들기</title>
<style>
/* 이곳에 CSS 소스코드가 들어가야 합니다. */
</style>
</head>
<body>
<!-- <nav> -->
<ul class="mylist">
<li>목록 아이템 1</li>
<li>목록 아이템 2</li>
<li>목록 아이템 3</li>
<li>목록 아이템 4</li>
<li>목록 아이템 5</li>
</ul>
<!-- </nav> -->
</body>
</html>
위 예제는 가장 기본적인 형태로서 목록을 구성할 때 가장 많이 사용되는 구조입니다. 그런데 위 예제는 단순히 목록을 출력하기 위한 것입니다. 만약 사이트의 메뉴를 목록으로서 출력하고 싶다면 목록 태그 블록을 NAV 태그로 감싸면 됩니다. NAV 태그는 HTML5에서 기본적으로 지원하는 시맨틱 태그 중 하나입니다. 다른 영역과 구분하여 사이트의 메뉴 영역을 지정할 때 사용됩니다.
위 예제에서는 UL 태그에 mylist class를 적용하였습니다. 따라서 아래의 CSS 소스코드와 같이 UL, OL 태그 모두에 mylist class가 적용될 수 있도록 해줍니다. 그리고 mylist class에 max-width와 width 속성을 함께 적용함으로써 반응형 레이아웃 스킨에서 목록의 너비가 자동으로 변동되도록 하여 목록의 활용성을 높일 수도 있으니 이 점 참고바랍니다.
ul.mylist, ol.mylist {
list-style: none;
margin: 0px;
padding: 0px;
max-width: 250px;
width: 100%;
}
위에서 설명했던 HTML의 기본 목록 스타일을 제거하면 아래의 이미지와 같이 같이 블록 태그(DIV, P)를 사용한 것과 같은 모습을 보입니다. 하지만 CSS를 사용할 수 없는 웹 브라우저에서는 HTML의 기본 목록 스타일이 그대로 출력됩니다. 다시 말해, 웹 브라우저 간의 호환성이 높아집니다. 참고로 DIV 태그를 사용하면 CSS를 사용할 수 없는 모든 웹브라우저에서 아래의 이미지와 같이 출력됩니다. 목록임을 알아차리는 것이 어려워집니다.
그렇다면 이제 다른 CSS 속성을 추가하여 나름 멋있는 목록 스타일을 만들어봅시다. 아래의 CSS 소스코드를 위의 HTML 예제 <style> 태그 영역에 추가합니다. 아래의 소스코드는 목록 스타일을 깔끔하게 바꿔줄 것입니다. 그리고 방문자들로 하여금 이것이 목록임을 한 눈에 알아차릴 수 있게 해줄 것입니다.
목록을 만들 때에는 LI 태그에 스타일 속성을 지정해야 합니다. UL 태그는 목록 영역의 가장 바깥쪽에 위치하기 때문에 각각의 아이템에 개별적인 스타일 속성을 지정할 수 없습니다.
아래의 CSS 소스코드에서는 padding과 margin 속성을 적당히 사용하여 보는 사람으로 하여금 목록 아이템을 잘 인식할 수 있도록 하였습니다. 만약 padding과 margin 속성을 사용하지 않는다면 목록 아이템의 텍스트가 서로 붙어버리는 문제가 발생하게 됩니다. CSS의 padding, margin 속성을 사용하는 방법은 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2015/08/12 페이지를 멋있게 만들어주는 CSS 기본 속성 알아보기 by Walter Erzsamatory
일반적으로 목록을 만들 때에는 각각의 아이템을 구분할 수 있도록 아이템 외부에 선을 만들어줍니다. 여기에서는 각각의 아이템마다 하단에 선을 만들어주었습니다. HTML DOM 요소에 선을 생성하는 CSS 속성은 border입니다. 아래의 소스코드에서는 하단에 선을 만들기 위하여 border-bottom 속성이 사용되었습니다.
ul.mylist li, ol.mylist li {
padding: 5px 0px 5px 5px;
margin-bottom: 5px;
border-bottom: 1px solid #efefef;
font-size: 12px;
}
위의 CSS 속성들이 적용되면 아래 이미지와 같이 깔끔한 목록이 화면에 출력되는 것을 확인할 수 있습니다. 각각의 아이템마다 하단에 선이 형성되어 다른 아이템과의 구분이 더욱 쉬워졌습니다. 또한 글씨 크기를 조정하여 다른 콘텐츠로부터의 독립성을 높였습니다. 일반적으로 목록 콘텐츠는 외부 콘텐츠보다 글씨 크기를 작게하는 것이 좋습니다.
이 정도의 수준만 되더라도 목록 스타일로 사용하기에는 아무런 문제가 없습니다. 하지만 필자가 아래의 목록 스타일을 보기에는 무엇인가 부족해보입니다. 그러므로 이 글에서는 목록 스타일과 관련하여 더 많은 것을 알려드리도록 하겠습니다.
목록 아이템 하단에 선이 생긴 것은 좋지만, 가장 마지막에 있는 아이템의 하단에까지 선이 형성되는 것은 조금 어색해보입니다. 보통 가장 아래에 있는 아이템의 하단 선은 제거하는 것이 일반적입니다. 이 문제는 매우 간단하게 해결할 수 있습니다. :last-child CSS 선택자를 이용하면 됩니다. :last-child 선택자를 사용하는 방법은 다음 글에서 자세히 설명하고 있으니 참고바랍니다. → 2014/07/08 고급 사용자를 위한 CSS 선택자에 관한 지식 / 특정한 위치에 있는 HTML 요소 선택 방법 by Walter Erzsamatory
:last-child 선택자는 가장 마지막에 있는 HTML DOM을 선택할 때 사용됩니다. 위 예제에서는 LI 태그 중 “목록 아이템 5″가 가장 마지막에 있는 HTML DOM 요소가 됩니다. 아래의 CSS 소스코드를 위 예제에 추가하면 “목록 아이템 5” 하단에 생성되었던 선이 제거됩니다.
ul.mylist li:last-child,
ol.mylist li:last-child {
border-bottom: 0px;
}
그런데 목록 아이템 앞에는 무엇인가 보기좋은 아이콘이 추가되어야 하지 않겠습니까? 개별 아이템 앞에 아이콘을 추가하는 방법 역시 매우 간단합니다. :before CSS 선택자를 이용하면 됩니다. :before 선택자는 선택된 HTML DOM 객체의 내부에 추가적인 콘텐츠를 추가할 때 사용됩니다. :before 선택자는 DOM 객체 내부의 가장 앞 쪽에, :after 선택자는 DOM 객체 내부의 가장 뒷 쪽에 콘텐츠를 추가합니다.
ul.mylist li:before,
ol.mylist li:before {
content: ">";
display: inline-block;
vertical-align: middle;
padding: 0px 5px 6px 0px;
}
위의 CSS 소스코드는 각각의 목록 아이템 앞에 > 아이콘을 추가해줍니다. :before, :after 식별자를 사용하여 추가한 콘텐츠에는 독자적인 스타일 속성 지정이 가능합니다. 기본적으로 부모 DOM의 스타일 속성을 상속받지만, 식별자 내부에서 지정한 속성이 가장 우선적으로 적용됩니다. 단, 부모 DOM의 블록 성질은 상속받지 않습니다. 부모 DOM의 텍스트 스타일 속성만을 상속받을 수 있습니다.
위의 소스코드에서는 display 속성에 inline-block 값을 주었는데, 이것은 :before, :after 식별자를 통하여 생성된 콘텐츠는 기본적으로 인라인 텍스트의 속성을 가지기 때문입니다. display 속성에 inline-block 값을 주면 padding, margin, top 등과 같은 블록 전용 스타일 속성을 사용할 수 있으면서도 객체를 텍스트와 같은 라인에 위치시킬 수 있습니다. 결과는 다음과 같습니다.
목록 아이템의 아이콘은 FontAwesome을 이용해도 됩니다. FontAwesome을 이용하는 방법은 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2017/07/25 [CSS] Font Awesome 아이콘 사용 방법 by Walter Erzsamatory
위에서 설명한 스타일 속성 말고도 목록에는 매우 다양한 속성들이 적용될 수 있습니다. 목록을 메뉴로 사용한다면, cursor 속성을 사용하여 마우스 포인터를 손으로 바꿀 수도 있고, transition 속성과 :hover 선택자를 사용하여 마우스 커서를 올릴 때마다 부드럽게 배경 색이 하이라이트 되도록 할 수도 있습니다.
예제 2 – 기존의 목록을 완전히 새로운 방식으로 표현하기
목록 스타일이 반드시 수직으로 구성되어야 하는 것은 아닙니다. CSS를 활용하면 가로로 나열되어 있는 목록도 만들 수 있습니다. 특히 홈페이지의 메뉴를 만들 때 이 방법이 많이 사용됩니다.
예제 2의 HTML 소스코드는 예제 1에서 사용하였던 것을 그대로 사용할 것입니다. 이 예제에서는 CSS 부분만 수정해주면 됩니다. 가로로 나열되는 메뉴를 만드는 CSS 소스코드는 다음과 같습니다. 가장 큰 변화는 각각의 LI 태그에 인라인 블럭 스타일을 적용했다는 점입니다. display 속성의 값을 inline-block으로 지정함으로써 모든 LI 태그의 블록 속성이 인라인 블록으로 변경됩니다.
ul.mylist, ol.mylist {
list-style: none;
margin: 0px;
padding: 0px;
max-width: 900px;
width: 100%;
}
ul.mylist li, ol.mylist li {
display: inline-block;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #efefef;
font-size: 12px;
cursor: pointer;
}
이제 모든 아이템은 독립적인 객체로 간주되어야 하므로, 아이템 하단에만 선을 만드는 것이 아니라 아이템을 완전히 감쌀 수 있는 선을 만들어야 합니다. 예제 1에서는 객체 하단에만 선을 만들었기 때문에 border-bottom 속성을 사용하였으나, 이 예제에서는 상하좌우에 선을 만들어내는 border 속성을 사용하였습니다.
cursor 속성은 마우스 커서의 모양을 설정하는 속성입니다. 이 속성을 사용하면 운영체제에서 지원하는 모든 마우스 커서 모양을 지정할 수 있습니다. 이 예제에서는 pointer 값을 지정하여 손가락 모양의 커서 모양을 적용하였습니다.
위의 CSS 소스코드를 적용시키면 아래 이미지와 같이 나름 괜찮은 수평 메뉴가 출력되는 것을 확인할 수 있을 것입니다. 그런데 한 줄이 아니라 두 줄로 보이고 있죠? 이것은 메뉴를 감싸고 있는 UL 태그에 max-width 속성을 적용하였기 때문입니다. UL 태그의 max-width 속성에 900px 값을 주었기 때문에 웹 브라우저의 가로 넓이에 따라 자동으로 메뉴 영역의 가로 넓이도 자동으로 변경됩니다. 따라서 이 메뉴는 반응형 레이아웃에 적용될 수 있으며, 웹 브라우저 화면을 줄이면 아래의 화면에서 보는 것과 같이 각각의 메뉴가 자동으로 줄바꿈되어 출력됩니다.
웹 브라우저의 가로 해상도를 넓게 만들면 다시 자동으로 한 줄의 메뉴가 출력됩니다. 바로 이것이 미디어 쿼리를 사용하지 않고도 구현할 수 있는 반응형 레이아웃입니다.
만약 메뉴 아이템에 마우스 커서를 올렸을 때 무엇인가 효과를 주고 싶다면, transition, background-color, font-weight 등의 다양한 CSS 속성을 사용하면 됩니다. 이 글에서는 transition 속성과 background-color 속성을 이용한 메뉴 하이라이트 처리 방법을 알아보도록 하겠습니다.
우선 아래의 내용을 CSS 소스코드 예제에 추가합니다.
ul.mylist li,
ol.mylist li {
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-ms-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
ul.mylist li:hover,
ol.mylist li:hover {
background-color: #f6f6f6;
}
transition 속성은 CSS 자체적으로 지원하는 애니메이션 속성입니다. transition 속성은 다음과 같은 방법으로 사용됩니다.
transition: {적용되는 속성} {지속 시간} {애니메이션 타입}
위의 예제에서는 background-color 속성에만 애니메이션을 적용하였으며, 애니메이션이 지속되는 시간은 0.3초, 애니메이션 타입은 linear입니다. linear 타입은 처음부터 끝까지 동일한 속력으로 진행되는 애니메이션을 말합니다. 애니메이션은 background-color 뿐만 아니라 border-color, top, width 등 거의 모든 스타일 속성에 적용할 수 있습니다. 특별히 지정하지 않고 모든 속성에 대하여 애니메이션을 적용하고 싶다면 all(transition: all ~)을 입력하면 됩니다.
:hover 선택자를 사용함으로써 메뉴 아이템에 마우스 커서를 올렸을 때의 스타일을 지정하였으며, 마우스 커서를 올렸을 때 배경색(background-color)을 옅은 회색(#f6f6f6)으로 자동 변경합니다.
이제 위의 소스코드를 웹 브라우저에서 직접 테스트해보십시오. 반응형 레이아웃을 지원하면서, 마우스 커서를 메뉴에 올렸을 때 부드럽게 배경 색이 바뀌는 것을 확인할 수 있을 것입니다. 이렇게 간단한 CSS 속성만으로도 멋있는 메뉴를 만드는 것이 가능합니다. 어떻습니까? 이제 이 글에서 설명했던 메뉴에 더 많은 스타일 속성들을 추가하여 여러분만의 메뉴를 만들어보시기 바랍니다.
타이틀 이미지: Markus Spiske, html php java source code, Flickr. CC0 1.0.
![[대외활동] 2023년 제12기 국방정보공개 국민참여단](https://i0.wp.com/www.walterz.net/wp-content/uploads/2023/04/5880.png?resize=418%2C315&ssl=1)
위 수평으로 메뉴 나오는게 IE 11에서도 되는지요? 위 소스가지고 테스트 했는데 IE11 에서는 먹지 않는거 같아서요 ㅠㅠ
인터넷 익스플로러 11에서 inline-block 속성은 사용 가능합니다. 한 번 사용해주신 소스코드를 확인해볼 수 있을까요??
리스트에는 이미지를 넣을 수 없나요??
<li><img src=”” /></li> 이렇게 하고 width,height도 조정했는데 안돼요…ㅠㅠ
리스트에도 이미지 넣을 수 있습니다. 전체 소스코드를 볼 수 있을까요??