HTML 강좌 #04 자주 사용되는 텍스트 서식 | 굵기,밑줄,강조 등

안녕하세요

지난 포스팅에서는 HTML에서 사용하는 태그에대해서 조금 집중적으로 알아봤습니다!
이전 강좌를 보지 못하신분들은 아래 링크를 클릭하여 본후 현재 강좌를보시면 도움이 됩니다

https://newstroyblog.tistory.com/4



이번 강좌에서는 HTML에서 자주 사용되는 텍스트 서식태그에 관해서 알려드리려고 합니다
HTML에는 많은 텍스트 서식태그들이 있지만 솔직히 말해서 다 알고있진 못합니다 그래서 이번 게시물에서는
제 경험을 바탕으로 나름 이건 알고있어야 한다 이건 자주쓰인다 싶은것들을 모아 알려드립니다 제가 이렇게 쓴다고해서 무조건 이게 정답은 아니니
공부하면서 정보가 더 필요하면 원하는 내용을 검색하는 습관을 들이면 좋을거 같습니다


이미지가 작을경우 이미지를 클릭하여 보시면 큰 이미지로 보실수 있습니다



먼저 예시를 봅시다

예제코드

<P>이 텍스트 줄에서는 <mark>강조된</mark> 텍스트로 처리됩니다</P>
 
<P><del>이 텍스트 줄은 삭제된 텍스트로 처리됩니다</del></p>
 
<p><u>이 텍스트 줄은 밑줄이 포함된 텍스트로 처리됩니다</u></p>
 
<p><small>이 텍스트 줄은 작은 글씨로 처리됩니다</small></p>
 
<p><strong>이 텍스트 줄은 굵은 텍스트로 처리됩니다</strong></p>
 
<p><em>이 텍스트 줄은 강조됨 글꼴 텍스트로 처리됩니다</em></p>
 
<p><i>이 텍스트 줄은 기울임 글꼴 처리된 텍스트입니다</i></p>

사이트 미리보기

---

자 그러면 이제 하나씩 자세히 알아봅시다

텍스트 굵기 처리 <strong> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p><strong>굵음 처리된 </strong></p>

우선 첫번째 문단이 아무런 효과를 적용하지않은 일반 텍스트입니다

그리고 두번째 문단이 <strong> </strong>태그 사이에 텍스트를 넣어 굵음처리한 텍스트입니다

사이트에서 어떻게 보이나도 확인해봅시다





사이트 미리보기

---

위 사진과 같이 두번째 줄에 작성한 <strong>태그를 사용한 텍스트는 굵음처리가 된걸 확인하실수 있습니다

---

텍스트 기울임 처리 <i> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p><i>기울임 글꼴 처리된 텍스트입니다</i></p>

사이트 미리보기

---

첫번째 문단은 정상적인 텍스트가 출력되며 

기울이고 싶은 텍스트가 있는 부분에 <i> </i>태그를 사용하여 태그를 적용시킬수 있습니다

---

텍스트 강조 처리 <em> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p><em>이 텍스트는 강조된 텍스트 입니다</em></p>

사이트 미리보기

---

원하는 텍스트에 <em> </em>태그를 저용시켜주면 사이트 미리보기 화면처럼 텍스트가 강조되어 표시됩니다

---

텍스트를 작게 처리 <small> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p>이 텍스트는 <small>작은 서식</small> 효과가 적용된 텍스트 입니다</p>

사이트 미리보기

---

'작은 서식'이라는 텍스트 부분에만 <small> 태그를 적용시켜 준 모습입니다

<small> 태그를 적용한 부분은 텍스트가 작게 출력됩니다

---

텍스트 강조 처리 <mark> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p>이 텍스트는 <mark>강조</mark> 효과가 적용된 텍스트 입니다</p>

사이트 미리보기

---

<mark>태그를 사용하면 텍스트를 강조시킬수 있습니다

저는 '강조'라는 텍스트에 <mark> 태그를 적용시킨 결과 강조라는 텍스트 부분에만 노란색 배경으로 텍스트가 강조되어 출력이 됩니다

---

텍스트 취소선 처리 <del> 태그

예제

<p>정상적인 텍스트 입니다</p>
<p>이 텍스트는 <del>취소선</del> 효과가 적용된 텍스트 입니다</p>

사이트 미리보기

---

 저는 '취소선'이라는 텍스트부분에 <del>태그를 적용했습니다

 그런 결과 취소선 이라는 텍스트부분만 취소선이 적용된걸 확인하실수 있습니다

---

텍스트 밑줄 처리 <u>태그

예제

<p>정상적인 텍스트 입니다</p>
<p><u>밑줄 처리가 된 텍스트 입니다</u></p>

사이트 미리보기

---

마지막으로 알려드릴 태그는 밑줄 처리를 할수있는 <u> </u>태그 입니다

첫번째 줄이 정상적인 문단이고

두번째 줄이 밑줄처리가 적용된 문단입니다