웹 개발을 위한 HTML 가이드 15편 - 굵기와 기울기 태그
분류포스트
작성일2021-10-30 13:58
수정일2021-11-14 00:35
태그가이드HTML웹 개발프로그래밍코딩웹 코딩웹 프로그래밍HTML 공부하기HTML 초보b 태그i 태그em 태그strong 태그굵기 태그기울기 태그
웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. 가이드 전체의 흐름은 가이드 모음 글을 참고하시면 됩니다.
텍스트 관련 태그
- 굵기와 기울기 태그(b, strong, i, em)현재 글
- 개행과 가로줄 태그(br, hr)
- 윗첨자와 아랫첨자 태그(sup, sub)
- 텍스트의 추가, 제외 태그(ins, del)
- 취소선(s)과 밑줄 표현
- 인용 태그(q, blockquote)
- 하이라이트 태그(mark)
- small 태그
- code, pre 태그
- 번외 - 탈출문자 사용하기
- 그 외의 텍스트 태그들
개요
이번 글은 웹 개발을 위한 HTML 가이드 15편입니다. 저번 글에서는 하이퍼 링크를 만들어주는 링크 태그인 a태그에 대해서 알아봤습니다. 이번 글부터는 텍스트에 관련된 태그들을 알아볼 알아보려고 합니다. 태그의 개수가 많아서 여러 파트로 나눠서 진행할 생각입니다. 이 글은 그 첫번째입니다. 이번 글에서 알아볼 태그는 총 네가지로, 굵기 태그 두개와 기울기 태그 두개입니다.
텍스트 관련 태그들은 보통 p태그와 함께 이용하는 편입니다. p태그가 문단을 나타내는 가장 텍스트스러운 태그이기 때문입니다.
네가지의 태그지만 어렵지는 않기 때문에 간단하게 이해할 수 있을 것이라고 생각됩니다. 자, 그럼 함께 알아보도록 합시다.
텍스트의 굵기와 기울기
텍스트를 강조하는 다양한 방법 중에서 가장 기본적인 두가지의 방법은 텍스트를 굵게 만들거나 기울이는 것입니다. 각각 두가지의 방법이 있는데 어떻게 다르고 어떻게 사용하면 좋은지 간단하게 살피고 다음 파트로 넘어가도록 합시다.
굵기 태그
굵기 태그에는 두가지가 있다고 했습니다. b태그와 strong태그입니다. b태그의 b는 bold의 약자입니다. strong태그는 말 그대로 강렬한, 강한. 뭐 이런 의미죠. 아래와 같이 사용하면 됩니다.
<p><b>아이유</b> 좋아</p>
<p><strong>아이유</strong> 좋아</p>
위의 코드는 위의 이미지처럼 나타나게 됩니다. 그냥 이렇게만 보면 이 두가지는 별 차이가 없습니다. 둘 다 굵게 만들어주는 태그이기 때문이죠.
그럼 이 두가지의 태그는 어떻게 다를까요? 중요한 것이 다릅니다. 전자는 그냥 굵게 만들어주는 태그일 뿐이고 후자는 검색 엔진에게 이 텍스트가 중요한 텍스트다 라는 정보를 알려주는 시맨틱한 태그라는 것이 다른 점입니다. 그렇기 때문에 중요한 정보일 때에는 strong태그를 쓰는 것이 웹 페이지의 검색 노출에 도움이 됩니다.
그저 굵은 텍스트를 만들고 싶은 경우에는 span태그를 이용해서 스타일을 조정하는 방법이 있고 이를 권장하고 있습니다. b태그는 사실상 더 이상은 잘 쓰이지 않는 태그입니다. 하지만 우리는 아직 CSS를 모르니까 이런 게 있다라는 것만 알아두시면 됩니다.
기울기 태그
이번에는 기울기 태그를 알아봅시다. 기울기 태그에도 두가지가 있습니다. i태그와 em태그입니다. i태그는 이탤릭체의 약자라고 보면 됩니다. em태그는 emphasize의 약자입니다. 중요하다 라는 의미를 지닌 영단어입니다.
여기서도 감이 오죠. 이 두 태그는 마찬가지로 시맨틱한 태그냐 아니냐로 나뉩니다.
<p><i>아이유</i> 좋아</p>
<p><em>아이유</em> 좋아</p>
b태그와 마찬가지로 i태그도 잘 쓰이지 않습니다. em태그를 더 많이 사용합니다. 그냥 기울기를 표현하고 싶다면 span태그를 이용해 CSS를 조정하는 방법을 사용합니다. 이 역시도 이렇게 하는것을 추천하고 있습니다.
둘 다 사용하기
굵기 태그와 기울기 태그는 둘 다 사용할 수 있습니다. 순서와 상관 없이 둘 다 적용하면 아래와 같은 모양이 됩니다. 정말로 중요하다고 강조를 하는거죠.
<p>아이유는 2021년 10월 19일 자정에 <strong><em>Strawberry Moon</em></strong>을 공개했다.</p>
실전 연습
그럼 이제 우리의 프로젝트에 한 번 적용해보도록 합시다. 우리가 만들었던 index.html파일을 기억하실겁니다. vscode를 켜고 이 파일을 열어봅시다.
<body>
<h1>웹 개발의 3요소</h1>
<h2><a href="https://bit.ly/3lXTSYW" target="_blank" rel="noopener noreferrer">HTML</a></h2>
<p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<h2><a href="https://bit.ly/3u9M22j" target="_blank" rel="noopener noreferrer">CSS</a></h2>
<p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<h2><a href="https://bit.ly/39BnSnM" target="_blank" rel="noopener noreferrer">JavsScript</a></h2>
<p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
</body>
위와 같은 상태로 저장되어 있을겁니다. 이제 여기에 strong태그와 em태그를 적용해보려고 합니다. HTML, CSS 자바스크립트라는 텍스트에 적용해보도록 합시다.
수정하기 전은 이런 모습이죠. 그럼 이제 수정해봅시다.
<!-- <p>HTML은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p> -->
<p><strong><em>HTML</em></strong>은 웹의 뼈대를 만들어주는 기능을 하는 마크업 언어입니다.</p>
<!-- <p>CSS는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p> -->
<p><strong><em>CSS</em></strong>는 HTML로 만든 뼈대에 피부를 만들어주고 화장을 시켜주는 스타일 시트 언어입니다.</p>
<!-- <p>자바스크립트는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p> -->
<p><strong><em>자바스크립트</em></strong>는 HTML과 CSS를 동적으로 제어할 수 있는 웹의 뇌와 같은 언어입니다.</p>
주석처리된 부분이 이전 코드이고 주석이 아닌 부분이 새로운 코드입니다. strong태그의 안에 em태그를 넣고 그 안에 내용물을 넣었습니다. 이렇게 하고 저장하고 라이브 서버를 켜보면 아래와 같은 모습이 됩니다.
오늘의 코드는 깃허브 web-tuto에 기록되어 있습니다. 4번을 보시면 됩니다.
이렇게 우리는 오늘 굵기와 기울기를 적용해봤습니다. 아주 간단하죠? 시맨틱한 태그를 더 많이 사용한다는 것을 잊지 마시고 공부해봅시다. 앞으로 우리가 알아볼 텍스트 관련 태그가 많습니다. 오늘 함께 배운 내용은 여러번 연습해서 여러분의 것으로 만들어보세요. 이번 글은 여기까지입니다. 다음 글에서는 개행 태그와 가로줄 태그를 알아봅시다.
개행 태그는 이미 다룬 적이 있지만 그래도 다시 다뤄보도록 하겠습니다. 그럼 더 잘 기억이 되겠죠. 그럼 다음 글에서 봅시다.
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.