-
[Day 3] Text-level Sementics & Embedded ContentsTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 3. 31. 00:36SMALL
오늘은 제코베의 한재현 강사님께서 수업을 맡으셨다!
재현님께서 풀어주시는 썰들과 동기들의 드립들(멋사 프론트엔드스쿨 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
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
반응형'TIL > 멋쟁이사자처럼 FE스쿨 2기' 카테고리의 다른 글
[Day 6] 0404 회고 & HTML 그룹핑 복습 & Form (0) 2022.04.04 [Day 5] 빔캠프 이종찬 강사님과 함께하는 CSS 뽀시기 (0) 2022.04.01 [Day 4] Git/Github & HTML form (0) 2022.03.31 [Day 2] 웹 기본 상식과 HTML (1) 2022.03.29 [Day 1] OT & HTML/CSS로 이력서 만들기 (0) 2022.03.28