[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션

20 - 1 = 19

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 19일차입니다!

오늘은 6번째 커리큘럼에서 03~05. 인라인 텍스트 - ABBR, B, MARK, EM, STRONG, I 에 대하여 공부했어요.

<abbr> 태그와 그 쓰임새는 이번에 처음 알았고, B, MARK, EM, STRONG, I 태그의 차이점에 대해서 확실하게 배웠습니다.

전 주로 강조할 때에는 <b> 태그만 사용했는데 알고보니 최대한 <b> 태그 사용은 자제해야 하더라고요. 😂

각 태그의 용도와 주의사항 등을 잘 학습할 수 있어서 매일매일 패스트캠퍼스 강의를 들으며 하루에 하나씩은 꼭 배웁니다!

 

---

<abbr>

◾ 약어를 지정

◾ 보통 title 속성(전역 속성)을 사용

    ➡ <abbr title="HyperText Markup Language">HTML</abbr>

🔹 <abbr> 태그의 값에 점선 밑줄이 생기며, 그 값에 마우스오버시 전체 내용이 툴팁으로 나타남

---

아래 5개 태그는 모두 내용을 강조하기 위한 용도로 보일 수 있으며, 사용할 때 헷갈리기 쉬움.

 

<b>

🔸 문체가 다른 글자의 범위를 설정

🔹 특별한 의미를 가지지 않음.

🔹 다른 태그를 사용하는 것에 적합하지 않은 경우, 마지막 수단으로 사용.

🔹 읽기 흐름에 도움을 주는 용도

🔸 기본적으로 글자가 두껍게 표시됨

 

<mark>

🔸 값을 하이라이팅 하는 데에 사용

🔸 글자 배경이 노란색 바탕으로 표시됨.

🔹 의미가 있는 것이 아닌, 시각적 효과에 특화된 태그

 

<em>

🔸 EMphasis

🔹 단순한 의미 강조를 위한 태그

🔹 중첩하여 사용 가능함, 중첩될 수록 강조 의미가 강해짐, 시각적인 효과는 없음

    ➡ 브라우저, 검색엔진, 정보통신기기 인식에 도움이 됨 ('구두 강조'로 발음됨)

🔸 이탤릭체로 표시됨 ➡ CSS에서 변경 가능

 

<strong>

🔸 의미의 중요성을 나타내기 위해 사용함

🔸 글자가 bold체로 표시됨

 

<i>

🔸 위 태그들에서 표현할 수 있는 적합한 의미가 아닐 경우에 사용

🔸 아이콘, 특수기호를 표현하기 위해 사용함 (평범한 텍스트에 사용하지 말기)

🔸 이탤릭체로 표시됨 ➡ CSS에서 변경 가능

🔹 link 태그를 사용하여 Font Awesome에 있는 아이콘을 가져올 수 있음

 

---

학습 내용 출처: https://heropy.blog/2019/05/26/html-elements/

강의 링크: https://bit.ly/3m0t8GM