HTML ul 태그의 list-style-type 속성으로 보는 디자인 변경


list-style-type 속성값

list-style-type 속성은 <ul> 태그에 소속된 <li> 태그 앞의 문자 기호를 바꾸는 속성값입니다. <li> 태그의 목차 삭제, 검은 원, 흰 원, 사각형의 셋팅 변경법을 살펴보겠습니다.

list-style-type:disc 검은 원(기본 셋팅)

<ul> 태그의 기본 검은 원 모양 무늬는 style 속성에 list-style-type 속성값을 삽입해서 작성합니다. disc는 목차의 아이콘을 지정합니다.

<h1>아즈텍 제국의 구성</h1>
  <ul style="list-style-type:disc;">
    <li>에슈크 트라톨라안(삼각 군사 동맹)</li>
    <li>테노치티틀란</li>
    <li>텍스코코</li>
    <li>틀라코판</li>
  </ul>

list-style-type:circle 흰 원

<ul> 태그의 흰 원 아이콘 삽입은 style 속성에 list-style-type 속성값을 삽입해서 작성합니다. circle 은 아이콘의 흰 원 모양을 정의합니다.

<h1>아즈텍 제국 인구</h1>
  <ul style="list-style-type:circle;">
    <li>전체 인구 : 500~600만</li>
    <li>테노치틀란 : 15~30만</li>
    <li>런던/파리 : 5~10만</li>
  </ul>


list-style-type:square 사각형

<ul> 태그 사각형 무늬는 style 속성에 list-style-type 속성값 삽입으로 작성합니다. sqaure는 사각형 아이콘을 정의합니다.

<h1>아즈텍 문명의 전통</h1>
  <ul style="list-style-type:square;">
    <li>무상 의무교육 : 남여 공통(노예 제외)</li>
    <li>천문학/건축학/문자</li>
    <li>인신공양</li>
  </ul>

list-style-type:none <li> 목차 아이콘 삭제

<ul> 태그 목차 아이콘 삭제는 style 속성에 list-style-type 속성값을 삽입해서 작성합니다. none은 목차 삭제를 정의합니다.

<h1>아즈텍 신분 제도</h1>
  <ul style="list-style-type:none;">
    <li>귀족 : 피필틴(면세)</li>
    <li>평민 : 마세우알틴(납세의무)</li>
    <li>노예 : 탈르코틴/마예케(정복 도시 포로/채무불이행)</li>
  </ul>

하기 쉬운 실수

<ul style = "list-style-type:none;"> <!--정상-->
<ul style = "style-list-type:none;"> <!--오류-->
<ul style-list-type:none> <!--오류-->
<ul style-type-list:none> <!--오류-->