TIL - Text-level element

📖 Text-level semantics

• text level
  - inline level (콘텐츠 요소 크기)
• grouping content
  - block level

1. <br>,<wbr>

• <br>
  줄 바꿈 태그
  화이트 스페이스를 처리하는 방법 (공백)
  <p>태그 안에 있는 문장을 브라우저에서 렌더링 할 때
  
  
• <wbr>
  텍스트 박스에서 한 줄로 모두 표시가 안될 때 줄바꿈하는 태그
  즉, 뷰포트보다 문장의 길이가 작으면 한줄에 나오지만
  뷰포트가 문장의 길이보다 작으면 문장이 나뉨
  잘 사용하지 않지만 반응형 디자인할 때 사용됨
  예외) cjk 언어들은 한글자씩 떨어짐

2.<a href="경로">

• html 문법상 sections, grouping content 요소들은
  텍스트 레벨 요소의 자식으로 사용되지 않지만,
  앵커 태그만 예외적으로 sections, grouping content 요소를
  자식으로 하는 것 허용
  
  
• 또한 <a> 요소안의 자식으로는 <a> 요소나 <button>과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요 (어느 타겟으로 이동해야 될지 모르기 때문)

<!--네이버로 이동-->
<a href="https://www.naver.com">click</a>

<!--새창 열림-->
<a href="https://www.naver.com" target="_blank">click</a>  

<!--주소가 아닌 html파일 로딩-->
<a href="./index.html">click</a>

<!--다른 페이지가 아닌 페이지 내에서의 이동 like 목차 이동-->
<a href="#three">click</a> <!-- 해쉬 링크 -->

<!--해당하는 것을 다운로드할 수 있도록 하는 앵커 태그 -->
<section id="three">/ id만 사용할 수 있는 해쉬링크 
<a href="./index.html" download>click</a>  
  
<!--다운로드없이 열리는 것 -->  
<a href="./hello.hwp">hwp click</a>
  
<!--다운로드 속성에 속성 값까지 있음 -> 파일 이름을 a라고 -->  
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
  
<a href="./hello.pdf">pdf click</a>

<a href="./hello.pdf" download="a.pdf">pdf download click</a>

☠️ 다운로드 속성은 인터넷 익스프로러에서 지원하지 않음

3. <b>,<strong>

• <b>
  시맨틱하지 않은 태그
  
  
• <strong>
  중요함을 강조할 때 사용

4. <i>,<em>

• <i>
  - 기울임 끌꼴로 의미없었지만 html5 이후
  전문 용어, 문단에서 주 언어와 다른 언어로 된 부분 표현
  
  
• <em>
  - 강조 의미가진 기울임 글꼴 emphasize
  - <strong>이 <em>보다 강한 강조 !
  - 보통 강조를 위해선 <strong> 사용

5. <dfn>

• <dfn> : define
  - 현재 문맥에서 정의하고 있는 용어

<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn>WWW</dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>
<!--dfn을 감싸고 있는 dd는 dfn의 정의에 대한 설명-->

6. <abbr>

• 준말, 약자 나타내고 싶을 때 사용

<abbr title="world wide web">www<abbr>

☠️ alt는 이미지 태그 안에서만 사용됨

7. <sup>,<sub>

• <sup> : 윗첨자
• <sub> : 아랫첨자
  • 작은 글자를 표현하는 용도로 사용하지 않음
  • 화학기호, 수학공식 등에서 사용

    <p>H<sub>2</sub>0</p>
    <p>x<sup>2</sup>=4</p>

    H20

    x2=4

8. <span>

• 별 다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용
• 최후 수단으로 사용 !
  • 글씨를 묶는다면 <span>
  • 요소들을 묶는다면 <div> 사용

❓

picture 와 source 태그를 사용하는 것과 img 태그와 css media query를 쓰는 것의 차이?

단순히 방법의 차이지 기능적인 차이 없다.
현업에선 media query를 사용 (srcset 나온지 얼마 안됬기 때문)