HTML ol 태그 디자인 및 li 태그 숫자 모양, 순서 변경


HTML <ol> 태그는 목차 앞에 번호가 붙습니다. 실제 데이터는 하위에 속한 <li> 태그에 정보가 기입됩니다. 속성을 사용하면 번호 종류와 순서를 변경할 수 있습니다.

HTML <ol> 태그

HTML <ol> 태그는 순서가 있는 목차를 정의합니다. <ol> 태그와 <li> 태그를 세트로 하여 사용합니다.


<ul> 태그와 달리 리스트 앞에 자동으로 번호가 붙습니다.

<h1>알칼리 금속</h1>
  <ol>
    <li>리튬 Li</li>
    <li>나트륨 Na</li>
    <li>칼륨 K</li>
    <li>루비듐 Rb</li>
    <li>세슘 Cs</li>
    <li>프랑슘 Fr</li>
  </ol>

<ol> 문자의 조절

번호로 시작

<ol> 태그의 기본 셋팅은 번호 삽입입니다. 만약, 사용하는 웹사이트의 테마에 디자이너가 <ol>에 다른 모양 셋팅을 해놓았을 경우 다시 번호를 붙일 때 type="1" 을 삽입하면 됩니다.

<h2>액체 원소</h2>
  <ol type="1">
    <li>브로민 Br</li>
    <li>수은 Hg</li>
  </ol>

알파벳 대문자로 시작

type="A"를 삽입하면, 알파벳 대문자로 시작하는 <ol> 태그를 작성할 수 있습니다.

<h2>기체 원소 1</h2>
  <ol type="A">
    <li>수소 H</li>
    <li>헬륨 He</li>
    <li>질소 N</li>
    <li>산소 O</li>
    <li>플루오린 F</li>
  </ol>

알파벳 소문자로 시작

type="a"<ol> 태그 뒤에 삽입하면, 알파벳 소문자로 목차 붙이기가 가능합니다.

<h2>기체 원소 2</h2>
  <ol type="a">
    <li>네온 Ne</li>
    <li>염소 Cl</li>
    <li>아르곤 Ar</li>
  </ol>

로마숫자 대문자로 시작

로마숫자 대문자로 <ol> 태그를 시작하는 방법은 type="I" 속성의 추가입니다.

<h2>기체 원소 3</h2>
  <ol type="I">
    <li>크립톤 Kr</li>
    <li>제논 Xe</li>
    <li>라돈 Rn</li>
  </ol>

로마숫자 소문자로 시작

로마숫자 소문자로 시작하는 <ol> 태그는 type="i" 속성 추가로 작성할 수 있습니다.


<h2>고체 원소 1</h2>
  <ol type="i">
    <li>리튬 Li</li>
    <li>베릴륨 Be</li>
    <li>붕소 B</li>
    <li>탄소 C</li>
  </ol>

<ol> 번호 시작 위치 조절

숫자 시작점 조절

<ol> 태그의 기본 셋팅은 가장 최소값부터입니다. 첫 단위를 조절하고 싶은 경우 start 속성을 입력후 속성값에 원하는 번호를 입력합니다.

<h2>고체 원소 2</h2>
  <ol start="51">
    <li>나트륨 Na</li>
    <li>마그네슘 Mg</li>
    <li>알루미늄 Al</li>
    <li>규소 Si</li>
  </ol>

로마숫자 시작점 조절

알파벳, 로마숫자 등의 시작 번호를 조절할 때는 typestart두 속성을 모두 기입하면 됩니다.

<h2>고체 원소 3</h2>
  <ol type="i" start="20">
    <li>인 P</li>
    <li>황 S</li>
    <li>칼륨 K</li>
    <li>칼슘 Ca</li>
  </ol>

알파벳 시작점 조절

알파벳의 경우 시작점을 조절하면, 알파벳끼리의 중첩을 통해 숫자를 표현합니다. 엑셀 스프레드 시트의 세로 셀인 열을 표시하는 방법과 동일합니다.

<h2>고체 원소 4</h2>
  <ol type="A" start="31">
    <li>스칸듐 Sc</li>
    <li>타이타늄 Ti</li>
    <li>바나듐 V</li>
    <li>크로뮴 Cr</li>
  </ol>

내림차순 정렬

