CSS 목록 스타일

목록은 HTML로 데이터를 표시하는 중요한 방법입니다. 신발 사이즈나 탐색 도구와 같이 공통된 주제를 가진 항목이 여러 개 있는 경우 데이터를 표시하는 가장 효과적인 방법은 목록을 사용하는 것일 수 있습니다.

기본적으로 HTML의 목록은 매우 단순합니다. 여기에서 CSS 목록 스타일 속성이 필요합니다. 목록 스타일 속성과 하위 속성은 고유한 웹사이트 디자인을 보완하기 위해 목록을 사용자 정의하는 데 사용됩니다.

이 튜토리얼은 예제와 함께 list-style 속성과 그 하위 속성을 사용하여 CSS에서 목록의 스타일을 지정하는 방법을 다룰 것입니다. 또한 목록 및 해당 항목의 배경색을 설정하는 방법도 다룹니다. 이 튜토리얼을 읽고 나면 CSS를 사용하여 목록을 스타일링하는 전문가가 될 것입니다.

HTML 및 CSS 목록

목록은 연결된 항목의 수를 표시하는 데 사용됩니다. HTML에는 데이터를 표시하는 데 사용할 수 있는 세 가지 유형의 목록이 있습니다. 이것들은:

• 순서 없는 목록 (
  ) – 글머리 기호를 사용하여 값이 표시된 항목 목록입니다.
  • 순서가 있는 목록 (
    ) – 순서 지정 시스템을 사용하여 값이 표시된 항목 목록(예:일련 번호 또는 문자).
    1. 정의 목록 (

       ) – 설명이 수반되는 항목 목록입니다.

  HTML 목록에 대해 자세히 알아보려면 HTML 목록에 대한 기사를 읽어보세요.
  

  위의 각 목록 유형에는 고유한 기본 HTML 스타일이 있습니다. 또한 CSS는 목록을 미적으로 보기 좋게 만들고 스타일 가이드에 더 잘 맞추는 데 사용할 수 있는 여러 속성을 제공합니다.
  

  CSS 목록 속성을 사용하면 다음을 수행할 수 있습니다.
  

  • 순서가 있는 목록의 항목 마커를 변경합니다.
  • 순서가 없는 목록의 항목 마커를 변경합니다.
  • 이미지를 목록 항목 마커로 설정합니다.
  • 목록과 항목에 배경색을 추가합니다.

  이 튜토리얼에서는 CSS에서 목록 스타일을 지정하는 두 가지 중요한 방법, 즉 개별 하위 속성을 통한 목록 스타일 속성과 목록 스타일 속기 속성에 대해 설명합니다. 목록 스타일 속성의 하위 속성은 다음과 같습니다.
  

  참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

  부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

  • 목록 스타일 유형
  • 목록 스타일 위치
  • 목록 스타일 이미지

  목록 스타일의 약식 속성은 다음과 같이 작성됩니다.
  

  목록 스타일:[목록 스타일 유형] [목록 스타일 위치] [목록 스타일 이미지]; 

  또한 목록 및 목록 항목에 배경색을 추가하는 방법도 논의합니다.

  기본 HTML 목록 예

  먼저 HTML로 된 목록의 예를 살펴보겠습니다. 지역 빵집에서 고객이 가정에서 사용할 수 있는 요리법 목록이 포함된 웹 페이지를 만들어달라고 요청한다고 가정해 보겠습니다.
  

  다음은 목록을 정의하는 데 사용할 기본 HTML 코드입니다.

   
  버터플라이 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  

  목록은 다음과 같이 나타납니다.
  

  

  목록에는 5개의 항목이 있습니다. <li> 내에 각 목록 항목을 묶습니다. 태그. ("li"는 "목록 항목"을 나타냅니다.) 이러한 <li>를 묶습니다. <ul> 내의 태그 꼬리표. <ul> 태그는 순서가 지정되지 않은 목록을 식별합니다.
  

  이것은 순서가 지정되지 않은 목록이므로 웹 브라우저는 목록의 각 항목 앞에 글머리 기호를 표시합니다. (순서가 있는 목록인 경우 웹 브라우저는 목록의 각 항목 앞에 주문 가능한 값(일반적으로 숫자 또는 문자)을 배치합니다.)
  

  이제 list-style 속성을 사용하여 목록의 스타일을 지정하는 방법을 살펴보겠습니다.

  목록 항목 마커

  list-style-type 속성은 목록의 항목에 사용되는 마커 유형을 지정하는 데 사용됩니다.

  순서 없는 목록 항목 마커

  빵집에서 각 목록 항목 앞에 원형 글머리 기호 대 사각형 글머리 기호가 있는 목록의 모양을 보여달라고 요청한다고 가정해 보겠습니다. 다음 코드를 사용하여 빵집을 위한 이러한 디자인을 만들 수 있습니다.

  styles.cssli.circlebulletPoint { list-style-type:circle;}li.squarebulletPoint { list-style-type:square;}index.html
   
  나비 케이크
   
  초콜릿 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   보시다시피 첫 번째 목록 항목은 원 글머리 기호 스타일을 사용합니다. 우리는 첫 번째 목록 항목에 "circlebulletPoint"라는 클래스 값(따라서 해당 값의 해당 스타일)을 할당하여 이 작업을 수행했습니다. 두 번째 목록 항목에 클래스 값 "squarebulletPoint"를 할당하여 웹 브라우저가 해당 항목 앞에 정사각형 글머리 기호를 표시합니다. 
   
   
  
   목록에 적용할 수 있는 다른 목록 스타일 유형은 다음과 같습니다. 
   
   
   
  디스크
   
  원
   
  소수점
   
  소수 선행 0
   
  로마어
   
  상위 로마자
   
  저 그리스어
   
  저 라틴어
   
  상부 라틴계
   
  아르메니아
   
  그루지야어
   
  하위 알파
   
  없음
   
   
  
   다음 섹션에서 정렬된 목록에 적용되는 몇 가지에 대해 논의합니다.
   
  주문 목록 항목 마커
   
  
   순서가 지정된 목록에는 고유한 항목 마커 스타일이 있습니다. 
   
   
  
   베이커리의 레시피가 주문된 목록에 표시되기를 원한다고 가정합니다. 우리는 목록의 각 항목 앞에 소문자 알파벳 문자로 표시된 순서로 목록이 어떻게 보이는지, 목록의 각 항목 앞에 대문자 로마 숫자가 있으면 어떻게 보이는지 보고 싶습니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
   
  styles.cssli.alpha { list-style-type:lower-alpha;}li.roman { list-style-type:upper-roman;}index.html
   
  나비 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
   
  
   코드는 다음을 반환합니다. 
   
    
  
   이 예에서는 순서가 지정되지 않은 목록 대신 순서가 지정된 목록(
  )을 사용했습니다. 이를 통해 목록을 숫자(또는 문자 등)로 정렬할 수 있습니다. 그런 다음 목록의 첫 번째 항목을 알파벳 소문자로 표시하고 두 번째 항목을 로마 숫자 대문자로 표시했습니다.
   
  기본 목록 항목 마커 스타일 제거
   
  
   목록에서 기본 스타일의 측면을 제거하기 위해 코드에서 사용할 수 있는 세 가지 CSS 속성(목록 스타일 유형, 여백 및 패딩)이 있습니다.
   
  목록 스타일 유형을 없음으로 설정
   
  
   목록 항목 앞에 어떤 종류의 글머리 기호나 서수 표시기(예:숫자 또는 문자)를 원하지 않으면 list-style-type 속성을 없음으로 설정할 수 있습니다. 다음은 이 속성을 사용하여 목록에서 글머리 기호나 서수 표시기를 제거하는 예입니다.
   
  styles.cssul { list-style-type:none;}index.html
   
  나비 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   우리 목록은 여전히 ​​목록으로 구성되어 있지만 웹 페이지에 표시될 때 목록의 항목에는 마커가 없습니다.
   
  마커 위치
   
  
   list-style-position 속성은 목록에서 목록 항목 마커의 위치를 ​​지정하는 데 사용됩니다. 
   
   
  
   목록에 대한 항목 마커가 나타날 수 있는 위치는 내부와 외부의 두 가지입니다. 목록 마커가 목록 안에 나타나면 텍스트는 항목 마커 바로 옆에 나타납니다. 목록 표시가 목록 외부에 나타나면 목록 표시와 목록의 텍스트 항목 사이에 간격이 생깁니다. 
   
   
  
   다음은 이러한 두 가지 상태 모두에서 list-style-position을 적용할 수 있는 방법을 보여주는 두 가지 예제 CSS 규칙입니다.
   
  ul.a { 목록 스타일 위치:외부;}ul.b { 목록 스타일 위치:내부;}
   
  
   첫 번째 목록에서는 list-style-position:외부 스타일을 사용했습니다. 이것은 목록에 적용되는 기본 스타일입니다. 따라서 코드 블록에서 이 위치 또는 다른 목록 스타일 위치를 지정하지 않았다면 브라우저는 목록 항목 마커에 대해 기본적으로 이 위치를 지정했을 것입니다. 다음은 이 스타일을 사용하는 빵집 목록의 코드입니다.
   
   
  버터플라이 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   이 스타일에서 목록 항목 마커(이 경우 글머리 기호)는 목록 항목 외부에 나타납니다. 
   
   
  
   두 번째 목록에서 목록 항목 마커의 위치를 ​​"내부"로 지정했습니다. 다음은 이 스타일을 사용하는 빵집 목록의 코드입니다.
   
   
  버터플라이 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   구분하기 어렵지만 목록 항목 마커의 위치가 이제 목록 항목 외부에 있습니다.
   
  이미지 마커
   
  
   목록은 종종 이미지와 함께 사용자 정의 마커를 사용합니다. 목록 항목의 마커를 이미지로 설정하려면 list-style-image CSS 속성을 사용할 수 있습니다. 
   
   
  
   빵집에서 목록의 목록 항목 마커를 케이크 이미지(글머리 기호, 번호 등 대신)로 변경하도록 요청한다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
   
  styles.cssul { list-style-image:url("https://img.icons8.com/small/16/000000/cake.png");}index.html
   
  나비 케이크 
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   보시다시피 기본 목록 항목 마커를 사용하는 대신 자체 마커를 사용했습니다. 이 경우 목록 항목 마커는 케이크 이미지입니다.
   
  목록 스타일 단축 속성
   
  
   우리는 목록 스타일 속성의 하위 속성에 대해 논의했습니다. 이를 통해 개별 스타일을 목록에 적용할 수 있습니다. 
   
   
  
   그러나 목록의 스타일을 지정하는 보다 효율적인 방법이 있습니다. 목록의 스타일을 지정하기 위해 개별 하위 속성을 사용하는 대신 목록 스타일의 약식 속성을 사용할 수 있습니다. 다음은 목록 스타일의 약식 속성에 대한 구문입니다.
   
  ul { 목록 스타일:[목록 스타일 유형] [목록 스타일 위치] [목록 스타일 이미지];
   
  
   위에 지정된 값의 순서는 목록 스타일의 약식 속성과 함께 사용해야 하는 순서입니다. 약식 구문을 구성하는 세 가지 하위 속성 중 하나에 값을 지정하지 않으면 웹 브라우저는 해당 하위 속성의 기본값을 사용합니다. 
   
   
  
   케이크 이미지로 구운 식품 레시피 목록의 스타일을 지정하고 각 목록 항목 마커를 목록 외부로 이동하려고 한다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.
   
  styles.cssul { list-style:outside url('https://img.icons8.com/small/16/000000/cake.png');}index.html
   
  나비 케이크
   
  초콜릿 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
  
   
  
   코드는 다음을 반환합니다. 
   
    
  
   이제 목록은 각 목록 항목 마커에 대해 케이크 이미지를 사용합니다. 또한 각 목록 항목 마커는 목록 외부에 스타일이 지정됩니다. 
   
  CSS 목록 색상
   
  
   목록을 디자인할 때 목록에 배경색을 표시할 것인지 결정할 수 있습니다. 
   
   
  
   빵집에서 전체 목록의 배경색을 연한 파란색으로 설정하고 목록의 각 항목에 분홍색 배경색을 사용하도록 요청한다고 가정합니다. 다음과 같이 CSS 배경 속성을 사용하여 이 작업을 수행할 수 있습니다.
   
  ul { 배경:하늘색; 패딩:10px;}ul li { 배경:분홍색; 여백:10px;}
   
  
   코드 반환:
   
   
  버터플라이 케이크
   
  초코 트레이베이크
   
  레몬 파운드 케이크
   
  피넛 버터 플랩잭
   
  초콜릿 머핀
   
  
   우리 코드에서는 background 속성을 사용하여 밝은 파란색 배경색을 <ul>에 적용했습니다. 정렬되지 않은 목록을 만드는 요소입니다. 우리는 또한 <ul> padding 속성을 사용하여 요소에 10px 패딩을 추가합니다. 
   
    
  
   또한 각 목록 항목에 분홍색 배경을 적용하고 10px 여백을 만들었습니다. 
   
   
  
   위에서 볼 수 있듯이 "ul li" 선택기에 스타일을 포함하여 이를 수행했습니다. 이 선택기는 분홍색 배경과 10px 여백이 모든 <li>에 적용되어야 함을 나타냅니다. <ul>로 묶인 태그 태그.
   
  결론
   
  
   HTML 목록으로 작업할 때 CSS를 사용하여 해당 목록에 사용자 정의 스타일을 적용하여 미학적으로 보기 좋게 만들 수 있습니다. list-style 속성은 CSS의 목록에 스타일을 적용하거나 목록에서 스타일을 제거하는 데 사용됩니다. 
   
   
  
   이 자습서에서는 CSS 목록 스타일 속성과 세 가지 하위 속성을 사용하는 방법을 예제와 함께 설명했습니다. 또한 목록과 그 안의 항목에 대한 배경색을 설정하는 방법에 대해서도 논의했습니다. 
   
   
  
   이제 전문가처럼 CSS에서 목록 스타일 지정을 시작하는 데 필요한 지식을 얻었습니다!