HTML ul 태그의 디자인 효과 및 li 아이콘 모양 변경 방법

HTML <ul> 태그는 순서가 없는 목차를 지정하며, 하위에 <li> 태그에 실제 내용이 기입됩니다. list-stlye-type의 속성값에는 disc(검은 원), circle(흰 원), square(사각형)이 있고, none 속성값은 목차 아이콘을 삭제합니다.

HTML <ul> 태그 기본 구조

HTML <ul> 태그는 순서가 없는 목차를 정의합니다. <ul> 태그는 <li> 태그와 함께 세트로 작동합니다.

<h1>아즈텍 제국</h1>
  <ul>
    <li>위치 : 현재의 멕시코</li>
    <li>기간 : 1248~1521</li>
    <li>언어 : 아즈텍어(니와틀어)</li>
  </ul>

<ul> 태그 아이콘 변경

검은 원(기본 셋팅)

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

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

흰 원

<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>

사각형

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

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

아이콘 삭제

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

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

<ul> 태그 중첩

<ul> 태그는 중첩해서 사용할 수 있습니다. 중칩시 초기 설정은 내부 태그는 흰 원 아이콘으로 변경됩니다.

개인 셋팅을 원할 경우 위에서 언급한 list-style-type을 원하는 <ul>태그 뒤에 삽입해서 개별설정 할 수 있습니다.

<h1>아즈텍 계급의 구성</h1>
  <ul>
    <li>귀족 : 피필틴</li>
    <li>평민 : 마세우알틴
      <ul>
        <li>테쿠틀리 : 평민 지도 법적 책임</li>
        <li>테칼레게 : 일반 세금 납부</li>
        <li>칼풀레게 : 종교세 납부</li>
      </ul>
    </li>
    <li>노예 : 탈르코틴/마예케</li>
  </ul>

<ul> 태그 가로 배열

<ul> 태그의 가로 배열은 여러 가지 방법이 있습니다. <li> 태그에 CSS 선택자를 씌운 후, float:left와 display:block 속성을 통해서 가로 배열이 가능합니다.

float:left 속성은 <li> 태그의 배열을 가로로 변경하는 역할을 합니다. display:block 속성은 <li> 태그의 데이터를 개별의 독립된 블록으로 지정합니다.

li {
  display: block;
  float: left;
}

<ul> 태그 디자인

<ul> 글자색 변경

<ul> 태그 글씨색 변경은 style 속성에 color 속성값을 추가해서 변경합니다.

<h1>잉카 제국</h1>
  <ul style="color:green;">
    <li>위치 : 서남 아메리카</li>
    <li>언어 : 케추아어</li>
    <li>시대 : 1438~1533</li>
  </ul>

<ul> 글자 크기 변경

<ul> 태그의 글자 크기 변경은 style 속성에 font-size 속성값의 추가로 작성됩니다.

<h1>잉카 제국의 구성</h1>
  <ul style="font-size:25px;">
    <li>4방위 나라(타완틴수유)</li>
    <li>쿤티수유</li>
    <li>친차수유</li>
    <li>안티수유</li>
    <li>코야수유</li>
  </ul>

<ul> 배경색 변경

<ul> 태그 배경색 변경은 style 속성에 background-color 속성값을 추가하여 작성합니다.

<h1>잉카 제국 노동 세금</h1>
<ul style="background-color:#917DE6;">
<li>미타 : 108일/1년 노동력 제공</li>
<li>미타의 분할 : 가족 구성원의 분할 가능</li>
<li>잉카 제국의 대가족 단위의 원인</li>
</ul>

<ul> 글씨체 변경

<ul> 태그의 글씨체 변경은 style 속성에 font-family 속성값을 사용하여 작성합니다.

<h1>잉카의 납세 제도</h1>
  <ul style="font-family:굴림체;">
    <li>돈/물건 납입 세금이 없음</li>
    <li>노동력 제공 108일/1년</li>
    <li>전쟁 징병</li>
    <li>가난한 사람 : 벼룩/이 잡기</li>
  </ul>

<ul> 테두리 변경

<ul> 태그의 테두리 변경은 style 속성에 border 속성값의 삽입으로 작성합니다.

<h1>잉카 제국 복지 제도</h1>
  <ul style="border:1px dashed red;">
    <li>가뭄 식량 지원</li>
    <li>고령자, 과부, 고아 지원</li>
    <li>의료 혜택</li>
    <li>토지 배분(빈부 격차가 적음)</li>
  </ul>

px은 테두리 두께, dashed는 테두리 종류, red는 테두리 색을 정의합니다.