[HTML/CSS] 텍스트 요소

텍스트 요소

🐶 h1 ~ h6

h1이 가장 높고 h6이 가장 낮은 단계이다.
단계가 낮아질 수록 글자 크기가 작아진다.
단계 순서대로 쓰는 것을 권장한다.
(웹 브라우저가 제목 정보를 이용해 목차를 만드므로)

큰 글씨를 위해 <h1>, 작은 글씨를 위해 <h6>을 쓰지말라!
는 내용을 공부했는데 굉장히 뜨끔했다..!
브라우저에 따라 스타일링이 같음을 보장할 수 없는 이유라고 한다.
더해서, 하나의 <h1>을 사용하라!고 했는데...

뜨끔했던 이유는 나의 프로젝트의 일부인 아래 코드 에서
<h1> 태그를 남발하고 있었기 때문.
그리고 <br> 태그까지 여백을 위해 사용하고 있었다.

나쁜 습관을 고쳐야겠다는 생각도 들고,
<img class="danger" src="동일 루트">가 반복되는 부분은
차라리 자바스크립트 파일에서 for문으로 추가했으면
나았을까 하는 생각도 든다.
잘 썼다고 생각했지만 참 부끄러웠다.
그동안 HTML을 얼마나 대충 배우고 대충 썼는지 알 수 있었다.

<div class="other">
  <button class="detail_btn">상세정보</button>
  <img class="mouse" src="./images/click.png" />
  <div class="p_detail grid_container">
    <h1 class="carbohydarate item"> <!-- h1 태그를 남발 중인 부분 1 -->
      탄수화물 <img class="danger" src="./images/danger.png" />
      <p id="1"><br /><br />${product.carbohydrate}</p>
    </h1>
    <h1 class="protein item"> <!-- h1 태그를 남발 중인 부분 2 -->
      단백질 <img class="danger" src="./images/danger.png" />
      <p id="2">
        <br /><br />
        ${product.protein}
      </p>
    </h1>
    <h1 class="fat item"> <!-- h1 태그를 남발 중인 부분 3 -->
      지방 <img class="danger" src="./images/danger.png" />
      <p id="3"><br /><br />${product.fat}</p>
    </h1>
    <h1 class="kcal item"> <!-- h1 태그를 남발 중인 부분 4 -->
      칼로리 <img class="danger" src="./images/danger.png" />
      <p id="4">
        <br /><br />
        ${product.kcal}
      </p>
    </h1>
  </div>
</div>

🐱 p

문단을 나타내는 블록 레벨 요소이다. 컨테이너 역할도 한다.
화면에 나타낼 때 lorem을 입력해서
긴 문장이 나타나는 화면을 확인할 수도 있다.

여러 p 태그를 사용하면 문장 한 줄의 높이만큼 여백이 들어간다.
여백을 만들려고 p 태그를 사용하지 않는 것이 좋다.
(스크린 리더 사용자에게 좋지 않음)

🐭 br

줄바꿈 요소. line <br>eak 의 느낌! 빈 요소이다.
HTML에서는 여러 개의 공백도 하나의 whitespace로 인식한다.
많은 여백을 위한 다수의 <br>태그를 쓰지 않고 css로 처리할 것.

🐹 blockquote, q

blockquote와 q 모두 인용에 관련된 요소이다.
전자는 블록 요소, 후자는 인라인 요소이므로
비교적 긴 텍스트, 짧은 텍스트와 각각 매칭하면 좋다.

blockquote와 q 태그와의 차이는 들여쓰기 같은 여백 여부이다.
q 태그는 컨텐츠 앞뒤로 "쌍따옴표" 가 입력된다는 특징이 있다.

❗ q 태그 내에 blockquote 태그를 쓰지 말 것.
q 태그는 자식 요소가 블록 요소이면 그 전에 닫히기 때문.
두 태그가 공유하는 특성은 cite이고, 인용문의 출처 URL을 나타낸다.

🐰 pre (preformatted!)

✔ ↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔ ✔

작성한 그대로 표현된다. 공백을 유지할 수 있는 방법!
모든 문자의 폭이 같은 고정폭 글꼴로 렌더링된다.

✔ ↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔↔ ✔

🐻 figure, figcaption

figure는 독립적인 콘텐츠를 표현!
보통 figcaption과 같이 사용한다.

<figure>
   <figcaption>
</figure>

하나의 공통적 요소로 묶어줄 수 있다.

