본문 바로가기
HTML/CSS문법

CSS lists

by flycoding 2023. 8. 13.
반응형

HTML list와 CSS list

HTML에서는 두 가지 주요 목록 유형이 있다:

  • 정렬되지 않은 목록(<ul>) - 목록 항목에 글머리 기호가 표시된다
  • 순서 목록(<ol>) - 목록 항목이 숫자 또는 문자로 표시된다

CSS list 속성을 통해 다음 작업을 수행할 수 있다:

  • 정렬된 목록에 대해 다른 목록 항목 마커 설정 항목 마커 설정
  • 순서가 지정되지 않은 목록에 대해 서로 다른 목록 항목 마커 설정
  • 이미지를 목록 항목 마커로 설정
  • 목록 및 목록 항목에 배경색 추가

 

CSS list-style-type : marekr

list-style-type 속성은 목록 항목 marker의 유형을 지정한다.

다음 예제에서는 사용 가능한 목록 항목 마커 중 일부를 보여 준다:

<!DOCTYPE html>
<html>
<head>
<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>

<h2>list-style-type 속성</h2>

<p>비순서 리스트 예제:</p>
<ul class="a">
  <li>커피</li>
  <li>차</li>
  <li>코카 콜라</li>
</ul>

<ul class="b">
  <li>커피</li>
  <li>차</li>
  <li>코카 콜라</li>
</ul>

<p>순서 리스트 예제:</p>
<ol class="c">
  <li>커피</li>
  <li>차</li>
  <li>코카 콜라</li>
</ol>

<ol class="d">
  <li>커피</li>
  <li>차</li>
  <li>코카 콜라</li>
</ol>

</body>
</html>

ul.a 요소에 list-style-type 에 circle, ul.b 요소에 list-style-type 에 square, ul.c 요소에 list-style-type 에 upper-roman, ul.d 요소에 list-style-type 에 lower-alpha를 설정하였고, 해당  스타일을 설정한 결과 화면은 다음 그림과 같다.

CSS list-style-type 활요 예제

 

참고: 일부 값은 순서가 지정되지 않은 목록에 대한 값이고 일부 값은 순서가 지정된 목록에 대한 값이다.

 

list-style-image 속성 (리스트 항목 마커로서의 이미지)

list-style-image 속성은 이미지를 목록 항목 마커로 지정한다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>list-style-image 속성</h2>

<p>list-style-image 속성은 이미지를 목록 항목 마커로 지정합니다:</p>

<ul>
  <li>커피</li>
  <li>차</li>
  <li>코카 콜라</li>
</ul>

</body>
</html>

ul요소에 list-style-image에 'sqpurple.gif'이미지를 설정하였고, 실행결과 화면은 다음 그림과 같다.

CSS list-style-image 속성 활용 예제

 

CSS list-style-position 속성

list-style-position 속성은 목록 항목 마커(총알점)의 위치를 지정한다.

"list-style-position: outside;"는 글머리 기호 점이 목록 항목 밖에 있음을 의미한다. 목록 항목의 각 줄의 시작 부분이 수직으로 정렬된다. 기본값은 다음과 같다:

CSS list-style-position outside 설정

 

"list-style-position: inside;"는 글머리 기호 점이 목록 항목 안에 있음을 의미한다. 목록 항목의 일부이므로 텍스트의 일부가 되고 시작 부분에서 텍스트를 누른다:

CSS list-style-position inside 설정

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>list-style-position 속성</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>커피 - 커피나무 열매의 씨앗인 볶은 원두로 제조된 양조 음료</li>
  <li>차 - 아시아 원산의 상록관목(관목)인 카멜리아 시넨시스의 경화된 잎에 뜨거운 물 또는 끓는 물을 부어 제조하는 향기로운 음료</li>
  <li>코카콜라 - 코카콜라 회사에서 생산한 탄산 음료입니다. 그 음료의 이름은 콜라 견과류 (카페인의 원천)와 코카 잎이었던 그것의 원래 재료들 중 두 가지를 가리킵니다</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>커피 - 커피나무 열매의 씨앗인 볶은 원두로 제조된 양조 음료</li>
  <li>차 - 아시아 원산의 상록관목(관목)인 카멜리아 시넨시스의 경화된 잎에 뜨거운 물 또는 끓는 물을 부어 제조하는 향기로운 음료</li>
  <li>코카콜라 - 코카콜라 회사에서 생산한 탄산 음료입니다. 그 음료의 이름은 콜라 견과류 (카페인의 원천)와 코카 잎이었던 그것의 원래 재료들 중 두 가지를 가리킵니다</li>
