들어가기 전에
태그 중에는 텍스트를 표현해주는 태그가 있습니다.
이 태그들을 이용하여 의미를 부여하거나 특정 부분에 선 또는 스타일 등을 정의할 수 있습니다.
이러한 태그들에 대하여 알아보도록 하겠습니다.
핵심키워드
- <b>
- <i>
- <u>
- <s>
학습하기
3) 텍스트를 꾸며주는 요소
텍스트 표현 태그
웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였습니다.
그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았습니다.
그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠습니다.
- <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
- <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
- <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
- <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)
위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 하셔야 합니다.
다음 강의로 넘어가기 전에, "Chpater3, 2) 시멘틱 마크업" 강의 영상을 먼저 보시길 추천드립니다.
(https://www.edwith.org/boostcourse-ui/lecture/33505)
위에서 살펴본 태그 이외에도 텍스트 관련 태그는 많습니다.
아래 참고 링크의 페이지 중간쯤에 있는 Inline text semantics 섹션에 더 자세히 나와 있습니다.
자주 사용하는 건 몇 개 되지 않지만 그래도 한 번씩은 살펴보시기 바랍니다.
내용 정정합니다.
HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었습니다.
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.
코드실습
<p>
<b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
<u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>참고자료
- HTML elements reference
https://developer.mozilla.org
- This page lists all the HTML elements, which are created using tags.
comment
강좌가 하나하나가 짧아서 부담도 없고 좋아요
완료
그밖에 형광펜으로 보여지는 효과인 mark 태그도 있다.
1.4
- b 태그와 strong 태그
- em 태그와 i 태그
- ins 태그와 u 태그
- del 태그와 s 태그
2023년 12월 15일 금요일 학습완료!
단순 표현용 Tag와 의미를 가지는 Tag 의 차이는 무엇인가요?
=> 시멘틱 마크업 강의를 듣고 오니 이해가 되었습니다.
<b>:볼드체
<i>:이탈릭체
<u>:밑줄
<s>:가운데 줄
230201
2023.01.06
20221024
싱기방기
<i> 이탈릭체
<u>밑줄
<strike>중간 선긋기
굵게 <b> </b> bold
기울임 <i> </i> italic
밑줄 <u> </u> underline
취소선(중간선) <s> </s> strike
중간에 강의 링크가 제대로 안들어가집니다.
굵게 <b> </b>
기울임 <i> </i> : 의미 부여 추가됨 --> 예시 찾아보기
밑줄 <u> </u>
취소선(중간선) <s> </s>
텍스트 관련 태그(B, I, U, S)
<p>
<b>First</b> <u>Paragraph</u>
<br>
<u>Second</u><s>Paragraph</s>
</p>
<b> 태그를 이용하여 텍스트 굵게 강조
<i> 태그를 이용하여 텍스트 이탤릭체(기울이기) 표시(인용시 사용)
<u> 태그를 이용하여 텍스트 밑줄 표시
<s> 태그를 이용하여 텍스트 중간선 표시
텍스트를 꾸며주는 역할의 태그 중 주로 쓰이는 태그 4가지
<b> : bold
<u> : underline
<i> : italic
<s> : strike
문서편집툴이나 디자인 툴에서 사용하는 텍스트 속성 단축키 <command+blabla>를 생각하면 쉽다.
html4 이전에는 <strike> 쓰다가 5 이후로는 <s>로 쓰임
<b> : bold - 글자를 두껍게
<i> : italic - 기울이기 (html5 이후로 의미있는 태그로 변경 (인용 등))
<u> : underline - 밑줄
<s> : strike - 가운데 줄 긋기
<p>
<b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
<u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>
<p>
<b>Lorem</b><i>ipsum</i> dolor sit amet<br>
<u>Lorem</u><s>ipsum</s> dolor sit amet
</p>