[HTML] 4. 텍스트 요소

in HTML on Html



4. 텍스트 요소

1. 제목 - h1 ~ h6

<h1> ~ <h2>

  • heading
  • h1이 가장 크다
  • 사용자 에이전트(웹브라우저)가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표(목차)를 만들 수 있다.
  • 제목 단계를 건너띄지 말자 (순차적으로 감소하게끔)
  • 글씨 크기를 위해 해당 태그 사용하지 말기 (웹브라우저마다 스타일이 다르다) > css 통해서 하기
  • 페이지 당 하나의 h1 사용하기 (SEO 에도 적합)

권장하는 사용법

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>
  • 제목은 h 태그
  • 본문은 p 태그



2. 본문 - p

  • 문단(paragraph)
  • 하나의 문단을 의미한다.
  • 블록 레벨 요소
<p>첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.</p>
  • html 는 중복된 space도 하나만 인식한다.
  • 블록레벨이므로 width를 모두 차지한다.
  • 접근성 고려사항은 지키지 않는다고 에러가 나진 않지만 웹 표준성을 위해 지키도록 하자
  • 여백을 위해 빈 <p>태그를 사용하지 말아라



3. 본문 - br

  • break의 br
  • 개행 문자
  • 엔터를 대신 쳐준다
  • 빈요소이므로 <br> <br/>
  • 문단과 문단사이에 여백을 많이 주기 위해 br 많이 주는 것 금지!
  • 문단 구분은 br이 아닌 p 사용하기



4. 본문 - blockquote, q

  • 인용을 위한 목적의 태그
  • blockquote : 블록 요소
  • q : 인라인 요소
  • p 태그 내에 blockquote 사용하면 안됨! (p는 내부에 블록요소 들어오면 알아서 닫힌다)
  • 특성 : cite - 인용문의 출처를 알려주기 위한 url 주소 (속성이므로 사용자의 눈에 안보임)



5. 본문 - pre

  • preformated
  • 미리 서식을 지정한 텍스트
  • pre 태그 안에 들어간 내용은 그 자체가 완성본이다 (작성한 그대로 출력)
  • 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지한다 (A와 I의 폭이 동일하다)
<pre>
        _______________________
      < 나는 이 분야의 전문가다. >
        -----------------------
               \   ^__^
                \  (oo)\_______
                   (__)\       )\/\
                       ||----w |
                       ||     ||
</pre>



6. 본문 - figure, figcaption

  • 독립적인 콘텐츠를 표현한다.
  • 보통 figcaption 요소를 사용해 설명을 붙인다
  • figure 태그로 감싸주면서 공통된 내용임을 알려줄 수 있다!
<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>



7. 본문 - hr

  • horizon
  • 수평선
  • 빈 요소이다
  • 사라진 속성들이 많은데 웹표준을 지키고 싶다면 사용을 자제하자!



8. 본문 - abbr, address, cite, bdo

abbr

  • 약어 라는 뜻의 abbreviation
  • 마우스 오버시 내용 나온다
  • title이란 속성은 global 이어서 다른 태그에도 사용 가능하지만 이 경우 의미가 조금 더 특별해진다
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your</p>


address

  • 주소를 나타낼 때 사용한다
  • 크롬에서는 기울린체로 나타나지만 브라우저마다 다름으로 해당 스타일을 주기 위해서는 사용하면 안된다
<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>


cite

  • 정확한 출처를 나타내기 위해 사용한다.
  • blockquote 속성의 cite와는 가시적으로 보이냐 안보이냐의 차이


bdo : bidirectional override

  • 텍스트를 반대방향으로 출력함
  • right to left
<p>Looks like this in Hebrew: <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span></p>



9. 포매팅 - b, strong

  • 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용. 다른 내용보다 더 의미를 갖게 된다!
  • b 와 strong 은 결과적으로 동일하다 (굵게 만들어줌)
  • b : 요약 키워드, 리뷰의 제품명 등 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분
  • b는 특정 부분 강조이기 때문에 전체 문단을 b 태그로 감싸는 것은 안된다!
  • strong : 높은 중요도 요소
  • 스크린 리더가 strong은 딱딱 띄어서 말한대..ㅋㅋ



10. 포매팅 - i, em

  • italic 의 i 로 기울임꼴로 표시된다
  • 둘의 output은 같다
  • 목적은 전혀 다르다!
  • i : 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분
  • em : 텍스트의 강세 (더 강조!)
  • 이 또한 스크린 리더가 em 을 더 강조해서 읽는다



11. 포매팅 - mark, small, sup, sub

  • mark : 하이라이팅 - 현재 맥락에 관련이 깊거나 중요해 표시하는 부분
  • samll : 덧붙이는 글이나, 저작권과 법류 표기 등의 작은 텍스트
  • sup : 윗 첨자 (제곱)
  • sub : 아래 첨자 (각주, 화학식, 수식)



12. 포매팅 - del, ins, code, kbd

  • del : 문서에서 제거된 텍스트의 범위를 나타낸다 (가운데 줄)
  • ins : 문서에서 추가된 텍스트의 범위를 나타낸다 (밑줄)
  • 위의 두 태그는 cite, datetime 을 속성으로 갖는다.
  • code : 짧은 코드 조각을 나타내는 스타일, 고정폭 / 인라인 요소 (pre는 블록라인)
  • kbd : 키보드 입력 요소 <kbd>Crtl</kbd>



13. a 태그와 하이퍼링크

  • anchor (닻) : 다른 곳으로 이동시킨다
  • <a href="https://www.naver.com">naver</a>

    목적지 속성 : href

  • 방문기록을 기준으로 방문여부를 판단한다
  • 링크는 http 기반 url일 필요는 없고, 부라우저가 지원하는 모든 Url 스킴 사용 가능하다
// 절대경로
<a href="https://www.naver.com">naver</a>

// 상대경로
<a href="../../jorang/a.html">naver</a>

// 이메일,전화
<a href="mailto:jnhro@gmail.com">naver</a>
<a href="tel:010-222-3333">naver</a>


target

  • 목적지를 어디에 띄울것인지를 정한다.
  • 기본값은 _self : url을 현재 브라우징에서 연다
  • _blank : url을 새로운 브라우징 맥락에서 표시한다
<a href="https://www.naver.com" target="_blank">naver</a>



14. 엔티티 (Entity)

  • html 에 특수 문자 포함하고 싶을 때
  • <, >, “, & 등등의 예약어를 사용하고 싶을 때
  • < : &lt;
  • > : &gt;
  • " : &quot;
  • ' : &apos;
  • & : &amp;
  • 스페이싱 : &nbsp;



나의 회고 🤫

텍스트 요소를 오늘처럼 각잡고(?) 공부해본 적이 없어서 새롭게 알게된 내용이 많았다.
강의에서 가장 반복하시는 말씀이 해당 스타일을 표현하기 위해 해당 태그를 사용하지 말아라 인데 참.. 많이 찔렸다.
현재 만들고 있는 Movester도 해당 스타일을 주기 위해 특정 태그를 사용한 적이 많았다..ㅎㅎ
이 부분은 오늘 바로 수정하고 앞으로는 각 태그의 기능을 다시 한번 생각하면서 사용해야겠다.
근데 사실 코드를 짜다보면 p와 b만 사용하게 되는데 내가 미숙해서인가….?🤔
아! html 작성시 스크린리더를 고려한다는 것도 처음 알게되서 신선하고 재밌었다!