Text-level semantics

<br>, <wbr>

<br> : 줄바꿈을 위한 태그
<wbr> : 텍스트박스에서 한줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것

<a href="">

<a> : 하이퍼텍스트 즉, 링크를 만들 때 사용 href 속성으로 경로 지정!
<a href="#three">click</a> <!-- 해쉬 링크 --> 페이지 안에서 이동할때!
html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는것이 허용됨

<b>, <strong>

<b> : 굵은 글꼴 표현, 더이상 사용 X, CSS 나오기 이전에 있던 태그
<strong> : 굵은 글꼴에 중요도 더해 강조! 중첩사용 가능

<i>, <em>

<i> : 기울임 글꼴, 문단에서 주언어와 다른언어로 표현된 부분 (주언어가 한글에서 갑자기 영어 나올때!)
<em> : 기울임 글꼴 + 강조

<dfn>

<dfn> : 현재 문맥에서 정의하고 있는 용어

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

<abbr>

<abbr> : 준말, 약자 나타냄(보통은 홀로 쓰이고 dfn 태그로 감싸주기도 함!)

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

<sup>, <sub>

<sup> : 윗첨자
<sub> : 아랫첨자
화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용

<span>

<span> : 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도, 여러ㅓ 요소를 묶어 컨트롤 하기 위한 영역(id, class), div 같은 존재! 최후의 수단!

Embedded content

<img>

<img> : html 내 이미지 삽입 시 사용하는 태그

src (source)

<img>는 src 속성이 필수!
src 속성은 브라우저에게 이미지 파일의 위치 및 파일명을 알려줌

alt (alternative text)

이미지가 보이지 않을 때, alt 속성에 적힌 텍스트를 이미지 대신 보여줌!
스크린 리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도 SEO에 도움을 주기도 함
Q. 모든 이미지에 설명이 필요할까 ?
A. No 너무 많은 설명은 오히려 불편할 수 있음. 필요한 정보를 제공하는게 중요.

<img src="img/a.jpg">
스크린리더에서 파일명을 읽음!

<img src="img/a.jpg" alt="">
alt=”” 으로 넣어주면 파일명을 읽지않음

반응형 이미지를 위한 srcset

srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다.
srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성이다.

x서술자, w서술자, sizes속성

• x서술자 : 화소의 밀도 (pixel density)를 나타냄. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려준다.

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

💡 Pixel density
동일한 면적에 들어가는 화소의 수를 의미한다. 화소의 갯수가 많을수록 더 높은 해상도의 기기임을 알 수 있다.
개발자 화면의 콘솔창에서 window.devicePixelRatio 명령어를 입력해보기!

• w서술자 : 원본 이미지의 넓이를 브라우저에게 알려줌 (px이 아닌 w로 표기!!)

<img
width="200px"
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
src="a.png"
alt="test">

💡 w서술자와 x서술자는 동시에 사용할 수 없다. 또한 src 속성을 유지하는 것은 필수이다.
srcset 을 사용할 수 없는 브라우저(Internet Explorer)를 대비해 사용하는 이미지이다.

• sizes : 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려준다.

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.png"
alt="test">

💡 sizes 속성을 사용할 때 주의할 점은 CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있다는 점 이다. (CSS 스타일이 sizes 속성에 우선함) 협업할 때는 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유하자!

<picture>

<picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소다.
<img> 요소의 srcset 이 화면에 따른 이미지의 크기를 조절한다면 <picture> 요소는 이미지 포맷 자체를 변경 할 수 있다.

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

media

<picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾게 된다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 <img> 태그의 src 에 넣어 화면에 보여주게된다. 이러한 구조로 작동하기 때문에 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다는 점에 주의!

<picture> 와 <source> 요소 자체는 이미지를 표현하지 않는다.

type

이미지의 포맷 타입을 브라우저에게 알림

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>

위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음 <source> 요소로 넘어감
만약 모든 <source> 요소의 이미지 사용이 불가능하면 최후에 <img> 요소의 이미지를 랜더링 한다.
때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋다.

[기술면접 준비!]

💡 점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법

💡 이미지 포맷의 종류
GIF(Graphics Interchange Format) :
256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듬. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능함. 애니메이션 처리가 가능함.

JPG/JPEG (Joint Photographic Expert Group image):
매우 화소가 높고, 용량도 적지만 투명처리가 불가능함.

PNG (Portable Network Graphics) :
왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 크다.

SVG (Scalable Vector Graphics) :
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.

WebP (Web Picture Format) :
압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷이다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷!!.

AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷. 아직 지원하지 않는 브라우저가 많음에 주의해야한다!.

실습 : 화면 크기에따라 피자 이미지를 다른 이미지로 바꾸기!

<body>
    <h1>피자 만들기</h1>

    <picture>
        <source srcset="images/pizza3.jpeg" media="(min-width:960px)">
        <source srcset="images/pizza2.jpeg" media="(min-width:620px)">
        <img src="images/pizza3.jpeg" alt="pizza">
    </picture>
    <ol>
        <li>양파와 피망, 버섯을 채 썰어 준비해주세요</li>
        <li>빵에 토마토소스를 바르고 피망, 버섯, 베이컨 치즈 순으로 넉넉히 토핑해 주세요</li>
        <li>예열된 오븐에 넣고 230도 10~15분간 구워주세요</li>
    </ol>
<p>참고 : <a style="text-decoration: none; color: black;" href="http://xn--9p4b23hbxe6vk6ob.com/">http://xn--9p4b23hbxe6vk6ob.com/</a></p>

</body>

오늘의 과제!

예제 페이지들의 마크업 구조 그려보기

끝!

퍼블리싱 연습을 많이해서 손에 빨리 익혀야겠다!
과제로 준 페이지 퍼블리싱까지 끝내기!