3일차(2022.03.30)
📌 HTML 태그에 대하여.. 반성하기!
지금까지 시멘틱 태그들의 존재는 알았지만 '눈에 보이기만하면 똑같겠지..' 라는 생각으로 div와 span으로만 코드를 작성해왔다.. 오늘 강의를 듣고 많은 반성중.. 다시 한번 간과했던 부분에 대해 정리하고 상황에 알맞게 사용하도록 고민을 많이 해봐야겠다!
<div>,<span>태그는 대용할 태그가 없을 경우 사용!- heading 요소들은 계층구조를 쉽게 파악할 수 있도록 한다! 따라서 특별한 이유없이 heading 레벨을 갑자기 뛰어넘도록 작성하는 것은 지양!
<nav>일반적으로 메인 네비게이션 역할의 링크 묶음에 사용!<adress>가장 가까운 부모<article>이나<body>요소의 연락처 정보를 나타낸다 !
<address>
<a href="https://www.hs.com">홈페이지</a><br>
<a href="https://www.hs.com">메일주소</a><br>
오시는 길 : <br>
대전광역시
</address>📌 Text-level semantics
😊 <a>
<!-- target="_blank" 속성은 새창에서 열기 -->
<a href="https://www.naver.com" target="_blank">네이버</a>
<a href="001.html">001.html</a>
<a href="#one">click1</a>
<a href="#two">click2</a>
<a href="#three">click3</a>
<!-- #은 해쉬링크 페이지 안에서의 이동을 할때 사용! 목차느낌 -->
<a href="3월 29일/002.html" download>DownLoad</a>
<a href="3월 29일/002.html" download="파일이름">파일이름정해서DownLoad</a>
<section id="one">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet excepturi nulla sapiente id repudiandae odit cumque optio incidunt dolores veritatis pariatur facere esse harum adipisci nam, repellat perspiciatis illum dolorum!
</section>
😊 <dfn>
현재 문맥에서 정의하고 있는 용어를 나타냅니다. dfn의 가장 가까운 부모가 <p> 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주합니다. 문서에서 최초로 나타났을 때 사용합니다.
<dl>
<dt>WWW</dt>
<dd>
<dfn>WWW</dfn>는
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
- 위키백과
</dd>
</dl>😊 <abbr>
준말, 약자를 나타내고 싶을 때 사용합니다. 보통은 홀로 쓰이고 dfn 태그로 감싸주기도 합니다.
<dl>
<dt>WWW</dt>
<dd>
<dfn><abbr title="World Wide Web">WWW</abbr></dfn>는
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
- 위키백과
</dd>
</dl>😊 <sup>, <sub>
<sup>태그는 윗첨자, <sub>태그는 아랫첨자를 나타냅니다.
<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>📌 Embedded Content
😊 <img>
-
alt속성은 이미지가 보이지 않을 때 이미지 대신 텍스트를 보여줍니다!
또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함 으로써 SEO(Search Engine Optimization) 에 도움을 주기도 합니다! -
반응형 이미지를 위한 srcset
srcset속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있습니다.srcset속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성입니다.srcset은 큰것부터 작성해야 합니다!-
x서술자
x서술자는 화소의 밀도를 나타냅니다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줍니다.
<img width="200px" srcset="img/logo_1.png 2x, img/logo_2.png 3x" src="a.png" alt="test"> -
w서술자, sizes
w서술자는 원본 이미지의 넓이가 몇 px인지 알려줍니다! (x서술자와 동시사용 불가!)
sizes속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에게 알려줍니다!
웹표준을 준수하기 위해서srcset속성 사용하면sizes속성도 반드시 명시되야 합니다!<img srcset="../images/500.png 500w, ../images/300.png 300w, ../images/150.png 150w" sizes="(min-width:960px) 500px, (min-width:640px) 300px, 900px" src="../images/150.png" alt="rabbit">
-
-
picture
<picture>요소는<source>요소와<img>요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소입니다.
<img>의srcset이 화면에 따른 이미지의 크기를 조절한다면<picture>요소는 이미지 포맷 자체를 변경 가능합니다.<picture> <source srcset="../images/500.png" media="(min-width:960px)"> <source srcset="../images/flower.jpg" media="(min-width:640px)"> <img src="../images/150.png" alt="래빗!"> </picture>-
media속성의 값을 통해 조건에 알맞는 이미지를 찾은후 해당하는srcset속성 값을 찾아img태그의src에 넣어 화면에 보여주게 됩니다!
img요소는 무조건 있어야합니다! -
type속성은 이미지의 포맷 타입을 브라우저에게 알려줍니다!
위에서부터 차례대로 탐색하여 지원하지 않는 포맷이라고 판단되면 다음source요소로 넘어갑니다!<picture> <source srcset="babies.webp" type="image/webp"> <source srcset="babies.avif" type="image/avif"> <img src="babies.jpeg" alt="귀여운 아기 팽귄들"> </picture>🐣 점진적 향상기법
WebP나 AVIF와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스 브라우징을 위해
<picture>요소와 함께 사용 하는것이 좋습니다.기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고! 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공하는 것을 점진적 향상 기법이라고 합니다!
-