</ul>

</body>
</html>

ul.a 요소에는 list-style-position을 outside, ul.b 요소에는 list-style-position을 inside값을 설정하였고, 각 요소에 표시되는 그림은 다음 그림과 같다.

CSS list-style-position inside outside 활용 예제

 

CSS list-style-type : none 

list-style-type:none 속성을 사용하여 마커/불렛을 제거할 수도 있다. 리스트에는 기본 여백과 패딩도 있다. 이를 제거하려면 여백:0과 패딩:0을 <ul> 또는 <ol>에 추가한다:

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>기본 리스트:</p>
<ul>
  <li>커피</li>
  <li>차</li>
  <li>코카콜라</li>
</ul>

<p>리스트에서 글머리 기호, 여백 및 패딩 제거:</p>
<ul class="demo">
  <li>커피</li>
  <li>차</li>
  <li>코카콜라</li>
</ul>

</body>
</html>

list-style-type:none을 통해 글머리기호, 여백, 패딩 등을 제거한 결과 화면은 아래 그림과 같다.

CSS list-style-type : none 화면 예시

 

CSS list-style 속성

list-style 속성은 속기 속성입니다. 하나의 선언에 모든 목록 속성을 설정하는 데 사용된다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h2>list-style 속성</h2>

<p>list-style 속성은 하나의 선언에 모든 list 속성을 설정하는 데 사용되는 속기 속성입니다.</p>

<ul>
  <li>커피</li>
  <li>차</li>
  <li>코카콜라</li>
</ul>

</body>
</html>

list-style 속성에 square inside url("squpurple.gif") 설정하여 사각형 모양의 sqpurple.gif 이미지가 inside에 표시된 결과 화면은 아래 그림과 같다.

CSS list-style 속성 설정 결과 화면

 

list-style 속성을 사용하는 경우 속성 값의 순서는 다음과 같다:

  • list-style-type(list-style-image가 지정된 경우 어떤 이유로 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됨)
  • list-style-position(목록 항목 마커를 내용 흐름 내부 또는 외부에 표시할지 여부를 지정)
  • list-style-image(이미지를 목록 항목 마커로 표시)

위의 속성 값 중 하나가 누락된 경우 누락된 속성의 기본값이 삽입된다.

 

색상을 활용한 리스트 스타일

우리는 또한 좀 더 흥미롭게 보이게 하기 위해 색깔이 있는 목록을 만들 수 있다.

<ol> 또는 <ul> 태그에 추가된 모든 항목은 전체 목록에 영향을 미치며, <li> 태그에 추가된 속성은 개별 목록 항목에 영향을 미친다:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}
</style>
</head>
<body>

<h1>색상을 활용한 리스트 스타일링</h1>

<ol>
  <li>커피</li>
  <li>차</li>
  <li>코카콜라</li>
</ol>

<ul>
  <li>커피</li>
  <li>차</li>
  <li>코카콜라</li>
</ul>

</body>
</html>

ol 스타일링은 배경색은 0xff9999, 패딩은 20px, ol li 스타일의 배경색은 0xffe5e5, 글자색은 darkred, 패딩은 5px, 왼쪽패딩은 35px로 설정하였다.

ul 스타일링은 배경색은 0x3399ff, 패딩은 20px, ul li 스타일의 배경색은 0xcce5ff, 글자색은 darkblue, 패딩은 5px 로  설정하였으며 결과 화면은 아래 그림과 같다.

CSS 색상활용한 리스트 스타일링 결과 화면

 

모든 CSS list 속성

속성 설명
list-style 하나의 선언에서 목록에 대한 모든 속성을 설정합니다
list-style-image 이미지를 목록 항목 마커로 지정합니다
list-style-position 목록 항목 마커(총알점)의 위치를 지정합니다
list-style-type 목록 항목 마커의 유형을 지정합니다

 

지금까지 CSS에서 리스트 관련 속성의 개념과 활용 그리고 응용 예제를 살피며 실력 향상을 하였다.

반드시 꼭 실습을 하며 손으로, 눈으로, 머리로 익히며 실습하기를 추천합니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS table size  (0) 2023.08.15
CSS Table  (0) 2023.08.14
CSS link  (0) 2023.08.12
CSS font 속성  (0) 2023.08.11
CSS Icons  (0) 2023.08.10

관련글

댓글

티스토리툴바