Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

ko:Styling Lists with CSS

This article is marked as in need of editing. You can help Codex by editing it.
목록을 표시할 때, 워드프레스는 표준 XHTML 요소를 사용한다:
  • 순서 있는 목록의 <ol> (목록의 항목 순서가 중요하여, 순번이 매겨진다)
  • 순서 없는 목록의 <ul> (일반적으로 글머리 기호로 항목을 표시한다)
  • 순서 있는, 또는 순서 없는 한 목록의 각 항목<li>

기본으로, 워드프레스에서 대부분의 목록 (및 목록 항목)은 id 또는 class 속성으로 식별되어, 쉽게 스타일링할 수 있다. style.css 파일을 간단하게 변경하면, 목록을 수직이 아닌 수평, 동적인 메뉴 강조 기능, 글머리 기호 변경 또는 순번 스타일 변경, 글머리 기호 제거, 또는 이 스타일들을 모두 조합하여 표시할 수 있다.

중첩 목록 레이아웃

테마마다 다른 방식으로 목록의 서식을 정하고 있다. 워드프레스에서 사용자가 가장 많이 수정하고자 하는 목록은 사이드바 목록이다. 많은 사이드바에 중첩 목록이 있기 때문에, 이 목록을 심도 있게 살펴보자.

먼저 사용 중인 테마 폴더에 있는 style.css 파일을 검토해보자. 대부분의 워드프레스 테마는 사이드바 메뉴 섹션을 사이드바, 메뉴, 또는 이 둘을 혼합한 단어로 라벨을 붙이고 있다. 그러므로, 일반적으로 sidebar.php라는 사이드바 템플릿 파일을 살펴보자. 이것은 샘플sidebar.php 레이아웃이다; 여러분의 버전은 다를 수도 있지만, 개념을 같을 것이다.

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

중첩 목록으로 작업을 하고 있고, 각 목록에 개별 스타일을 적용하고자 한다면, 스타일시트(style.css)에 "중첩(nest)"을 다시 만들어야 한다.

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}
ul 
첫 번째 스타일 (#sidebar ul)은 전체 목록의 모양을 설정한다. 이것은 보통 마진과 패딩 스타일을 포함하고 있으며, 전체 목록에 대한 글꼴, 색상과 기타 세부 사항을 포함 할 수도 있다.
li 
#sidebar li는 실제 목록 항목의 스타일을 지정한다. 여기에서 글머리 기호를 포함한 또는 포함하지 않은 형식을 지정한다. 글꼴, 글꼴 크기, 색상을 변경하고, 테두리를 추가할 수도 있다.
ul li 
#sidebar ul li첫 번째 중첩 목록의 스타일을 지정한다. 각각의 첫 번째 수준 중첩 목록은 여기에서 사용자 정의한다. 그러나 특정 CSS ID 내에 이것을 포함하여, 이 하위 목록을 각각 다르게 스타일링할 수 있다. 위 예제에서, #search 섹션 다음에 있는, 첫 번째 중첩 목록은 #pagenav이다. Pages를 사용하고 있다면, 이것은 페이지 목록이 생성되는 곳이다. 페이지워드프레스 루프 외부에서 작동하고, 보통 "소개(About Us)", "문의(Contact)", "사이트 맵" 같은 특정 정보를 강조한다. 페이지 스타일을 나머지 다른 목록과 다르게 스타일링하고자 한다면, #pagenav페이지 모양에 관한 특정 정보를 설정한다.
ul ul li 
#sidebar ul ul li#sidebar ul ul 안의 링크 스타일을 지정하여, 이 목록의 모양을 사용자 정의한다. 다시 말해서, #pagenav 목록을 사용자 정의한다면, 나머지 중첩 목록 항목과 다르게 표시된다.
ul ul ul li 
#sidebar ul ul ul li 은 하위-하위-목록의 스타일이다. 하위 카테고리가 있는 카테고리 목록이 있다면, 카테고리 제목은 목록의 첫 번째 수준이고, 카테고리는 목록의 두 번째 수준, 모든 하위 카테고리는 세 번째 수준 또는 아래와 같은 하위-하위-수준이다. 일부 디자이너는 세 번째 수준 목록의 스타일에 더 작은 글꼴 크기, 다른 글머리 기호, 또는 다른 색상을 적용하기를 좋아한다. 위에 있는 목록 항목과 구별하기 위해서다:
  • Category Title
    • Category One
    • Category Two
      • Sub-Category One
      • Sub-Category Two
    • Category Three

특정 목록 항목 스타일링

카테고리 목록을 아카이브(Archives) 목록과 다르게 표시하기를 원하는가? 그러면index.php 또는 sidebar.php 열고, 조심스럽게 적절한 목록 항목에 다음 스타일 참조를 추가한다:

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

카테고리와 아카이브를 각각 사용자 정의하려면, 다음 코드를 스타일시트에 추가한다:

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

목록의 다른 섹션으로 이동하여, 스타일 참조 이름을 부여하고, 스타일시트에 이 이름을 추가한다. 목록의 어떤 부분이 목록의 어떤 면을 제어하는지 확인하였다면, 목록의 모양을 변경할 수 있다.

개별 항목 스타일링

목록 스타일에 이미지를 적용하려면, 각 <li> 태그는 자신의 클래스(class) 또는 ID가 필요하다. Classy wp_list_pages 플러그인을 사용해보자.

목록 스타일링

목록에서 중요한 부분은 글머리 기호이다 - "이것은 목록이다"라고 알려주는 동그란 점, 반점, 또는 그래픽. 목록의 글머리 기호 스타일 또는 순번은 스타일시트에서 list-style-type 속성으로 지정한다. 기본 값은disc이다. 다른 기본 값으로는 circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, none이다. 기본 값을 square로 변경해보자.

#sidebar li {
   list-style: square;
}

