리스트 스타일링 (List Styling)

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. HTML 리스트 태그

• 비 순차 목록: Unordered List
  • 순서가 중요하지 않은 목록을 표현할 때, <ul> <li> HTML 태그를 사용한다.

  <ul>
  	<li>HTML</li>
  	<li>CSS</li>
  	<li>JavaScript</li>
  	<li>TypeScript</li>
  	<li>React</li>
  </ul>

• 순차 목록: Ordered List
  • 실시간 검색 순위와 같은 순서가 있는 목록을 표현할 때, <ol>, <li> HTML 태그를 사용한다.

  <ol>
  	<li>아이유</li>
  	<li>아이유 신곡</li>
  	<li>드라마 ost 아이유</li>
  </ol>
  

• 설명 목록: Definition List
  • 설명 목록을 표현할 때, <dl>, <dt>, <dd> HTML 태그를 사용한다.

  <dl>
  	<dt>지도</dt>
  	<dd>검색</dd>
  	<dd>길찾기</dd>
  	<dd>로드뷰</dd>
  	
  	<dt>미디어</dt>
  	<dd>뉴스</dd>
  	<dd>스포츠</dd>
  	<dd>연예</dd>
  </dl>

2. HTML 목록과 관련된 속성

• list-style-type : 목록 앞 마커의 스타일을 변경할 때 사용하는 속성
• list-style-position : 목록 앞 마커의 위치를 정할 때 사용하는 속성
• list-style-image : 목록 앞 마커를 이미지로 변경할 때 사용하는 속성
• list-style : 속기형 타입 방식

ul {
	list-style: inside url(".../images/kyoo.svg");
}

3. 리스트 디자인 사용 예제

• <dl> 리스트 사용 예제

dl {
  margin-top: 0;
  margin-bottom: 0;
	/* margin-left: 1em; 목록 전체를 들여쓰기 할 때 */

}

dt {
  font-weight: bold; /* 제목 구분을 위한 bold */
  font-size: 19px;
  color: skyblue;
}

dd {
  margin-left: 0;
  margin-bottom: 10px;
  line-height: 1.8;
}

• <ol> 리스트 사용 예제

dl {
  margin-top: 0;
  margin-bottom: 0;
	/* margin-left: 1em; 목록 전체를 들여쓰기 할 때 */

}

dt {
  font-weight: bold; /* 제목 구분을 위한 bold */
  font-size: 19px;
  color: skyblue;
}

dd {
  margin-left: 0;
  margin-bottom: 10px;
  line-height: 1.8;
}

• 가상 요소를 사용하여 리스트 마커를 이모지 표시하기

ul {
  padding-left: 0;
  list-style: none;
}

li {
  line-height: 1.8;
  margin-bottom: 10px;
}

li::before {
  content: '👍';
  margin-left: 1em;
}