🐼 hr

수평선, 빈 요소! 주제의 분리를 원할 때 사용한다.

웹 표준을 준수하고 싶다면 공식 문서에서
휴지통 모양의 특성들은 쓰지 않도록 하자!

🐨 abbr, address, cite, bdo

👉 abbr은 약어 표현 시, 원래의 단어를 툴팁으로 설명해줄 수 있다.
<abbr title=""></abbr>과 같이 쓰는데,
여기서의 title은 global property!

👉 address는 주소를 나타낼 때 사용하며,
요즘은 sns, 블로그 등의 주소도 나타낸다.
스타일링을 하지 않아도 기본적으로 태그에 대한 스타일이 적용되고,
브라우저마다 다를 수 있다!

👉 cite는 인용의 출처를 나타낼 때 표현.
blockquote의 속성으로도 사용 가능한데,
속성으로 사용하면 화면에 보이지는 않는다.

👉 bdo(bidirectional override)는,
텍스트를 거꾸로 쓸 때 사용함.

특이하다..!
dir(direction)을 속성값으로 설정 가능한데,
rtl(right to left) / ltr(left to right) 등이 가능한 값이다.

🐷 b vs strong

👉 b는 크게 중요하진 않지만 굵게 표시할 부분을 나타낸다.
하지만 <b>로 전체 텍스트를 꾸미면 안된다.

👉 strong은 높은 중요도를 가진 요소를 나타낸다.

b와 strong은 결과적으로
텍스트를 bold로 만드는 점에서는 동일하지만,
각기 다른 의미를 가지므로 주의해야 한다.

🐮 i vs em

위의 b <-> strong의 관계와 유사하다.
i와 em 도 기울임꼴로 표시되는 것은 같지만, 쓰는 이유가 다르다.

👉 i는 주위와 구분해야 하는 부분을 나타난다. (고유 명사 암시 등)
👉 em은 emphasize로, 크게 강조하는 부분을 표현한다.

🐯 formatting

• mark - 하이라이트가 필요할 때!
• small - 덧붙임 글이나, copyright 관련된 작은 텍스트를 나타낸다.
• sup - 아래첨자 (화학식, 각주, 변수 표기 등)
• sub - 위첨자 (지수 표기 등)
• del
  • 제거된 텍스트의 범위!
  • 특성으로 datetime을 사용 가능 (변경 발생 시간)
• ins - 추가된 텍스트의 범위!
• code
  • pre 태그와 유사하지만 이 태그는 인라인 요소이다!
    짧은 코드를 나타내기에 좋으며, 고정폭 글꼴로 렌더링해서 코드를 나타내기 좋다.
    여러 줄인 경우 pre 태그로 감싸는 것이 좋다.
• kbd - 키보드의 키 입력들을 나타낼 때 쓴다.

🐵 a 태그와 하이퍼링크

a 태그는 하이퍼링크를 만든다.
기본적으로 <a href="">링크 대상</a>와 같이 쓴다.

저번 포스팅에서 하이퍼링크의 CSS를 변경해보았는데,
브라우저를 종료하고 다시 켜서 확인해도
해당 링크가 이미 방문된 경로(visited)로 인식됐었다.
이는 방문 기록을 삭제함으로써 초기 link 상태로 돌릴 수 있다고 한다.

속성

• href : 목적지의 절대 경로와 상대 경로, 이메일이나 전화도 가능하다.
  • 절대 경로 : likethefirst.tistory.com와 같이, 현 위치와 관계없는 절댓값 경로
  • 상대 경로 : /project/css와 같이 현재 위치를 기준으로 하는 상대적인 경로.
• target : 목적지를 띄울 곳을 지정
  • _self : 현재 창에서 열림(default)
  • _blank : 새 탭에서 열림
    • 새 탭에서 열 것인지, 새 창에서 열 것인지는
      사용자의 브라우저 설정에 따라 달라진다.

🐸 엔티티 (Entity)

<, >, ", &과 같은 예약어들을
HTML 구문으로 인식시키지 않고 텍스트에 포함하여 사용 가능하다.
&엔티티 이름; 과 같이 쓴다!

https://dev.w3.org/html5/html-author/charref

결과	엔티티 이름	설명
<	&lt;	less than 🔽
>	&gt;	greater than 🔼
"	&quot;	quotation
'	&apos;	apostrophe
&	&amp;	ampersand
	&nbsp;	non-breaking spacing