번호있는(ordered) 정보 : Rank List

번호있는 목록(OL: ordered list)의 태그이며, 그 내용으로 갖는 엘레멘트는 목록 항목(LI: list item)들이 들어갑니다.

알서포트 소식

  1. 알서포트는 알집을 만드는 회사가 아닙니다.
  2. 알서포트는 알약을 만드는 회사가 아닙니다.
  3. 알서포트는 알송을 만드는 회사가 아닙니다.
  4. 알서포트는 알씨을 만드는 회사가 아닙니다.
  5. 알서포트는 알뷰를 만드는 회사가 아닙니다.

<ol>와 <li> 엘레멘트에서 공히 애트리뷰트로는 type이 있고 가능 한 값은 아래와 같습니다.
물론 <ol>에 type이 지정되는 경우 그 하위 <li>에는 모두 같은 type이 적용됩니다.
<ol>의 추가적인 애트리뷰트로 start="3"가 있는데 이는 목록의 시작 번호를 지정합니다.
<li>에서 번호를 지정하려면 value="5"를 사용합니다.

<li type="1"> 아라빅 숫자 1, 2, 3, ... 디폴트.
<li type="a"> 알파벳 소문자 a, b, c, ...
<li type="A"> 알파벳 대문자 A, B, C, ...
<li type="i"> 로만 소문자 i, ii, iii, ...
<li type="I"> 로만 대문자 I, II, III, ...

HTML
		

			
알서포트 소식

			
    
				
  1. 알서포트는 알집을 만드는 회사가 아닙니다.
    2. 
				
  2. 알서포트는 알약을 만드는 회사가 아닙니다.
    3. 
				
  3. 알서포트는 알송을 만드는 회사가 아닙니다.
    4. 
				
  4. 알서포트는 알씨을 만드는 회사가 아닙니다.
    5. 
				
  5. 알서포트는 알뷰를 만드는 회사가 아닙니다.
    6.
CSS
		.section-ol { 
			position: relative; border: 1px solid #ddd; background: #fff; font-size: 12px;
			font-family: Tahoma, Geneva, sans-serif; line-height: normal; *zoom:1;
		}
		.section-ol h2 {
			margin: 0; padding: 10px 0 8px 13px; border-bottom: 1px solid #ddd;
			font-size: 12px; color: #333;
		}
		.section-ol ol { margin: 13px 20px; padding: 0; }
		.section-ol.none ol { margin: 13px; padding: 0; list-style: none; }
		.section-ol li { position: relative; margin: 0 0 10px 0; }
		.section-ol li:after { display: block; clear: both; content: ""; }
		.section-ol li .bu { float: left; margin: 0 4px 0 0; color:#999; }
History