리스트 스타일링

리스트 스타일링, 리스트 스타일, 리스트 초기화,

CSS 리스트(Lists) 스타일링

HTML 목록과 관련된 속성

• HTML 목록 요소 <ul>, <ol>, <li>, <dl>, <dt>, <dd>

비순차 목록

<ul>, <ol>, <li>

<list-style-type> : 리스트 타입 선택

• disc(채워진 원형, ul요소의 기본값) / circle(속이 빈 원형) / square(채워진 사각형)

• upper-alpha (A,B,C)

• lower-alpha (a,b,c)

• decimal (1,2,3) 순자 목록으로 사용 가능

• decimal-leading-zero (01,02,03)

• 외국어 등 여러가지 선택가능

<list-stye-position> : 리스트 위치(내부, 외부)를 선택

• outside (기본값)

• insid (들여쓰기, 마치 본문처럼 보일 수 있다.)

• 리스트 여백은 <ul>요소의 padding 속성으로 조절할 수 있다.

<list-style-image> : 기본 리스트 타입대신 이미지를 사용

• 이미지 주소 url을 입력

• url("../image/star.svg")

<list-style> : 속기 유형 작성법(단축형) 실무에서 많이 사용

• square url("star.svg") inside

• ui, ol 요소에 설정해 주는 것을 권장, 해당 속성을 자식에게 상속되기 때문이다.

예시

/*[초기화]*/

list-style-type: none; (목록 스타일 지우기)
padding-left: 0; (들여쓰기 X)

ul {
  list-style: none inside url("../images/stat.  svg");
}
/* 또는 */
ul {
  list-style: none url("../images/stat.  svg");
}
/* 또는 */
ul {
  list-style: url("../images/stat.svg");
}

/*margin과 padding*/

li {
  line-height: 2; 줄 간격
  margin: 10px 0; (배경색이 들어가지 않는다.)
  /* 또는 padding: 10px 0; (배경색이 들어간다.)*/
}

정의 목록

<dl>, <dt>, <dd>

/*[초기화]*/

dl {
  margin-top: 0;
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

HTML 속성을 사용한 순차 목록 출력 설정

<start>, <reversed>``<value> 속성

/*입력한 값부터 순서 시작 (9,10,11,12)*/
<ol start="9">

/*리버스 출력 설정, 반대로 출력 (9,8,7,6)*/
<ol start="9" reversed>
/

/*<li>요소에 임의의 숫자값을 입력할 수도 있다.*/
<li value="20">
<li value="30">
<li value="40">

참고

• 리스트 스타일링

• 리스트 스타일 유형