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>로마숫자 시작점 조절
알파벳, 로마숫자 등의 시작 번호를 조절할 때는 type 과 start두 속성을 모두 기입하면 됩니다.
<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:block 및 float:left 속성은 가로 배열을 만들 때 빠져서는 안됩니다.
가로 배열은 웹페이지에서 내비게이션 메뉴 등을 만들 때 사용될 수 있습니다.
li {
display: block;
float: left;
}<ol> 태그 디자인
<ol> 배경색 변경
<ol> 태그 배경색 변경은 style 속성에 background-color 속성값을 추가해서 사용합니다. #AEA2E3은 Hex 코드 색을 정의합니다.
<h2>고체 원소 5</h2>
<ol style="background-color:#AEA2E3;">
<li>망가니즈 Mn</li>
<li>철 Fe</li>
<li>코발트 Co</li>
<li>니켈 Ni</li>
</ol>또는 <ol> 태그에 class나 id 값을 지정해서 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> 태그에 class나 id 값을 지정해서 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> 태그에 class나 id 값을 지정해서 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> 태그에 class나 id 값을 지정해서 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> 태그에 class나 id 값을 지정해서 CSS 선택자를 활용합니다. 아래 예시는 <ol id = "kimura">로 지정한 예입니다.
#kimura {
font-size: 25px;
}