list-style-type을 입력하지 않고, 단축형인 list-style을 입력하고 있고, 기본 값 tt>disc</tt> 대신, small squares를 적용하고 있다.

그러나 모든 목록이 글머리 기호가 필요하지는 않다. 전체 레이아웃으로, 목록을 목록으로 알 수 있다. 글머리 기호를 제거하려면 스타일시트 다음과 같이 변경한다:

#sidebar li {
   list-style: none;
}

이제, #sidebar ID의 DIV 안에 있는, 모든 <li> 태그는, 글머리 기호를 표시하지 않는다. 다른 값으로 변경해 보면서, 실행 결과를 살펴본다.

힌트: 접근성 측면에서, 순서 있는 목록은 순서 없는 목록보다 더 쉽게 탐색할 수 있다.

글머리 기호 대신 사용자 정의 이미지 사용

지루한 글머리 기호가 싫증이 나는가? 몇 가지 CSS 기술을 적용하여 지루함을 없애보자. 이 경우에는, 글머리 기호 대신 글머리 이미지를 사용한다고 브라우저에 알려 주기 위해, list-style-image를 사용한다.

재미 있는 글머리 그래픽을 찾아보고, 다음 코드를 추가하여, 목록에 화려한 글머리 기호를 추가한다:

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

상대 링크 대신 절대 링크를 사용할 수 있다. 간단하게 url(/wp-images/image.gif )url(http://example.com/wp-images/image.gif)로 변경한다.

목록에 테두리 추가

제목 다음에 밑줄과 같은 테두리를 추가하려면, 간단하게 제목 아래 <ul> 상단에 테두리 스타일을 추가할 수 있다. 제목 자체가 아니다.

#sidebar ul ul {...; border-top: solid 1px blue; ....}

한 단계 더 나가서, 목록 주위에 맨 위에 제목이 있는 전체 상자를 추가한다:

#sidebar ul ul {...; border: solid 1px blue; ....}

테두리와 함께 목록에 배경색을 추가한다:

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

최종 결과는 다음과 같이 보일 것이다:

Category Title
Category One

Category Two

Category Three

아니면 실제로 아래와 같은 모양으로 만들어보자:


Category Title
Category One

Category Two

Category Three


목록 글머리 기호와 목록 레이아웃이 재미있을 수 있다. 글머리 기호, 목록에 문제가 발생하면, 아래 자료를 확인해보고, 도움이 더 필요하면 워드프레스 지원 포럼을 방문한다.

중첩 목록 문제 해결

중첩 목록에 문제가 발생하면, 다음의 해결책이 도움이 될 것이다. 또한 추가로 스타일링 도움이 필요하면,CSS 문제 해결를 참조한다.

부적절한 태그 구조

중첩 목록 안의 첫째 에러 원인은 목록 구조의 잘못이다. 이것은 아주 간단하고, 정확한 중첩 목록 레이아웃이다. Note that when a (새) 중첩 목록이 시작할 때, 현재 목록 항목의 <li> 태그는 아직 닫혀지지 않는다. 중첩 목록이 완성될 때까지 태그가 열려 있고, 완성되면 닫힌다.

<ul>
   <li>Category One</li>
   <li>Category Two     <----참고: 종료 List 태그가 없다
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----참고: 종료 LIST 태그가 없다
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----참고: 종료 LIST 태그
              </ul></li>           <----참고: 중첩 목록 종료
           <li>Sub-Category Three</li>
      </ul></li>       <----참고: 중첩 목록 종료
    <li>Category Three</li>
</ul>      <----참고: 전체 list 종료

템플릿 태그 목록

목록을 표시하기 위해 사용되는 템플릿 태그마다 HTML list 태그를 사용하고, 의존하는 방법이 다르다. 일부 템플릿 태그는 자동으로 <ul><li> 태그를 포함하므로, 별도로 목록에 이 템플릿 태그를 포함하기만 하면, 이것이 모든 작업을 한다. 다른 템플릿 태그는 이 태그 다음에 <ul> 이 적절하게 있어야 한다, 그러면 자신의 <li> 태그를 만들게 된다. 다른 템플릿 태그는 어떤 유형의 list 태그가 필요한지 지정해야 한다. 또는 태그의 매개변수에 나열하지 않으면, 아무 것도 사용하지 않는다.

wp_list_cats 또는 wp_list_pages와 같은 템플릿 태그를 사용할 때, 중첩 목록에 문제를 발생하면, list 태그 사용 방법을 알아보기 위해, 매개변수를 체크하고, 자신의 사용 방법과 비교해본다.

부모/자식 관계

CSS 부모와 자식 관계에 논의된 바와 같이, 목록은 커다란 주제 중의 하나이다. 자식 항목의 스타일은 "부모"의 스타일이 적용된다. 부모의 목록 스타일이 "빨간"색이고, 자식은 "파란"색으로 표시하려면, 자식 목록 스타일을 "파랗게" 지정해서, 부모 스타일보다 우선 적용되게 하여야 한다.

워드프레스 사이드바 안의 중첩 목록은 일반적으로 링크를 포함하고 있다. 그러므로, 목록을 원하는 대로 스타일링할 수 있는 반면, 링크 스타일은 목록 스타일보다 우선 적용된다. 자신의 특정 스타일 클래스(class)를 부여하여, hover 속성을 포함한, 목록의 링크 표시 방법을 제어할 수 있다:

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

자료