텍스트를 체계적으로 꾸며주는 HTML 태그들
2020-4-1
- HTML
- semantic
- strong
- em
- mark
- small
- del
b 태그
<b></b>
This Text is bold
- 굵은 글씨체
- 딱히 의미를 지니진 않은, 시멘틱 요소가 없는 태그.
- 그냥 보이는 글씨를 굵게 보이게 해주는 것 뿐!
strong
태그와 보이는 것은 같지만 태그의 의미는 훨씬 약하다고 할 수 있어요.b
태그보다 더 적합한 태그가 있는지 고려 해 보고 사용하는 것이 좋아요.b
태그에 의미를 넣기 위해 클래스를 사용하는 것도 좋은 방법입니다!
strong 태그
<strong></strong>
This text is strong
- 높은 중요의미를 지닌 굵은 텍스트
- 객관적인 중요성을 의미
- 겉으로 보기에는
b
태그와 같아요. - 중첩하면 할수록 중요 의미가 커집니다.
i 태그
<i></i>
This text is italic
- 기울어진 텍스트
b
태그와 비슷하게 시멘틱적 요소가 없다.- 그런데 최근엔 조금 다른 어조임을 나타내기도 한다고해요.(책이나 영화의 이름,외국 단어, 혹은 단어가 의미론적 뜻 대신에 단어의 정의를 나타낼떄처럼)
i
보다 더 적합한 태그가 있는지 고려 해 보고 사용하는 것이 좋아요.i
에 의미를 넣기 위해 클래스를 사용하는 것도 좋은 방법입니다!
em 태그
<em></em>
This text is emphasized
- 강조의미를 지닌 기울어진 텍스트
strong
태그와 비슷하게 중요하다는 의미이지만 주관적으로 강조를 하고싶은 곳에 사용.- 중첩하면 할수록 중요 의미가 커집니다.
mark 태그
<mark></mark>
HTML Marked Formatting
- 강조 마킹된 텍스트(형광펜느낌)
- 강조를 하지만 중요하다는 의미는 아니예요. strong과 의미와 다릅니다.
- 주로 특정 문맥에 관련된 참조 목적으로 하이라이트 표시가 됩니다!
- 특정 단어로 검색을 했을 때 그 검색으로 검색된 키워드를 mark표시하기도 합니다.
- 딱 저 의미가 아니면
mark
태그가 아닌span
태그를 사용 하세요!
small 태그
<small></small>
HTML small Formatting
- 좀 더 작은 텍스트
- 전형적으로 책임 한계에 대한 고지, 경고, 법적 제한 또는 저작권등을 나타냅니다. 또한 법적인 귀속이나 저작권 요구사항을 만족시키기 위해 사용되기도 합니다.
- 주로 짧은 텍스트에 사용됩니다!
del 태그
<del></del>
My favorite color is blue red.
- 삭제됐다는 의미를 지닌 중간 라인 텍스트
- 삭제 표시를 하고 그 이유와 삭제된 시점에 관련된 정보를 입력 할 수 있습니다.
- <속성> cite: del요소의 변화에 대해 설명이 되어 있는 곳의 위치를 명시합니다.
- datetime: 변경이 일어난 시간과 날짜를 명시합니다.
수정이 필요한 부분 혹은 더 나은 방법을 알고계신가요?
댓글로 알려주시면 저에게 큰 도움이 됩니다! 😊💜