[HTML/CSS] 구조를 나타내는 요소, 목록과 표

자두·2021년 9월 28일

HTML-CSS

목록 보기

3/14

1. HTML CH4
3. HTML CH7-8

CH5. 구조를 나타내는 요소

1) 컨테이너 (div, span)

div (division)

콘텐츠 분할 요소
플로우 콘텐츠를 위한 통용 컨테이너
CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않음
"순수" 컨테이너로서 아무것도 표현하지 않음

span

구문 콘텐츠를 위한 통용 인라인 컨테이너

2) 시맨틱 웹 (Semantic Web)

요소의 의미를 고려하여, 구조를 설계하고 코드를 작성

의미론적인 마크업 사용 시 이점

페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주

스크린 리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용할 수 있음

의미있는 코드 블록을 찾는 것이 훨씬 쉬움

개발자에게 태그 안에 채워질 데이터 유형을 제안함

의미있는 이름 짓기는 적절한 사용자 정의 요소/구성 요소의 이름짓기를 반영함

3) header

소개 및 탐색에 도움을 주는 콘텐츠
ex) 제목, 로고, 검색 폼, 작성자 이름
다른 <header> 또는 <footer>가 자손으로 올 수 없음

<!-- 페이지 제목 -->
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>

<!-- 글 제목 -->
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen.</p>
  <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>

가장 가까운 구획 콘텐츠나 구획 루트의 푸터
ex) 구획의 작성자, 저작권 정보, 관련 문서

<footer>
  Some copyright info or perhaps some author
  info for an &lt;article&gt;?
</footer>

5) nav

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획
ex) 메뉴, 목차, 색인

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

6) aside

문서의 주요 내용과 간접적으로만 연관된 부분 (부가적인 내용)
ex) 사이드바 혹은 콜아웃 박스

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

7) main

<body>의 주요 콘텐츠
ex) 문서의 핵심 주제, 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠
하나만 사용할 수 있음 !

<header>Gecko facts</header>

<main>
    <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
 
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>

8) article

문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획

ex) 게시판과 블로그 글, 매거진이나 뉴스 기사
독립적인 콘텐츠이므로, 단독적으로도 사용할 수 있는 구획

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

9) section

일반 구획 요소
더 적합한 의미를 가진 요소가 없을 때 사용
단독적인 콘텐츠로 사용될 수 없는 구획

<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>

CH6. 목록과 표

1) 목록 - ul, ol, li

ul - unordered list

순서가 없는 목록

ol - ordered list

순서가 있는 목록
type 속성 : 항목을 세는 카운트 유형
start 속성 : 시작하는 숫자 변경
reversed 속성 : 역순으로 카운팅

li - list item

리스트의 하나하나 항목
value 속성 : 현재 li부터 value값으로 카운팅

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

<!-- 중첩가능 -->
<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

2) 정의 목록 - dl, dt, dd

dl (list)

설명 목록
주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용

dt (term)

설명 혹은 정의 리스트에서 용어

dd (description)

용어에 대한 설명, 정의, 또는 값

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

dt와 dd의 형제로는 dt와 dd만 가질 수 있음 (div 등 다른 태그는 X)

3) 표 - table, tr, th, td

table

행과 열로 이루어진 표

테이블의 한 행

테이블 각 행이나 열의 제목
scope 속성 : 행에 대한 것인지, 열에 대한 것인지 표시

데이터를 포함하는 표의 셀
colspan 속성 : 차지하는 영역 넓힐 수 있음

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th scope="col">Lime</th>
    <th scope="col">Lemon</th>
    <th scope="col">Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

4) thead, tbody, tfoot

thead

테이블의 컬럼의 머리를 정의
thead를 사용한다면 형제 태그로는 tbody나 tfoot만 올 수 있음 (tr X)

tbody

표의 여러 행(<tr>)을 묶어서 표 본문을 구성
tbody는 여러개일 수 있음

tfoot

표의 마지막

<table>
    <caption>Council budget (in £) 2018</caption>
    <thead>
        <tr>
            <th>Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
</table>

5) caption

표의 설명 또는 제목
caption은 table의 맨 첫 번째 자식으로 존재해야 함

<table>
  <caption>Example Caption</caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>

자두

블로그 이사했어요 https://ktmihs.tistory.com/

이전 포스트

[HTML/CSS] 텍스트 요소

다음 포스트