[html] HTML _ 목록 관련 태그

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

<h1>순서 없는 목록 태그 : ul</h1>

    <p>ul태그는 내부에 li태그로 목록을 표시함 </p>

    <ul>
        <li>육개장</li>
        <li>냉면</li>
        <li>순두부찌개</li>
        <li>라면</li>
    </ul>

    <p>ul태그에 다시 ul태그 넣기</p>

    <ul>
        <ul>
            <ul>
                <li>육개장</li>
                <li>냉면</li>
                <li>순두부찌개</li>
                <li>라면</li>
            </ul>
        </ul>
    </ul>

 <ul id = "menu1" class = "menu">
        <li>육개장</li>
        <li>냉면</li>
        <li>순두부찌개</li>
        <li>라면
            <ul>
                <li>신라면</li>
                <li>비빔면</li>
                <li>불닭볶음면</li>
            </ul>
        </li>
    </ul>

    <p>ul태그는 페이지에서 메뉴를 만들때 주로 사용한다 </p>

 

 

순서가 있는 목록 <ol> 태그

<h1>순서가 있는 목록 태그 : ol</h1>

    <ol>
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

    <p>
        ol태그는 순서가 부여되어 문자 앞에 순서를 표현하는 문자가 출력된다<br>
        default값 : 숫자 <br>
        변경하고 싶으면 속성값을 설정해서 영문자(대/소), 로마자(대/소)로 변경 가능<br>
        type = "A||a" (영문자)  "i||I" (로마자)
    </p>

    <ol type = "A">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

    <ol type = "a">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

    <ol type = "I">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

    <ol type = "i">
        <li><h1>JAVA</h1></li>
        <li><h2>Oracle</h2></li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>


    <p>순서표현 문자를 바꾸고싶다면 start속성 이용</p>

    <ol type = "1" start = "5">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

    <ol type = "a" start = "5">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>



    <p>역순으로 출력하려면 reversed속성 이용 </p>

    <ol type = "1" reversed start = "5">
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JDBC</li>
        <li>HTML</li>
    </ol>

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

설명 목록(description list)이란 이름과 값 형태로 된 목록을 말합니다.

설명 목록에는 이름(단어명) 부분을 지정하는 <dt> 태그, 값(설명) 부분을 지정하는 <dd> 태그로 구성됩니다.

<dl>과 </dl> 태그 사이에는 한 쌍의 <dt>태그와 <dd> 태그를 넣습니다.

<h2>정의 리스트 태그 활용하기</h2>
     <p>
         dl태그를 이용<br>
         dl 태그의 자식으로 dt, dd 태그가 있다<br>
         dt : 제목 작성 부분 <br>
         dd : 제목에 따른 뜻을 나타내는 부분 <br>
     </p>

     <dl>
         <dt><h2><b>apple</b></h2></dt>
         <dd>명, 사과</dd>
     </dl>