이 튜토리얼에 표시된 CSS 속성은 목록을 디자인하는 데 사용할 수 있습니다. 정보는 HTML 요소 ul 및 ol과 관련이 있습니다. 따라서 원하는 대로 정렬된 목록과 정렬되지 않은 목록을 사용자 정의할 수 있습니다.
목록에 대한 일반 정보
목록 스타일은 다음 세 가지 속성을 요약한 것입니다:
- 목록 스타일 유형
- 목록 스타일 위치
- 목록 스타일-이미지
목록 스타일은 목록 앞 글머리 기호의 그래픽 표현 유형과 들여쓰기에 영향을 줄 수 있습니다. 위의 사양은 쉼표로 서로 구분됩니다. 순서는 중요하지 않습니다. 또한 각 속성마다 값을 지정할 필요는 없습니다.
다음은 예시입니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> ul { list-style:square; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>브라우저에서는 다음과 같이 표시됩니다:
그래픽 글머리 기호
고유한 그래픽을 글머리 기호로 지정할 수 있습니다. 이를 위해 목록 스타일 이미지 속성이 사용됩니다. 다음 값을 사용할 수 있습니다:
- url - 파일 이름 및 그래픽의 경로일 수 있습니다.
- none - 그래픽이 표시되지 않습니다.
예시입니다:
ul { list-style-이미지: url(bullet.gif); }
URL에 지정된 그래픽의 경로가 올바른지 확인하세요.
경로가 잘못 지정되면 브라우저는 표준 글머리 기호로 되돌아갑니다.
글머리 기호 위치
목록 스타일 위치는 들여쓰기와 관련하여 번호 매기기 또는 글머리 기호가 작동하는 방식을 지정하는 데 사용됩니다.
- 안쪽 - 글머리 기호와 목록 항목이 왼쪽 정렬되도록 첫 번째 줄이 들여쓰기됩니다.
- 바깥쪽 - 글머리 기호가 목록 항목의 왼쪽에 배치됩니다.
다음 예제에서는 내부와 외부의 두 값이 사용됩니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> ul.a { list-style-position:inside; } ul.b { list-style-position:outside; } </style> </head> <body> <p>내부 목록입니다:</p> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>외부 목록입니다:</p> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>이 두 값이 실제로 어떤 다른 효과를 내는지 직접 확인할 수 있습니다.
글머리 기호 모양 정의하기
글머리 기호 문자의 모양을 명시적으로 정의할 수 있습니다. 번호 매기기 목록의 모양도 영향을 받을 수 있습니다. 이를 위해 목록 스타일 유형 속성이 사용됩니다. 이 속성에는 다음 값을 사용할 수 있습니다:
- decimal - ol 목록의 경우: 번호 1, 2, 3 등.
- lower-roman - ol 목록의 경우: 번호 매기기 I., II., III 등
- 상위 로마자 - OL 목록의 경우: 번호 매기기 I., II., III., IV. 등.
- 낮은 알파 또는 낮은 라틴어-올 목록의경우 : 번호 매기기 I., II., III., IV. 등.
- 상부 알파 또는 상부 라틴어-올 목록의 경우 : 번호 매기기 A., B., C., D. 등
- 디스크 - ul 목록의 경우: 글머리 기호로 채워진 원
- 원 - ul 목록의 경우: 빈 원이 글머리 기호로 사용됩니다.
- 정사각형 - UL 목록의 경우: 직사각형을 글머리 기호로 사용합니다.
- 없음 - 글머리 기호 문자나 번호 매기기 없음
- 그리스 소문자 - ol 목록의 경우: 그리스 문자로 번호 매기기
- 히브리어 - ol 목록의 경우: 히브리 문자로 번호 매기기
- 소수점 선행 0 - ol 목록의 경우: 선행 0 0: 01., 02., 03., 04. 등 번호 매기기.
- cjk- 표의 문자 - ol 목록의 경우: 표의 문자로 번호 매기기
- 히라가나 - 올 리스트의 경우: 일본어 번호 매기기(소문자 포함)
- 가타카나 - 올 리스트의 경우: 일본어 번호 매기기(대문자 포함)
- 히라가나-이로하 - 올 리스트의 경우: 일본어 번호(소문자 포함)
- 가타카나-이로하 - 올 리스트의 경우: 일본어 번호(대문자 포함)
다음 예제에서는 나열된 변형 중 일부를 사용합니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> ul.a { list-style-type:circle; } ul.b { list-style-type:square; } ol.c { list-style-type:upper-roman; } ol.d { list-style-type:lower-alpha; } </style> </head> <body> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript </ul> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript
</ul> <ol class="c"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <olol class="d"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html>브라우저에 다음 이미지가 표시됩니다:
카운터
콘텐츠는 ol 목록을 사용하여 번호를 매길 수 있습니다. 그러나 이러한 형태의 번호 매기기는 복잡한 애플리케이션에는 실용적이지 않습니다. CSS는 카운터를 사용하여 이에 대한 대안을 제공합니다.
아래에서 카운터를 사용하는 방법을 보여드리겠습니다.
먼저 본문 요소에 새 카운터를 생성합니다.
body { counter-reset: chapter; }이 정의 덕분에 카운터 챕터가 문서에 존재합니다. 이제 이 카운터를 사용할 수 있습니다.
h1 { 카운터 증가: 챕터; }
표시된 구문을 사용하면 새 h1 요소가 나타날 때마다 카운터가 자동으로 값 1만큼 증가합니다. 이 구문의 문제점은 카운터가 아직 보이지 않는다는 것입니다. 이 문제는 의사 요소를 사용하여 쉽게 변경할 수 있습니다.
h1::before { content: counter(chapter) ". "; }
완전한 애플리케이션은 다음과 같이 보일 수 있습니다:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset: chapter; } h1 { counter-increment: chapter; } h1::before { content: counter(chapter) ". "; } </style> </head> <body> <h1>Chapter</h1> <h1>Chapter</h1> </body> </html>다음은 브라우저에 표시되는 결과입니다:
표시된 예제에서 ::before는 h1 요소의 시작 부분에 해당 번호를 표시합니다. 번호가 제목 텍스트에 직접 연결되지 않도록 번호 뒤에 마침표와 공백이 삽입됩니다.
content: 카운터(장) ". "
중첩된 카운트도 가능합니다. 이렇게 하려면 궁극적으로 처음부터 다시 시작해야 하는 지점에서 카운터를 정의합니다.
h1 { 카운터-증분: 챕터; 카운터-리셋: 서브챕터; }이 예제에서는 새 h1 요소가 나타나면 카운터가 항상 재설정됩니다. 다음 예제는 중첩 카운터의 일반적인 애플리케이션을 보여줍니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset:chapter; } h1 { counter-reset:subchapter; } h1:before { counter-increment:chapter; content: counter(chapter) ". "; } h2:before { counter-increment:subchapter; content:counter(chapter) "." 카운터(서브챕터) " "; } </style> </head> <body> <h1>챕터</h1> <h2>서브챕터</h2> <h2>서브챕터</h2> <h2> <h2> <h2>Subchapter</h2> <h1>Chapter</h1> <h2>Subchapter</h2> <h2>Subchapter</h2> <h2>Subchapter</h2> </body> </html>브라우저에서는 다음과 같이 표시됩니다:
이 예제는 카운터가 얼마나 강력한지 보여주었습니다.
