안녕하세요
지난 포스팅에서는 HTML에서 사용하는 태그에대해서 조금 집중적으로 알아봤습니다!
이전 강좌를 보지 못하신분들은 아래 링크를 클릭하여 본후 현재 강좌를보시면 도움이 됩니다
https://newstroyblog.tistory.com/4
이번 강좌에서는 HTML에서 자주 사용되는 텍스트 서식태그에 관해서 알려드리려고 합니다
HTML에는 많은 텍스트 서식태그들이 있지만 솔직히 말해서 다 알고있진 못합니다 그래서 이번 게시물에서는
제 경험을 바탕으로 나름 이건 알고있어야 한다 이건 자주쓰인다 싶은것들을 모아 알려드립니다 제가 이렇게 쓴다고해서 무조건 이게 정답은 아니니
공부하면서 정보가 더 필요하면 원하는 내용을 검색하는 습관을 들이면 좋을거 같습니다
이미지가 작을경우 이미지를 클릭하여 보시면 큰 이미지로 보실수 있습니다
먼저 예시를 봅시다
예제코드
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> | cs |
사이트 미리보기
자 그러면 이제 하나씩 자세히 알아봅시다
텍스트 굵기 처리 <strong> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p><strong>굵음 처리된 </strong></p> | cs |
우선 첫번째 문단이 아무런 효과를 적용하지않은 일반 텍스트입니다
그리고 두번째 문단이 <strong> </strong>태그 사이에 텍스트를 넣어 굵음처리한 텍스트입니다
사이트에서 어떻게 보이나도 확인해봅시다
사이트 미리보기
위 사진과 같이 두번째 줄에 작성한 <strong>태그를 사용한 텍스트는 굵음처리가 된걸 확인하실수 있습니다
텍스트 기울임 처리 <i> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p><i>기울임 글꼴 처리된 텍스트입니다</i></p> | cs |
사이트 미리보기
기울이고 싶은 텍스트가 있는 부분에 <i> </i>태그를 사용하여 태그를 적용시킬수 있습니다
텍스트 강조 처리 <em> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p><em>이 텍스트는 강조된 텍스트 입니다</em></p> | cs |
원하는 텍스트에 <em> </em>태그를 저용시켜주면 사이트 미리보기 화면처럼 텍스트가 강조되어 표시됩니다
텍스트를 작게 처리 <small> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p>이 텍스트는 <small>작은 서식</small> 효과가 적용된 텍스트 입니다</p> | cs |
사이트 미리보기
'작은 서식'이라는 텍스트 부분에만 <small> 태그를 적용시켜 준 모습입니다
<small> 태그를 적용한 부분은 텍스트가 작게 출력됩니다
텍스트 강조 처리 <mark> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p>이 텍스트는 <mark>강조</mark> 효과가 적용된 텍스트 입니다</p> | cs |
사이트 미리보기
<mark>태그를 사용하면 텍스트를 강조시킬수 있습니다
저는 '강조'라는 텍스트에 <mark> 태그를 적용시킨 결과 강조라는 텍스트 부분에만 노란색 배경으로 텍스트가 강조되어 출력이 됩니다
텍스트 취소선 처리 <del> 태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p>이 텍스트는 <del>취소선</del> 효과가 적용된 텍스트 입니다</p> | cs |
사이트 미리보기
저는 '취소선'이라는 텍스트부분에 <del>태그를 적용했습니다
그런 결과 취소선 이라는 텍스트부분만 취소선이 적용된걸 확인하실수 있습니다
텍스트 밑줄 처리 <u>태그
예제
1 2 | <p>정상적인 텍스트 입니다</p> <p><u>밑줄 처리가 된 텍스트 입니다</u></p> | cs |
사이트 미리보기
마지막으로 알려드릴 태그는 밑줄 처리를 할수있는 <u> </u>태그 입니다
첫번째 줄이 정상적인 문단이고
두번째 줄이 밑줄처리가 적용된 문단입니다