HTML Text-level semantics

한호수 (The Lake)·2022년 9월 6일

Semantics html

HTML Text-level semantics에 관하여

텍스트 레벨 요소의 특징
1. 요소안의 컨텐츠 크기만큼만 영역을 점유한다.
2. 자식으로 Section, Grouping Content를 배치할 수 없다.

` , `

줄바꿈 요소들이다.
은 브라우저에 한줄로 표시할 수 없을때 해당 영역에서 줄바꿈이 일어나는 기능이다.
CSS word-break 브라우저에 한줄로 표시할 수 없을때 단어 단위 줄바꿈 설정 기본 설정은 nomal이며 한국어,일본어,중국어는 기본값이 break-all로 되어있다.
CSS white-space 속성은 요소가 공백 문자를 처리하는 방법이다.

`<a href="경로" >`

HTML은 하이퍼 텍스트를 엥커<a> Tag로 연결되어있는 거대한 책이다.
중요 속성인 href는 Hypertext reference이다.
<a>의 href 속성을 자바스크립트로 줄 수 있지만 웹접근성에 위배된다.
-일단 href 속성이 없으면 문법오류
-검색엔진들은 자바스크립트를 검사하지 않는다.

`,`

 Tag 는 의미가 없다. 단순 디자인적으로 굵은 글씨를 표현할때 사용한다.
 Tag는 굵은 글꼴에 의미적으로 내용을 강조할때 사용한다.
 Tag를 더 강조하기 위해서 중첩해서 사용할때도 있다.

`,`

 Tag는 와 달리 HTML5에 오면서 의미를 가지게 되었다.
문단에서 주 언어와 다른 언어로 표현된 부분(주언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용됨
태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있다.(Strong과 비교했을때 약한 강조이다.)

`<dfn>`

define을 의미하는 요소
현재 문맥에서 정의하고 있는 용어를 나타낸다.
dl을 사용할정도로 목록이 아닐때, 한 두단어에 대한 설명을 할때, 문서에서 최초로 나왔을 때만 사용한다.

`<abbr>`

준말, 약자를 나타내고 싶을 때 사용한다. 보통은 홀로 쓰이고 dfn태그로 감싸주기도 한다.
title 속성이 있으며 , 준말에 대한 설명 혹은 확장 형태를 넣어 사용한다.

<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn><abbr title="World Wide Web">WWW</abbr></dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

`, `

 태그는 윗첨자,  태그는 아랫첨자를 나타낸다.

``

별다른 의미가 없는 inline Tag
여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용한다.
div와 마찬가지로 최후의 수단으로 사용하는게 좋다.

HTML Embedded content 관하여

`<img>`

웹접근성을 위해 alt 속성을 자세하게 적어주는것 필수
srcset 속성을 사용하면 화면 크기 대비 교체할 이미지를 설정할 수 있다.

<img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x"
src="a.png"
alt="test">

개발자도구 콘솔창에서 window.devicePixelRatio 로 현재 화면대비에 대해 확인할 수 있다.

`<picture>`

<picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소이다.

<picture>
    <source srcset="big_size.jpeg" media="(min-width:960px)"> <!-- 최소 960px이상일때 -->
    <source srcset="small_size.jpeg" media="(min-width:620px)"><!-- 최소 620px이상일때 -->
    <img src="very_small_size.jpeg" alt="도시사진"><!-- 기본 출력  -->
</picture>

`<iframe>`

iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용
따로 값을 설정하지 않는다면 height는 150px, width는 300px을 기본값

`<audio>`

<audio> 는 음악 컨텐츠를 재생하기 위한 태그

<audio src="폴더/파일명" controls autoplay loop ></audio>

`<video>`

<video controls poster="thumbnail.jpeg" preload="auto" width="450" height="300">
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogv" type="video/ogg">
	<source src="video.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="video">
</video>

preload : 좋은 사용자 경험을 위해 고려해 볼 수 있는 속성 (기본 값은 브라우저마다 다르다.)
- none : 비디오 파일을 미리 로딩하지 않습니다.페이지 로딩 속도와 트래픽 절약을 위해
- metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져온다.
- auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비
poster : 영상이 로딩 중 일 때 대신해서 화면에 보여줄 이미지를 지정
<track> : <audio> 혹은 <video> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용