7. Text-level sementics 텍스트에 사용하는 태그들

<br>,<wbr>

• 줄바꿈을 위한 태그
• 시맨틱한 태그가 아니고 단순히 줄바꿈을 위한 태그
• 텍스트박스에서 한 줄로 표현이 안될 때만 사용(적용)
  • 화면 창을 줄였을 때 기준으로 줄넘김이 됨

<a href=”경로”>

• <a>(앵커) 구글을 만들어 냈다고 할 정도
  • 앵커를 이용해 사람들의 접속 데이터를 모아서 지금의 정확도가 높은 검색엔진이 탄생했다고 한다.
• href로 경로를 지정할 수 있다.
• sections, grouping content는 텍스트 레벨 요소의 자식으로 사용하지 않지만, 앵커 태그만 예외적으로 사용한다.
  • 문장 한에서 링크를 걸 일이 많기 때문
• 앵커 안에 앵커를 넣지 않는다.(자식으로 사용하지 않는다.)
• 앵커 안에 내용이 있어야 내용을 확인할 수 있다.
• target=”blank”를 이용하면 새창에 링크된 페이지를 띄울 수 있다.

<!--현재 페이지에서 https://www.naver.com로 이동-->
<a href="https://www.naver.com">click</a>
<!--새 페이지에서 https://www.naver.com로 이동-->
<a href="https://www.naver.com" target="_blank">click</a>  
<!--같은 폴더에 있는 index.html로 이동-->
<a href="./index.html">click</a>
<!--페이지 내에서 id가 three로 이동-->
<a href="#three">click</a> <!-- 해쉬 링크 -->
<!--같은 폴더에 있는 index.html 다운로드-->
<a href="./index.html" download>click</a>
<!-- 같은 폴더에 있는 hello.hwp로 이동-->
<a href="./hello.hwp">hwp click</a>
<!--같은 폴더에 있는 hello.hwp를 a.hwp라는 이름으로 다운로드-->
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<!-- 같은 폴더에 있는 hello.pdf로 이동-->
<a href="./hello.pdf">pdf click</a>
<!--같은 폴더에 있는 hello.hwp를 a.pdf라는 이름으로 다운로드-->
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

💡 internet explore에서는 다운로드 기능 미지원

• MDN 사이트를 참고하여 기능 지원을 알 수 있다.

MDN Web Docs

• WCS도 많이 사용하지만 공식이 아니기때문에 틀린 정보가 있으니 조심

W3Schools Free Online Web Tutorials

<b>, <strong>

• 굵은 글꼴로 표현하고 싶을 때 사용
• 컴퓨터가 이 부분이 중요하구나 하고 인식할 수 있음
• 중첩해서 사용은 하지 않는다.

<i>, <em>

• <i> 기울임 글꼴을 나타낼 때 사용
  • HTML5 이후부터는 전문용어나 문단에서 주로 사용된 언어나 다른 언어로 표현된 부분을 표현할 때 사용한다.
  • 웹 소설에서 등장인물의 생각이 표현된 부분, 모종의 이유로 내용과 분리해야 하는 부분에 사용한다.
• <em> 기울임 글꼴을 나타낼 때 사용
  • 강조의 의미 emphasis의 의미
  • 내용 상 중요한 내용을 강조한다.
  • 하지만 보통 강조를 할 때는 <strong>을 이용한다.
  • 어떤게 더 강조야?라고 한다면 페이지를 기획한 사람의 의도를 파악하면 된다.

<dfn>

• 현재 문맥에서 정의하고 있는 용어를 나타냄
• dfn의 가장 가까운 부모 태그가 <p>, <dt><dd> , <section>일 때 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주한다.

<abbr>

• 약자를 나타냄
• 보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다.
• <abbr title=”설명내용”></abbr>을 사용하면 hover시에 설명내용이 뜬다.
• 스크린리더는 내용을 읽을 수 없다.

<sup>, <sub>

• <sup>윗첨자, <sub>아래첨자
• 화학기호, 수학기호에서 사용한다.

<span>

• 별다른 의미 없이 영역을 묶는 용도로 사용한다.
• 시멘틱 태그가 아니다.
• div와 마찬가지로 최후의 수단으로 사용해야 한다.
  • 글씨를 묶을 땐 <span>
  • 요소를 묶을 땐 <div>

---

8.Embedded content 기능적인 요소들

<img>

• 이미지를 삽일할 때 사용
• 닫는 태그가 없다 = 자식 요소로 추가할 수가 없다.
• <img src=”사진경로” alt=”사진설명”>

  src(source)

  • 이미지의 위치(경로)를 작성하는 곳이다.

  • 큰따옴표 안에 들어가는 경로는 절대경로이거나 상대경로이어야 한다.
    - 절대경로
    - 상대경로

    alt(alternative text:객체 텍스트)

  • 이미지가 보이지 않을 때 나타나는 내용(텍스트)

  • 스크린 리더가 읽을 수 있다.

  • 모든 이미징에 설명이 필요할까? NO. 과도한 정보는 오히려 정보를 얻기에 불편할 수 있다.

  • 의미가 없는, 장식적인 요소는 사용하지 않는다.

  • alt값이 없는 이미지는 링크명을 읽는다. 그래서 alt=””로 alt값을 비워두면 읽지 않는다.

반응형 이미지를 위한 srcset

• 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 준다.

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

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

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

💡 개발자 화면 콘솔창에서 window.devicePixelRatio를 입력하면 화소 밀도를 알 수 있다.

• w서술자는 이미지 넓이를 알려준다.
• 디바이스가 알아서 최적의 컨텐츠를 보여준다.
• 300w == 300px, 600w == 600px, 700w == 700px
• 성능에 따라 로딩하는 것을 다르게 하기 위해서다.
• 크기가 큰 사진부터 작은사진 순서대로 작성해야 작동한다.

    <img
    <!--실제로 보여지는 크키-->
    width="200px" 
    <!--디바이스가 선택가능한 목록-->
    srcset="img/logo_1.png 300w,
            img/logo_2.png 600w,
            img/logo_3.png 700w"
    src="a.jpg"
    alt="test">

💡 internet explore에서는 작동하지 않는다.

• sizes 속성은 뷰포인트의 조건에 따라 이미지가 UI안에서 차지하게될 사이즈를 브라우저에 알려준다.
• html만으로도 미디어 반응형 처리를 할 수 있다.
  

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

<Picture>

• <source>요소와 <img>요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 이미지를 보여주는 요소이다
• 사용할 수 있는 포맷, 사용할 수 없는 포맷을 구분하는데 아주 중요한 역할을 한다.
• picture에 img가 없다면 화면에 나타나지 않는다.
  • 이미지를 보여주는 것은 <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>

media 속성

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

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

type 속성

• 이미지의 포맷타입을 브라우저에 알려줌

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/png">
</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% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.