Frontend/HTML

목록관련 태그

이파댥 2024. 5. 27. 20:11

 

02 목록 관련 태그

ul(UnOrdered List) : 순서가 없는 목록

li(List Item) : 목록의 한 줄

    점심메뉴
  • 김밥
  • 샌드위치
  • 라면
  • 순대국밥

ol(Ordered List) : 순서가 있는 목록

        type "속성" : 표시되는 숫자 모양을 변경
        type "a" : 영어 소문자로 시작(a, b, c, ...)
        type "A" : 영어 대문자로 시작(A, B, C, ...)
        type "i" : 로마 소문자로 시작(i, ii, iii, ...)
        type "I" : 로마 대문자로 시작(I, II, III, ...)
        type "1" : 숫자로 시작(1, 2, 3, ...)
    
        start "속성" : 시작하는 숫자 지정
        reverse : 거꾸로 시작(역순)

        순서 ol 태그 작성후 li 태그 작성하기
  1. 사과
  2. 포도
  3. 키위
  4. 망고
  5. 멜론
  1. 사과
  2. 포도
  3. 키위
  4. 망고
  5. 멜론

dl(Description List) 태그 : 설명 목록

        dl 태그 : 설명 목록이 작성될 공간
        dt 태그 : 설명 제목(Description Title)
        dd 태그 : 설명 내용(Description Data)
김밥
밥에 양념을 하고 양념한 밥을 김에 넣고 각종 채소를 넣은 음식
종류 : 참치, 김치, 야채, 치즈, 돈까스 등
라면
물과 동시에 스프랑 면을 넣고 3분간 끓여서 먹는 음식
종류 : 해물, 차돌, 콩나물, 숙주

목록을 이중으로 여러개 작성

  • 분식
    1. 김밥
    2. 돈까스
  • 양식
    1. 파스타
    2. 피자

 

HTML 코드

<!DOCTYPE html>
<!-- 
    language 언어 약자로 lang 사용, Korean 한국어의 약자로 ko 사용
    
    html 코드에는 한국어가 들어갈 것임을 표현한 것 필수 X

    meta : metadata 의 약자이며 데이터에 대한 정보를 제공하는 것
           주로 meta 를 앞에 붙일 때는 정보를 전달
           head 안에서만 사용하도록 권고

    charset : 문자를 깨짐 없이 전달 (UTF-8 같은 경우에는 한글을 깨짐 없이 작성해주기 위한 설정)
    
    meta charset="UTF-8"

    lang="ko" : 웹에서 한국어로 올바르게 언어 설정 진행 , 검색할 때 검색 엔진에 노출되는 언어 지정
    charset="UTF-8" : 01~~ 로 읽는 컴퓨터가 한글을 읽었을 때 글자가 깨짐없이 읽을 수 있도록 설정
    UTF-8 : 한국에서만 작성하는 것이 아니라 다양한 다른 나라 언어도 설정이 가능 
-->

<html lang="ko">

  <head> <!-- html 로 코드 시작 -->
    <title>02 목록 관련 태그</title> <!-- 파일 제목과 사용자들에게 보여지는 탭 제목이 달랐으면 할 때 작성-->
    <meta charset="UTF-8" /> <!-- meta 는 head 안에서만 작성할 것 -->
  </head>

  <body>

    <h1>ul(UnOrdered List) : 순서가 없는 목록</h1>
    
    <h1>li(List Item) : 목록의 한 줄</h1>
    
    <ul>
        점심메뉴
        <li>김밥</li> <!-- 단축키 : shift alt ↑ or ↓-->
        <li>샌드위치</li>
        <li>라면</li>
        <li>순대국밥</li>
    </ul>

    <h1>ol(Ordered List) : 순서가 있는 목록</h1>
    
    <pre>
        type "속성" : 표시되는 숫자 모양을 변경
        type "a" : 영어 소문자로 시작(a, b, c, ...)
        type "A" : 영어 대문자로 시작(A, B, C, ...)
        type "i" : 로마 소문자로 시작(i, ii, iii, ...)
        type "I" : 로마 대문자로 시작(I, II, III, ...)
        type "1" : 숫자로 시작(1, 2, 3, ...)
    
        start "속성" : 시작하는 숫자 지정
        reverse : 거꾸로 시작(역순)

        순서 ol 태그 작성후 li 태그 작성하기
    </pre>

    <ol type="1" start="3" reversed>
        <li>사과</li> <!-- 숫자 3으로 시작하는 사과 -->
        <li>포도</li> <!-- reverse 를 사용했기 때문에 2. 포도 -->
        <li>키위</li> <!-- 1. 키위 -->
        <li>망고</li> <!-- 0. 망고 -->
        <li>멜론</li> <!-- -1. 멜론 -->
    </ol>
    
    <!-- 만약 c 부터 시작하길 원하면 tpye="a" start="3" -->
    
    <ol type="1" start="3"> <!-- start="3" 이기 때문에 3 시작 -->
        <li>사과</li> <!-- 숫자 3으로 시작하는 사과 -->
        <li>포도</li> <!-- reverse 를 사용X 4. 포도 -->
        <li>키위</li> <!-- 5. 키위 -->
        <li>망고</li> <!-- 6. 망고 -->
        <li>멜론</li> <!-- 7. 멜론 -->
    </ol>

    <h1>dl(Description List) 태그 : 설명 목록</h1>
    
    <pre>
        dl 태그 : 설명 목록이 작성될 공간
        dt 태그 : 설명 제목(Description Title)
        dd 태그 : 설명 내용(Description Data)
    </pre>

    <dl>
        <dt>김밥</dt>
        <dd>밥에 양념을 하고 양념한 밥을 김에 넣고 각종 채소를 넣은 음식</dd>
        <dd>종류 : 참치, 김치, 야채, 치즈, 돈까스 등</dd>

        <dt>라면</dt>
        <dd>물과 동시에 스프랑 면을 넣고 3분간 끓여서 먹는 음식</dd>
        <dd>종류 : 해물, 차돌, 콩나물, 숙주</dd>
    </dl>

    <h1>목록을 이중으로 여러개 작성</h1>

    <ul>
        <li>분식</li>
        <ol> <!-- 아무 값이 없으면 숫자 1 부터가 디폴트 -->
            <li>김밥</li>
            <li>돈까스</li>
        </ol>

        <li>양식</li>
        <ol>
            <li>파스타</li>
            <li>피자</li>
        </ol>
    </ul>

  </body>
</html> <!-- html 로 코드 종료 -->