[Day 3] Text-level Sementics & Embedded Contents

오늘은 제코베의 한재현 강사님께서 수업을 맡으셨다!

재현님께서 풀어주시는 썰들과 동기들의 드립들(멋사 프론트엔드스쿨 2기엔 프로드립러 분들이 많다...아주...)

이 많았어서 수업이 전혀 지루하지 않았다 ㅋㅋㅋ

 

일단 오늘 배운 것은 어제에 이어서 HTML 요소에 대해 배웠는데, Text-level Sementics와 Embedded Contents이다.

 

---

Text-level Sementics 

이란,

 

말 그대로 텍스트 수준의 요소에만 쓰이는 태그들을 의미한다.

이러한 태그들에는

 

<br>, <wbr> (줄바꿈)

<a href=""> (하이퍼텍스트 링크)

<b>, <strong> (폰트 굵기)

<i>, <em> (기울임)

<dfn> (용어 정의)

<abbr> (줄임말)

<sup>,<sub> (윗첨자, 아랫첨자)

<span> (div와 마찬가지로 최후의 수단)

 

이 있다.

 

이 중 익숙하지 않은 태그들로 아래와 같이 실습을 해보았다.

특히 a href의 같은 경우 이미지 삽입만 해봤는데 이렇게 다양하게 응용이 가능하다는 점이 신선했다.

<p style="white-space: nowrap;">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.<wbr> 
Ducimus asperiores commodi minus quasi magni 
</p>
<!-- 창의 width가 변경될 시 줄 바꿈 되는 부분에 <wbr> 삽입. css의 white-space: nowrap과 주로 사용 -->
<a href="https://www.naver.com" target="_blank">move</a>
<!--새창을 열어 이동-->

<a href="#one">ff</a> 
<!--페이지 내 이동 이동할 곳의 아이디 필요-->

<a href="index.html" download="a.hwp">download</a> 
<!--다운로드. 파일 이름 지정-->

<abbr title="world wide web">WWW</abbr>

 

 

---

Embedded Contents

 

말 그대로 '삽입된 콘텐츠'이다. 

즉 텍스트를 제외한 이미지나 오디오, 동영상 등이 해당된다.

 

1) <img>

: 이미지 삽입 시 사용하는 태그이다.

 

속성(프로퍼티) 종류

 

1-1) src

<img>태그를 사용하는 데 반드시 사용해야할 필수 속성이며, 브라우저에게 이미지 파일의 위치를 알려준다.

파일의 위치 경로는 상대경로거나 절대경로여야 한다.

 

1-2) alt

alt는 이미지가 보이지 않을 때 대신 보여지는 텍스트 값이다.

이 alt 값을 통해 스크린리더와 같은 접근성을 위한 프로그램에 정보 제공을 위해 사용되기도 하며,

SEO에 도움을 주기도 한다.

 <img src="img.jpg" alt="cute penguins"> 
 <!--설명이 필요없는 경우는 비워서 넣어주는게 좋음 -->

 

1-3) srcset

srcset을 통해서 기기의 폭(width)에 따라 다른 이미지를 표시할 수 있다.

x(픽셀 수), w(폭) 이 있는데,

주의할 점은 x와 w는 동시에 사용할 수 없다는 점이다.

<img
src = "img.png"
srcset = "
img1x.png 620w,
img2x.png 1000w,
img3x.png 3000w">

<!--w는 픽셀 수를 의미-->

<img
src = "img.png"
srcset = "
img1x.png 2x,
img2x.png 3x">
<!--x는 화소의 밀도를 의미-->

위의 정보를 바탕으로 브라우저는 어떤 이미지를 표시할지 선택한다.

 

1-4) sizes

위에 w는 브라우저가 화면의 폭을 가득 채우는 것에 초점을 둔다면,

sizes는 가득 채우는 것과 관련 없이 내가 원하는 폭의 사이즈로 설정이 가능하다!

(즉 sizes를 설정하지 않는 것은 자동적으로 sizes=100vw로 설정된 거나 다름없다)

<img
src = "img.jpg"
srcset="img1x.png 620w,
img2x.png 1000w,
img3x.png 3000w"
sizes="50vw">

그러면 만약 브라우저 폭이 1920px이라 가정할 때, sizes가 위처럼 50vw(화면의 반)이면, 1920/2 = 960 픽셀이기 때문에 브라우저가 960픽셀만 필요하다고 인식하기 때문에 3x가 아니라 2x 이미지를 선택한다. 

 

 

 

2) <picture>

picture는 <source>와 <img> 태그를 통해 각기 다른 디스플레이의 조건에 맞는 이미지를 보여준다.

<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>

2-1) media

media 속성의 값을 통해 조건에 맞는 이미지를 찾는다.

조건에 맞는 source 요소 안의 srcset 속성 값을 찾아 img태그의 src에 넣어 화면에 보여준다.

따라서 picture 태그를 쓸 때는 img태그가 반드시 있어야 한다!

 

2-2) type

이미지의 포맷 타입을 브라우저에게 알려준다.

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

위에서부터 차례대로 브라우저가 지원하는 포맷인지 확인하고, 만약 지원하지 않는 포맷이면

다음 source 요소로 넘어간다. 

위의 webp나 avif 와 같은 최신 포맷들은 지원 안되는 브라우저들이 있기 때문에

점진적 향상기법을 쓰는 것이 좋다.

 

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

 

 

 

3) <iframe>

iframe은 현재 HTML에서 또 다른 HTML 페이지를 삽입할 때 사용하는 태그이다.

src 속성에 다른 html 링크를 넣으면 된다.

<iframe width="894" height="503" src="https://www.youtube.com/embed/POJ5S2aUizA" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--유튜브는 동영상에서 우클릭을 하여 소스코드를 복사할 수 있다.-->
<iframe width="1000px" height="500px" src="http://paullab.co.kr/" frameborder="0"></iframe>
<iframe width="200px" height="200px" src="https://www.naver.come" frameborder="0"></iframe>
<!--네이버와 같은 대형 사이트는 보안 문제로 인해 뜨지 않고 에러가 난다.-->

 

4) <audio>

audio는 음악 컨텐츠를 재생하는 태그이다. src를 이용해 오디오 파일의 위치를 브라우저에게 알려준다.

<audio controls autoplay loop class="bgm">
     <source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3" >
</audio>

4-1) controls : 오디오를 제어할 수 있는 컨트롤러 생성

4-2) autoplay: 오디오를 자동으로 재생(크롬에선 정책상 autoplay가 안된다.)

4-3) loop: 오디오 반복

 

5) <video>

video도 audio와 비슷하다. 다만 type을 mp4, webm 등 지정할 수 있다.

 

<video controls width="250">

        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                type="video/webm">
    
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
                type="video/mp4">

</video>
<!--출처 mdn-->

 

+) html 유효성 검사할 때 유용한 사이트

https://validator.w3.org/#validate_by_input

The W3C Markup Validation Service