HTML 요소 2 - (구조, 목록과 표, 임베디드)

2. 구조를 나타내는 요소

▶ div

division 이라는 뜻을 가지고, 구간이나 구획을 분할하거나 묶을때 사용한다(사용빈도 최강!)

• block 요소 → 가로로 차지할 수 있는 영역을 차지(부모의 영역)
• 내용이 없으면 보이지 않음(height가 0이므로)
• 의미를 가지고 있지 않은 것이 특징

▶️ span

구문 콘텐츠를 위한 요소

• inline 요소 → 내용이 차지하는 부분만을 영역으로 차지
• 의미를 가지고 있지 않음

▶️ 시멘틱 웹 (Semantic Web)

Semantic: 의미론적인

컴퓨터가 웹 상의 수많은 정보들을 보다 쉽게 해석할 수 있도록 나온 개념 (시멘틱 웹)

(출처: https://eunsukim.me/posts/understanding-semantic-html)

시멘틱 웹의 요소는 div와 동일하게 작동하지만 의미를 담고있다. (non-semantic: div, span)

<!-- 기존의 웹 -->
<div id="header">title</div>

<!-- 시멘틱 웹 -->
<header>title</header>

기존의 웹과의 차이를 살펴보면 한 눈에 알아보기 쉽고 보다 의미론적이기 때문에 내용을 유추할 수 있다.

시멘틱 웹의 장점

• 검색엔진이 정보를 수집하는데 수월함 (검색엔진에 보다 노출)
• 웹접근성이 보다 좋다 (스크린리더)
• 알아보기 쉽기 때문에 생산성, 유지보수 측면에서 좋다

- header

소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. (제목, 로고, 검색폼, 이름 등)

<header> 
    <h1> title </h1>
</header>

• header 내에 header가 들어올 수는 없다 -> 다른 플로우 컨텐츠에서는 사용이 가능
• 페이지 전체 제목, 글 하나하나의 제목 등으로 사용될 수 있다

- footer

일반적으로 구획 작성자, 저작권정보, 관련 문서, 연락처 등의 내용을 가진다 (보통 웹페이지 맨 아래에 위치)

<footer>
    <p>created by jongbin</p>
</footer>

• footer 내에 footer 또는 header가 들어올 수 없다 -> 다른 플로우 컨텐츠에서는 사용이 가능

- nav

현재페이지, 다른페이지로의 링크를 보여주는 구획

<nav>
  <span>Jongbin</span>
  <ul>
    <li><a href="">address</a></li>
    <li><a href="">age</a></li>
    <li><a href="">phone</a></li>
  </ul>
</nav>

• 현재 페이지가 어디에 위치하는지를 보여줄 수 있다
• 현재 페이지를 기준으로 상위페이지 혹은 하위페이지로 이동할 수 있는 링크를 가지고 있다
• 페이지의 이동기능을 제공하기 때문에 a태그를 가지고 있음
• 전체적인 메뉴를 다룰 수 있다
• 하나의 문서에서 여러개의 nav태그를 가질 수 있다

- aside

사이드바를 만들때 주로 사용, 본문과 큰 연관이 없고 간접적인 추가적인 정보를 제공하기 위한 구획

<aside>
    <p>부가적인 정보를 제공</p>
</aside>

• 다른 링크 또는 광고를 제공하기도 함
• 스타일링이 되지 않았을때는 글의 일부분처럼 보임 (css를 이용해서 보통 좌우로 옮김)

- main

body의 주요 콘텐프를 나타낸다(핵심내용)

<header></header>
<nav></nav>
<main>
    <!-- 주요 내용 작성 -->
</main>
<footer></footer>

• main은 body내 무조건 하나만 사용됨
• 다른 요소의 자식요소로 사용될 수 없다 (body만 부모요소로 올 수 있다)
• IE에서는 지원하지 않는다 → <main role="main"> 내용 </main>로 접근성 확보

- article

독립적으로 구분해 배포하거나 재사용할 수 있는 구획

<main>
    <article>내용1</article>
    <article>내용2</article>
    <article>내용3</article>
</main>

• 따로 사용되어도 단독적인 의미를 가질 수 있는 요소를 표현할 때 사용
• main의 자식요소로 여러개 사용될 수 있다.
• 재사용이 가능
• section내에 여러개 article이 올 수 있고, 반대로 article내에 여러개의 section이 올 수 있다.

• 보통 각각의 article을 식별할 수 있도록 각각 제목을 넣어준다

  <article>
    <header>
      <h2>article로 사용가능한 독단적인 영역</h2>
    </header>
  </article>
  

- section

html문서의 독립적인 구획을 나타냄

<main>
    <section>내용1</section>
    <section>내용2</section>
    <section>내용3</section>
</main>

• 제목태그를 사용해서 각각의 제목을 지정해 주기도 한다

article 태그와 section 태그의 차이

article로 구분이 되면 article을 사용하고 별다른 의미를 부여할 수 없으면 section을 사용한다 → 특정한 의미가 있고 없고의 차이

<main>
  <h1>Jongbin</h1>
  <section>
    <h2>like something</h2>
    <p>food, play</p>
  </section>
  <section>
    <h2>intro</h2>
    <p>his age is 26! and his address is suwon</p>
  </section>
<main>

여기서 like something이나 intro는 단독으로 사용될 수 없다 따라서 article보다는 section이 알맞다

3. 목록과 표

목록태그는 크게 두가지로 구분할 수 있다.

1. 순서가 있는 Ordered List(ol)
2. 순서가 없는 Unordered List(ul)

▶️ ol

순서가 있는 목록을 나타내는 태그

<ol>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ol>

• type속성: 기본값은 1, 영어로 구분 (대소문자 A,a), 로마자(I)
• start속성: 시작점을 지정해줄 수 있다
• value속성: 특정위치의 순서값을 지정해줄 수 있다 (이후에 오는 요소의 순서는 해당 순서의 다음 순서부터 진행)
• reverse속성: 순서를 반대로 바꾼다

▶️ ul

순서가 없는 목록을 나타내는 태그

<ul>
    <li>a</li>
    <li>b</li>
    <li>c
        <ul>
            <li>catch</li>
            <li>carry</li>
        </ul>
    </li>
</ul>

• 중첩이 가능하다
• ol과 중첩될 수 있다

• ul과 ol은 관계없이 list-style-type으로 숫자또는 사각형, 원형으로 나타낼 수 있다

  값	설명	값	설명
  none	장식 없음	lower-alpha	소문자 영어(a, b, c)
  disc	채워진 원형(기본값)	upper-alpha	대문자 영어(A, B, C)
  circle	속이 빈 원형	lower-roman	로마자 숫자(소문자)
  square	채워진 사각형	upper-roman	로마자 숫자(대문자)
  demical	숫자 형태

• list-style-image를 이용해서 기본형태가 아닌 이미지로 표현도 가능하다

  ul { list-style-image : url('filepath') }
  

• list-style-position을 이용해서 위치를 지정할 수 있다
  • outside : 블릿을 바깥에 위치(기본값)
  • inside : 블릿을 내부에 위치
  • inherit : 부모의 값을 상속받음

▶️ li

목록(리스트)에 포함되는 아이템을 정의할때 사용한다

• ul태그 또는 ol태그 내부에 사용된다

▶️ dl, dt, dd

설명 목록을 나타낸다

<dl>
  <dt>1</dt>
  <dd>one</dd>
  
  <dt>2</dt>
  <dd>two</dd>
  
  <dt>3</dt>
  <dd>three</dd>
</dl>

• dt와 dl을 자식태그로 가진다
• 용어 사전이나 메타데이터를 표시할때 사용
• dt: 용어
• dd: 설명
• 1:1, 1:n, n:1로 이루어질 수 있다(ex - 용어 하나에 여러 설명)
• dt, dd를 div로 감쌀 수 있지만(css목적), 형제요소로 사용되지 않아야한다

▶️ table

테이블을 나타내기 위한 요소

<table>
  <tr>
    <th scope="col">목록명1<th>
    <th scope="col">목록명2<th>
  </tr>
  <tr>
    <td>내용1</td>
    <td>내용2</td>
  </tr>
</table>

• <th>: table head 제목을 나타냄(scope를 속성으로 사용할 수 있음 - 대표로 하는 범위)
• <td>: table date 값을 나타냄
• 빈칸을 나타내기 위해서는 colspan을 사용한다

▶️ 테이블 구획

테이블을 보다 명시적으로 나눌 수 있다

<table>
  <thead>
    <tr>
      <th>목록명1<th>
      <th>목록명2<th>
    </tr>
</thead>

<tbody>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
    </tr>
</tbody>

<tfoot>
    <tr>
      <td>결과</td>
      <td>종합결과</td>
    </tr>
  </tfoot>
</table>

• thead: th가 들어가는 제목부분을 넣어준다
• tbody: 본문의 내용은 tbody로 감싼다
• tfoot: 마지막으로 footer의 부분은 tfoot으로 감싸준다
• thead, tbody, tfoot은 tr이 형제요소로 올 수 없다(웹표준)

▶️ caption

설명 또는 제목을 나타낸다

<table>
  <caption>제목</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

• caption은 항상 최상단에 위치해야 한다
• figure가 함께 사용될 경우 caption을 사용하지 않고, figurecaption을 사용하는 것이 좋다

4. 임베디드 요소

▶️ 이미지 유형

특정 확장자를 웹브라우저가 지원할때 이미지가 정상적으로 출력된다

종류	MIME	확장자	설명
JPEG	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	정지 이미지의 손실압축에 적합하다(저장될수록 손실되기 때문에 여러번 재저장하면 픽셀이 뭉개진다)
PNG	image/png	.png	원본이미지를 보다 정확하게 보여주거나 투명도 지원(무손실 압축, 파일크기가 비교적 크다)
GIF	image/gif	.gif	여러장으로 이루어져 애니메이션 표현이 가능(256개의 색을 표현가능)
WEBP	image/webp	.webp	구글이 만든 이미지 포멧으로 우수한 성능을 가지지만 사용할 수 있는 브라우저가 적다(파일크기가 작다)
SVG	image/svg+xml	.svg	벡터이미지, 확대해도 깨지지 않음, XML언어로 구성되어 있다(이미지 임의 수정이 가능)

SVG(벡터이미지)를 제외한 나머지는 레스터(laster)이미지이다 크게 확대했을경우 래스터이미지는 깨지지만 벡터이미지는 전혀 깨지지않음 (사용처가 다름)

▶️ img

이미지를 불러와서 삽입하는 태그(빈태그)

<img src="filePath" alt="대체텍스트" width="100" height="100"/>

속성	설명
src	필수적이며, 이미지의 경로를 지정(상대경로/절대경로)
alt	정상적으로 이미지를 불러오지 못했을 경우 출력하는 텍스트(스크린리더가 읽음 - 웹접근성!)
title	마우스를 올렸을때 텍스트가 나오도록 할 수 있다
width	이미지 픽셀기준으로 가로너비를 단위없이 숫자값을 입력(단독사용시 비율을 맞춤)
height	이미지 픽셀기준으로 세로높이를 단위없이 숫자값을 입력(단독사용시 비율을 맞춤)
srcset	* 하나의 경로만 지정하는 src속성과 다르게 srcset은 여러개의 경로를 지정해 반응형처럼 보여줄 수 있다 - 사용자의 환경에 맞춰 적절한 이미지를 로딩한다(작은 사이즈일수록 파일의 크기가 작음 → 효율적) - srcset은 IE는 지원하지 않는다 따라서 srcset과 함께 src를 지정해주는 것이 좋다 - 너비서술자(w): srcset="filepath1 300w", filepath2 450w, filepath3 600w" - 픽셀밀도서술자(x)도 존재하나 너비서술자가 사용하는데 편하다 - @media를 사용하는것을 권장 (개발자가 원하는 결과를 명시할 수 있다)
sizes	* 해당 범위에서의 크기를 지정할 수 있다 - min-width로 명시한다 - sizes="(min-width: 600px) 600px, (min-width: 450px) 450px, 300px"

▶️ video

비디오파일을 삽입하는 태그

<video src="filePath">failed loading video</video>

• 내부 텍스트는 비디오가 정상적으로 출력되지 않을때 출력된다
• src속성: 옵션이다 자식요소로 <source>로 지정해줄 수 있기 때문이다
• controls속성: boolean속성으로 기본적인 인터페이스가 제공됨(기본값 false)
• autoplay속성: boolean속성으로 자동재생되도록 한다 자동재생되지않는 경우가 있는데 비디오에 사운드가 포함된 경우 재동재생을 브라우저가 막는 경우가 있다(UX를 위해) → muted와 함께 사용
• muted속성: boolean속성으로 음소거된다
• poster속성: 기본적으로 첫 프레임이 섬네일로 출력 파일로 지정하는경우 해당 이미지가 출력된다

▶️ audio

비디오가 동일하게 사용되며 오디오파일을 삽입하는 태그

<audio>
  <source src="filePath1" type="audio/ogg; codecs=opus" />
  <source src="filePath2" type="audio/ogg; codecs=corbis" />
  <source src="filePath3" type="audio/ogg; codecs=mpeg" />
  정상적으로 출력되지 않을때 출력하는 텍스트
</audio>

• 여러개의 source를 지정해서 지원가능한 형식을 찾도록 할 수 있다

▶️ canvas

html로 마크업을 한 뒤 javascript를 이용해서 내부에 그림을 그린다

▶️ iframe

source를 프레임안에 띄워주는 태그

• 지도를 삽입할때 많이 사용한다

다음 포스팅에서 이어서 진행하겠습니다!