공부/HTML

[HTML5] 리스트 작성하기 실습1

JangGiraffe 2015. 1. 7. 16:14

 

HTML에서 리스트는 순번리스트, 순번이 없는 리스트, 정의리스트 이렇게 3가지가 있다.

1. 순번리스트(Ordered list)
    태그 시작 ,끝 : <ol> </ol>
    리스트항목 추가 : <li></li>

2. 순번이 없는 리스트(Unordered list)
   태그 시작 ,끝 : <ul> </dl>
   리스트 항목 추가 : <li></li>

3. 정의리스트(Definition list) : 용어와 그 의미에 대한 리스트이다.
   태그 시작 ,끝: <dl> </dl>
   리스트 항목 추가 : <dd></dd>

 

[list.html 화면]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtm111/DTD/xhtm111.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title> 리스트 공부</title>
 </head>

 <body>
  <h1> 안녕</h1>
  <h2> 순번이 없는 리스트</h2>
  <ul>
   <li> 첫번째</li>
    <ul><li>중첩테스트</li></ul>
   <li> 두번째</li>
  </ul>
  <h2> 순번이 있는 리스트 </h2>
  <ol style="list-style-type:upper-alpha">대문자 알파벳 순번.
   <li> 첫번째</li><li> 두번째</li>
  </ol>
  <ol>일반 순번
   <li> 첫번째</li><li> 두번째</li>
  </ol>
  <ol style="list-style-type:lower-roman">소문자 로마자 순번.
   <li> 첫번째</li><li> 두번째</li>
  </ol>
  <h2> 정의리스트 용어,설명으로 나눠짐</h2>
  <dl>
   <dt> 첫번째 용어</dt>
    <dd> 용어 설명</dd>
    <dd> 용어 설명 2</dd>
   <dt> 두번째용어</dt>
   <dt> 세번째 용어</dt>
    <dd> 설명있음</dd>
  </dl>
 </body>
</html>

[list.html 코드]

 

-----------------------------------------------------------------

 

list.html에 css 적용

css에서 ul에 a라는 클래스를 만들어서 그 안에 마커를 none(없음)으로 바꿔주었습니다.
(헤더파일에 css 추가시켜주는 코드 추가)

반응형