<ol> 태그의 기본 순서는 오름차순입니다. 내림차순 정렬은 reversed 속성을 사용합니다. start 속성과 함께 사용해서 시작점을 조절할 수 있습니다.

<h2>고체 원소 11</h2>
  <ol reversed>
    <li>탄탈럼 Ta</li>
    <li>텅스텐 W</li>
    <li>레늄 Re</li>
    <li>오스뮴 Os</li>
  </ol>
<h2>고체 원소 12</h2>
  <ol start="100" reversed>
    <li>이리듐 Ir</li>
    <li>백금 Pt</li>
    <li>금 Au</li>
    <li>탈륨 Tl</li>
  </ol>

<ol> 태그 중첩

<ol> 태그는 서로 중첩이 가능합니다.

<ol>
  <li>기체 원소</li>
  <li>고체 원소
    <ol type="A">
      <li>팔라듐 Pb</li>
      <li>알루미늄 Al</li>
      <li>마그네슘 Mg</li>
    </ol>
  </li>
  <li>액체 원소</li>
</ol>


<ol> 태그 가로 배열

<ol> 태그를 가로로 배열할 경우 <li> 태그에 몇몇 태그 선택자를 삽입해야 합니다. 나머지는 디자인 요소지만, display:blockfloat:left 속성은 가로 배열을 만들 때 빠져서는 안됩니다.

가로 배열은 웹페이지에서 내비게이션 메뉴 등을 만들 때 사용될 수 있습니다.

li {
  display: block;
  float: left;
}

<ol> 태그 디자인

<ol> 배경색 변경

<ol> 태그 배경색 변경은 style 속성에 background-color 속성값을 추가해서 사용합니다. #AEA2E3Hex 코드 색을 정의합니다.

<h2>고체 원소 5</h2>
  <ol style="background-color:#AEA2E3;">
    <li>망가니즈 Mn</li>
    <li>철 Fe</li>
    <li>코발트 Co</li>
    <li>니켈 Ni</li>
  </ol>

또는 <ol> 태그에 classid 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "tomato">로 지정한 예입니다.

#tomato {
  background-color: crimson;
}

<ol> 글자색 변경

<ol> 태그 글자색 변경은 style 속성에 color 속성값 삽입으로 작성합니다. blue는 색을 정의합니다.

<h2>고체 원소 6</h2>
  <ol style="color:blue;">
    <li>구리 Cu</li>
    <li>아연 Zn</li>
    <li>갈륨 Ga</li>
    <li>저마늄 Ge</li>
  </ol>

또는 <ol> 태그에 classid 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "orange">로 지정한 예입니다.

#orange {
  color: blue;
}

<ol> 테두리 삽입

<ol> 태그 테두리 삽입은 style 속성에 border 속성값을 삽입해서 작성합니다. px은 테두리 두께, solid는 테두리 종류, purple은 테두리 색을 정의합니다.


<h2>고체 원소 7</h2>
  <ol style="border:5px solid purple;">
    <li>비소 As</li>
    <li>셀레늄 Se</li>
    <li>루비듐 Rb</li>
    <li>스트론튬 Sr</li>
  </ol>

또는 <ol> 태그에 classid 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "candy">로 지정한 예입니다.

#candy {
  border: 5px solid purple;
}

<ol> 글씨체 변경

<ol> 태그 글씨체 변경은 style 속성에 font-family 속성값을 추가해서 작성합니다.

<h2>고체 원소 8</h2>
  <ol style="font-family:굴림체;">
    <li>이트륨 Y</li>
    <li>지르코늄 Zr</li>
    <li>나이오븀 Nb</li>
    <li>몰리브데넘 Mo</li>
  </ol>

또는 <ol> 태그에 classid 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "babo">로 지정한 예입니다.

#babo {
  font-family: 굴림체;
}

<ol> 글씨 크기 변경

<ol> 태그 글씨 크기 변경은 style 속성에 font-size 속성값을 추가해서 작성합니다.

<h2>고체 원소 9</h2>
  <ol style="font-size:25px;">
    <li>테크네늄 Tc</li>
    <li>루테늄 Ru</li>
    <li>로듐 Rh</li>
    <li>팔라듐 Pd</li>
  </ol>

또는 <ol> 태그에 classid 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "kimura">로 지정한 예입니다.

#kimura {
  font-size: 25px;
}