HTML 3. LIST

20950 단어 htmlhtml

1. 순서가 없는 목록만들기(Unordered List)

목록의 덩어리를 묶어주는 ul tag
덩어리 안의 각 항목을 list item을 이용해 표시한다.
ul tag에서 형성되는 bullet(불릿)은 css에서 list-style-type속성을 이용해 변경가능하다.

기본형

<ul>
  <li>text</li>
  <li>text</li>
  …
</ul>

예시

<!DOCTYPE html>
	<html lang="ko">
    <head>
    	<meta charseet="utf-8">
        <title>list</title>
    </head>
    <body>
    	<h2>문서의 품질기준</h2>
        <ul type="square">
        	<li>문서는 <b>문서 등재 기준</b>을 충족해야 합니다.</li>
            <li>문서는 적절한 출처가 있어야 합니다.</li>
            <li>문서는 다듬어지지 않은 기계 번역의 결과가 아니어야 하며, 표현이 자연스러워야 합니다.</li>
            <li>문서에는 문제점이가 태그가 없어야 합니다.</li>
        </ul>
    </body>
    </html>
list

문서의 품질기준

  • 문서는 문서 등재 기준을 충족해야 합니다.
  • 문서는 적절한 출처가 있어야 합니다.
  • 문서는 다듬어지지 않은 기계 번역의 결과가 아니어야 하며, 표현이 자연스러워야 합니다.
  • 문서에는 문제점이가 태그가 없어야 합니다.


2. 순서가 있는 목록만들기(ordered litst)

항목을 나열하되, 순서가 있는 목록을 만들 때 사용한다.

<ul>tag , <ol>tag는 Block요소의 성격을 가진다.
block안에 block(덩어리)를 넣는 것이 가능한데, 이러한 구조는 웹 사이트 제작시 메인 메뉴 하단 서브 메뉴로 사용하기도 한다.
즉 ul/ol이라는 덩어리 안에 li라는 덩어리를 넣는 것이 가능하단 말.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>ordered list</title>
</head>
<body>
    <li>COFFEE
    <li>NON-COFFEE
    <li>베이커리
    <li>케이크
    	<ol>
        	<li>레드벨벳 크림치즈 케이크</li>
            <li>뉴욕치즈 케이크</li>
            <li>다크쇼콜라 케이크</li>
            <li>호두 당근 케이크</li>
        </ol>
</body>
</html>
ordered list
  • COFFEE
  • NON-COFFEE
  • 베이커리
  • 케이크 - 대메뉴
      - 서브메뉴
    1. 레드벨벳 크림치즈 케이크
    2. 뉴욕치즈 케이크
    3. 다크쇼콜라 케이크
    4. 호두 당근 케이크

    ★ <ol>tag tag의 속성
    ① type 속성

    ② start 속성
    중간번호부터 시작 가능
    ③ reversed 속성 : 항목 역순 표시

    예시

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>ordered list</title>
</head>
<body>
	<h2>한국의 사계절</h2>
    <ol type="I" reversed>
        <li>봄</li>
        <li>여름</li>
        <li>가을</li>
        <li>겨울</li>
    </ol>
</body>
</html>
    ordered list

    한국의 사계절

    1. 봄
    2. 여름
    3. 가을
    4. 겨울

    [tip] ol > li * 4 : ol tag안에 li tag 4개 만들어라.



    3. 설명 목록만들기(description list)

    <dl>tag, <dt>tag, <dd>tag

    <dl>tag : '제목'과 '설명'이 한 쌍인 설명 목록(description list)을 만드는 태그
    <dt>tag : '제목(description title)' 을 만드는 태그
    <dd>tag : '설명(description definition)' 을 만드는 태그

    연속적인 내용일 경우 목록 태그인 'dl'은 한 번만 사용하도록 한다.

    <!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
    <tiltel>description</tilte>
</head>
<body>
	<h1>제주 올레</h1>
    <dl>
    	<dt>올레 1코스</dt>
        <dd>코스 : 시흥 초등학교 앞 → 광치기 해변</dd>
        <dd>거리 : 14.6km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
        
        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 → 은평포구</dd>
        <dd>거리 : 14.5km(4~5시간)</dd>
        <dd>난이도 : 중</dd>
    </dl>
</body>
</html>
    description

    제주 올레

    올레 1코스 코스 : 시흥 초등학교 앞 → 광치기 해변 거리 : 14.6km(4~5시간) 난이도 : 중 올레 2코스 코스 : 광치기 해변 → 은평포구 거리 : 14.5km(4~5시간) 난이도 : 중

    cf.주석_설명 글 추가하기

    <!-- : 열린 태그
	text_주석
--> : 닫힌 태그
    • 🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(2)
    [TIL] 2021.11.15

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage