수학과의 좌충우돌 프로그래밍

[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그 본문

웹프로그래밍/html,css

[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그

ssung.k 2019. 1. 18. 00:31

안녕하세요 강민성입니다.


오늘은 저번 시간에 이어서 텍스트 관련 태그들을 알아보도록 하겠습니다.


저번 시간에는 


텍스트를 덩어리로 묶어주는 태그와 텍스트를 한 줄로 묶어주는 태그에 대해서 알아보았습니다.


http://ssungkang.tistory.com/entry/html-2%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B4%80%EB%A0%A8-%ED%83%9C%EA%B7%B8%EB%93%A4-1


이번 시간에는 목록을 만드는 태그에 대해서 알아보도록 하겠습니다.



목록을 만드는 태그



목록을 만드는 태그는 단순히 목록을 나타내는 용도 이외에도


이미지, 텍스트 등 다양한 분야에 사용하여 응용할 수 있습니다.


그 만큼 많이 사용하기 때문에 잘 알아두시길 바랍니다.



순서없는 목록을 만드는 <ul>, <li> 태그


ul 은 unordered list의 줄임말이고,


li 는 list의 줄임말 입니다.


ul 을 이용해서 순서 없는 목록을 만들거라고 선언을 해주고


li 를 통해서 각 항목을 표시하게 됩니다.


아래 예시와 같이 각 항목 앞에는 '불릿' 이 붙게 됩니다.


이 불릿은 뒤에서 배울 css를 통해서 수정이 가능합니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>순서없는 목록</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
    </ul>
</body>
</html>
cs





li 는 li*3 과 같이 곱하기와 자연수를 통해서 여러 개 생성이 가능합니다.





순서없는 목록을 만드는 <ol>, <li> 태그


앞을 블릿으로 하지 않고 순서를 매길 수 있습니다.


위와 마찬가지로


ol 은 ordered list의 줄임말이고,


li 는 list의 줄임말 입니다.


ol 은 몇 가지 속성을 사용해 다양한 형태로 표시해 줄 수 있습니다.



1. type 속성


기본 값은 1,2,3 과 같은 자연수 숫자로서 type을 통해서 이를 바꿀 수 있습니다.


사용할 수 있는 속성값은 다음과 같습니다.


 속성값

 1

 a

A 

i 

I 

설명 

숫자(기본값) 

영문 소문자 

영문 대문자 

로마숫자 소문자 

로마숫자 대문자 



2. start 속성


기본적으로 1, a, A 등 가장 앞에서 부터 시작을 하지만


start 속성을 사용해서 시작하는 위치를 지정할 수 있습니다.




3. reversed 속성


의미 그대로 reversed 속성을 사용하여 항목을 역순으로  표시 할 수 있습니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>순서없는 목록</title>
</head>
<body>
    <li>오늘 할 일
        <ol type="i">
            <li>이불 빨래하기</li>
            <li>핸드폰 수리하기</li>
            <li>부모님과 저녁먹기</li>
        </ol>    
    </li>
    <li>
        <ol type="i" start="4">
            <li>친구 결혼 선물사기</li>
            <li>html 공부하기</li>
        </ol>
    </li>
    
</body>
</html>
cs

 





설명 목록을 만드는 <dl>, <dt>, <dd>태그


dl 은 description list의 줄임말로서 설명 목록을 만드는 역할을 합니다.

dt 는 제목을 dd 는 내용을 표현하는 역할을 하죠.

예를 통해서 보면 쉽게 알 수 있을 겁니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>설명 목록</title>
</head>
<body>
    <dl>
        <dt>1차 회의</dt>
        <dd>장소 : 미래관 지하라운지</dd>
        <dd>시간 : 19시</dd>
        <dd>참석인원 : 4명</dd>
        <dt>2차 회의</dt>
        <dd>장소 : 중도 스터디룸</dd>
        <dd>시간 : 18시</dd>
        <dd>참석인원 : 5명</dd>
    </dl>
</body>
</html>
cs

 





저작자표시

'웹프로그래밍 > html,css' 카테고리의 다른 글

[html] 이미지를 만드는 태그  (0) 2019.01.22
[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그  (0) 2019.01.19
[html] 2.텍스트 관련 태그들 (1)  (0) 2019.01.15
[html] html 기본문서 구조  (0) 2019.01.08
[html] html이란, 웹 브라우저와 웹 편집기  (0) 2019.01.08
'웹프로그래밍/html,css' Related Articles more
Comments