List

[- Disclaimer -] 아래 내용은 정보보안 공부 목적으로 작성된 것이나, 이를 토대로 허가되지 않은 대상에 실습을 진행할 경우 해킹 시도로 간주하여 법적 처벌을 받을 수 있음을 알려 드립니다.

목록 생성 Tag

✦ Unordered List (=규칙/순서 없는 목록)

✧ <ul>

→ <li> 감싸는 용도 // <li>: 한 항목

<ul>
    <li>첫 번째 항목</li>
        <ul>
            <li>그래?</li>
        </ul>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>
Plain Text
복사

✦ Ordered List (=규칙/순서 있는 목록)

✧ <ol>

→ 순서가 있어 각 항목 앞에 번호 존재

→ type, start 속성 대신 CSS 3 Style 사용 권고

type 속성: 순서 표현 Marker 종류
start 속성: Marker 시작 순번 지정
reserved 속성: 역순 표시
Plain Text
복사

// Ex)
<ol type = "1" | "A" | "a" | "I" | "i" | (...)
Plain Text
복사

<ol type = 1 start = "3">
    <li>ㅇㅅㅇ</li>
    <li>ㅎㅉㅎ</li>
</ol>
Plain Text
복사

<ol type = i start = "2">
    <li>ㅇㅅㅇ</li>
    <li>ㅎㅉㅎ</li>
    <li>ㅇㅁㅇ</li>
</ol>
Plain Text
복사

✦ 사용처

✧ Navigation, 문서 정리 등

Definite List (=정의 List)

✦ <dl>

✧ <dt>, <dd> 감싸는 용도

→ <dt>: 제목

→ <dd>: 설명

<dl>
    <dt>제목</dt>
    <dd>설명</dd>
</dl>
Plain Text
복사

Block Tag

✦ 새 Line에서 시작하여 출력

✦ 한 Line 독점 사용

✧ Ex) <p>, <h1>, <div>, <ul> 등

<div style="background-color:skyblue; padding:10px;">
어 그래
Plain Text
복사

Inline Tag

✦ Block 속에 삽입하여 출력

✧ Ex) <span> 등

음 그래? <span style="color:red">어 그래</span> 응 그래
Plain Text
복사