0330 TIL

Text level semantics , Embedded content

• <wbr> :
  영어는 단어단위로 떨어지는데 한글은 글자단위로 떨어진다(한중일) 한글은 word-break:keep all 을 줘야 단어 단위로 떨어진다.

• <a> : 하이퍼 텍스트 , 링크를 만들 때 사용
  JS로도 경로를 지정할 수 있지만 웹 접근성에 위배됨으로 href속성을 사용하는게 좋다.
  a 안에 a, button 을 자식으로 절대 두지 않는다
  (어느 요소를 타겟으로 이동해야 할 지 모르기 때문)

• <strong> : 태그는 중첩 사용할 수 있지만 강한 강조를 사용할 땐 heading 태그를 쓰는게 나을 수 있다. <b><em> 보다 더 강조한다는 의미로 쓰임

• <i> : 기울임 글꼴을 나타내는데 HTML5에서는 전문용어, 주 언어와 다른언어, 글에서 주위와 구분해야 하는 부분을 표현하기 위해 사용한다.

• <em> : i태그와 같은데 강조의 의미가 있다.

• <dfn> : 현재 문맥에서 정의하고 있는 용어 , <p><dt><dd><section> 요소일 경우 그 컨텐츠를 <dfn> 에 대한 설명으로 간주한다

• <abbr> : 준말, 약자를 나타내고 싶을 때 사용. 보통 홀로 쓰이거나 <dfn> 으로 감쌈

• <sup><sub> : 윗첨자 , 아랫첨자 첨자 기호를 이용해야 하는 곳에서만 사용

• <span> : 의미없이 영역을 묶는 용도 , <div>와 마찬가지로 최후 수단으로 사용
  웹 접근성의 일환이지만 페이지구현할 때 markup 에 신경쓰면 장애인분들에 도움이 된다.

• <img> 태그

• alt : 속성 이미지가 보이지 않을 때 alt 속성 텍스트를 보여줌, 스크린리더 같은 접근성을 위한 프로그램에 정보를 제공하고 SEO에 도움을 주기도 함.
  
  alt 값이 없는 이미지는 스크린리더에서 파일명을 읽어서 "" 라고 비워두자

• srcset : 여러 해상도에 대응하여 다양한 크기를 가지는 동일 이미지를 2개 이상 사용할 때 사용한다. 사용할 때 크기가 큰 파일부터 사용해야 정상작동한다.

img 태그에는 type 속성이 들어가면 안된다.

• x서술자 , w서술자는 동시에 사용할 수 없다.

• sizes 속성은 뷰포트의 조건에 따라 이미지가 UI 안에서 차지하게 될 사이즈를 정한다.
  
  없다고 해도 srcset 자체는 잘 동작하는데 웹표준을 준수하기 위해선 사용하도록 한다
  
  CSS를 통한 이미지 사이즈 컨트롤 방법과 충돌 할 수 있는점을 주의하자(CSS우선)
  
  동료간 소통이 중요

• <picture> srcset 이 사이즈를 조절한다면 picture 은 이미지 포맷 자체를 변경 할 수 있다.

• <sourece> audio , video , picture 요소에서 사용할 수 있는 다중 미디어 자원을 정의할 때 사용한다.

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

사진과 같이 점진적 향상기법으로 크로스 브라우징을 위해 picture 와 쓰인다.

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

• <iframe> : 속성중에 autoplay 는 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있어서 항상 mute 속성과 함께 사용되어야 한다.
  모바일환경에선 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고
  접근성 측면에서 좋지 않기 때문(시각 장애인 분들은 깜짝놀랄 수 있다.)
  <audio>,<video>에도 동일하게 적용

짧은소감

웹표준, 접근성에 대해서 실무 포함해서 중요한 점을 배웠고 전에 공부할 땐 잘 모르는 관련 태그들을 배웠다.
IMG 반응형 조절은 CSS로만 하는줄 알았는데 HTML 태그로도 가능했고 각 태그마다 세세한 부분을 해워서 얻어가는게 많았다.