이번 내용은 목록을 만드는 html 태그를 알아보려고 한다.
기본적인 부분은 생략을 하고 포스팅 내용을 다룰것이다. 처음 보신분들은 아래 링크에 가서 보길 바란다.
<ul>, <li> 태그는 순서 없는 목록만들기 태그이다.
기본 시작은
<ul>
<li> 텍스트 </li>
<li> 텍스트 </li>
</ui>
실습
위와 같이 표현이 가능하다. <ul>안에 <li>넣어 목록 리스트를 작성 할 수있다.
아무 스타일도 적용하지 않아서 기본 목록 형식으로 표현이 된다.
<ol> <li>순서목록 태그
기본 시작은
<ol>
<li>텍스트</li>
<li>텍스트</li>
</ol>
실습으론
위와 같이 표현이 된다.
이번에는 <ol> 태그에 기능이 좀더 추가가 된다.
별도의 속성값을 넣어 좀 더 리스트 목록을 만들수 있게 된다.
<type 속성 값>
속성 값 |
설명 |
1 |
숫자(기본값) |
a |
영문 소문자 |
A | 영문 대문자 |
i |
로마숫자 소문자 |
I |
로마숫자 대문자 |
작성하는 태그는 <ol type="a"> 응용은 <ol type="a" start="3"> <ol type="a" reversed> 이와 같이 시작하면 된다.
type 속성: <ol> 태그는 순서 목록이고 각 항목 앞에 1,2,3 같은 숫자가 기본으로 표기하며, ol 태그의 type 속성을 이용해 숫자나 문자를 다양하게 조절을 할 수가 있다.
start 속성: 순서 목록은 기본적으로 1부터 시작할 수 있고 경우에 따라 중간 번호부터 시작할 수있다.
reversed 속성: 순서목록을 역순으로 표시가 가능하다.
목록 리스트가 많은 경우 </li>속성을 사용하지 않아도 중첩이 된다.
<ol>
<li>내용
<li>내용
<li>내용
</ol>
위 같이 작성해서 가능하다.
실습
실습!!
<dl>,<dt>,<dd>태그 역시 같은 성향의 설명 목록태그이다.
기본형은
<dl>
<dt>내용</dt>
<dd>내용</dd>
<dd>내용</dd>
<dt>내용</dt>
<dd>내용</dd>
<dd>내용</dd>
</dl>
이름하나의 세 개의 설명을 나타낼수 있다. 지금까지 목록 만드는 html태그 소스를 알아보았다.
태그소스는 자주 연습하면서 작성을 해야 내손에 익어간다.
지금도 많이 버벅되지만 좀 더 하면은 익숙해질 것이라고 생각이 된다.
표만드는 html태그 (0) | 2017.11.23 |
---|---|
텍스트 따라 표시하는 태그 (0) | 2017.11.07 |
HTML 텍스트 관련 태그 소스 (0) | 2017.10.26 |
HTML 문서 기본구조 살펴보기 (0) | 2017.10.24 |
에디터플러스 또는 비주얼스튜디오 어떤걸 선택?? (0) | 2017.10.18 |