[HTML 개념잡기] HTML의 요소(4)

4. HTML의 요소(4)

 

5) 목록과 표

✔ 목록 - <ul>, <ol>, <li>

<ul>

unordered list, 순서가 없는 목록

• 숫자 없이 점 등으로 나타냄

<ol>

ordered list, 순서가 있는 목록

• 단계적으로 나타냄
• type 속성을 사용함
  a, b, c
  A, B, C
  로마자(대, 소문자)
  ...
• start : 항목을 셀 때 시작할 수
• reversed : 내부에 지정한 항목이 역순으로 배열된 것인지 나타냄

<li>

list item, 단일 아이템을 표현하는 태그

• 중첩 가능

ol 태그 내에서 list에 value 값을 사용하면 해당 행부터 적용됨

 

 

✔ 목록 - <dl>, <dt>, <dd>

• <dl>은 <dt>로 표기한 용어와 <dd>로 표기한 설명 그룹의 목록을 감싸 설명 목록을 생성함
• 용어 사전 구현, 메타데이터(키-값 쌍 목록)을 표시할 때 사용
• dl 안에 dt, dd를 넣을 수 있으며 형제로 div 사용은 안됨

 

 

✔ 표 - <table>, <tr>, <th>, <td>

<table>요소는 행과 열로 이루어진 표를 나타낸다.

• HTML5에선 시멘틱 태그가 많아 table을 사용해 레이아웃을 만드는 것을 지양한다.
• border 속성은 CSS에서 다루는 추세
• tr : 행
• th(table head) : 열을 대표하는 총칭
• td : 열
• scope="col" : 열을 대표함을 알려줌
• scope="row" : 행을 대표함을 알려줌
• colspan="n" : n개의 column을 차지하는 속성

 

 

✔ 표 - <thead>, <tbody>, <tfoot>

<table> 요소도 마찬가지로 마크업이 가능하다.

• tbody는 여러 개를 가질 수 있다.(대분류)

 

 

✔ 표 - <caption>

<caption>요소는 표의 설명 또는 제목을 나타낸다.

• table 요소의 첫 번째 자식으로 사용해야 함
• 별도의 스타일링을 하지 않으면 표 제일 위 가운데에 정렬됨
• <caption>요소를 가진 <table>요소가 만약 <figure>요소의 유일한 자식인 경우, <figurecaption>사용

 

6) 임베디드 요소

✔ img - src

<img>요소는 문서에 이미지를 넣음

• <img>안엔 텍스트를 넣을 수 없음
• src 특성은 필수이며 이미지로의 경로를 지정함
• 절대경로와 상대경로를 지정 가능함
  절대 경로 : 이미지 자체의 주소 (ex. 인터넷에서 퍼오는 등)
  상대 경로 : 현재 위치에서 이미지가 있는 경로를 나타낼 때 사용함

 

 

✔ img - alt, width, height

• alt : 이미지의 텍스트 설명이며 필수는 아니지만 접근성 차원에서 매우 유용
  • 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시 할 수 없을 때도 사용
  • title 특성을 사용하면 이미지 위에 마우스를 올려둘 때 작성한 내용이 보임
• width : 이미지의 가로 길이 설정. 세로 길이도 자동으로 변함
• height : 따로 이미지의 세로 길이를 주고 싶은 경우 사용

 

 

✔ 웹에서 사용하는 이미지 유형

HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않음. 각 브라우저마다 다름

• JPEG : 정지 이미지의 손실 압축에 적합함. 가장 사용도가 높음
• PNG : 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 선호함
• GIF : 열장의 이미지로 이루어진 애니메이션 표현 가능
• WEBP : 구글이 만든 이미지 포맷. 품질, 압축률 등이 훨씬 우수하나 지원 브라우저가 제한적임
• SVG : 다양한 크기로 정확하게 그려야하는 아이콘, 다이어그램 등에 사용됨

SVG는 벡터 이미지, 나머지는 레스터 이미지임. 벡터는 확대 시 깨지지 않음

 

 

✔ 반응형 이미지 - srcset

사용자 에이전트가 사용할 수 있는 이미지 소스의 후보.

• 화면에 따라 이미지 크기 지정 가능
• 쉼표로 구분하는 한 개 이상의 문자열 목록
• 각각의 문자열은 다음 구성요소로 이루어짐
  • 이미지 URL
  • 선택적으로, 공백과 함께 뒤를 잇는...
    너비 서술자 : 픽셀
    픽셀 밀도 서술자

 

 

✔ 반응형 이미지 - sizes

소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열.

• 각각의 문자열은 다음 구성 요소로 이루어짐
  미디어 조건. 마지막 항목에선 생략해야 함
  소스 크기 값
• 미디어 조건은 이미지의 속성이 아니라 viewport 속성을 가리킴
• 소스 크기는 의도한 이미지 표시 크기를 지정함

 

 

✔ <video>

<video>요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다.

• 오디오 콘텐츠에도 사용할 수 있으나 <audio>요소가 UX에 더 적합함
• <video>는 여닫는 태그가 있음
• src 속성이 선택사항임. source 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있음
• controls : 소리 조절, 동영상 탐색, 일시정지, 재시작 등을 할 수 있는 컨트롤러 제공
• autoplay : 자동으로 영상 재생. UX상 바로 소리가 재생되는 걸 막기 위해 muted 사용
• loop : 동영상 반복
• poster : 동영상 재생 전까지 출력 되는 포스터 프레임. 명시되지 않을 경우 첫 프레임 출력

 

 

✔ <audio>

<audio>요소는 문서에 소리 콘텐츠를 포함할 때 사용한다.

• <video>요소와 마찬가지로 src 속성이 선택사항
• source 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있음
• autoplay : 자동으로 영상 재생. UX상 바로 소리가 재생되는 걸 막기 위해 muted 사용

source가 여러 개일 경우 지원가능한 파일 순으로 재생함. 전부 안될 시를 고려 해 message 넣기

 

 

✔ <canvas>, <iframe>

<canvas> : 그래픽 캔버스 요소

캔버스 스트립팅 API 또는 WebGL API와 함께 사용해 그랙픽과 애니메이션을 그릴 수 있다.

• HTML에서 가능한 것은 markup 정도
• JavaScript에서 그림을 그림

 

<iframe> : 인라인 프레임 요소

중첩 브라우징 맥락을 나타내는 요소

• 현재 문서 안에 다른 HTML 페이지를 삽입함
• API 등을 불러올 때 사용