반응형
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 등을 불러올 때 사용
반응형
