코드잇 학습일기 Day11. 텍스트 문서를 작성하는 데 필요한 태그들

오늘까지 마감인 업무가 있어서 오전부터 정신이 없다. 더 일찍 출근했어야 하는데, 하는 후회를 해보지만... 그건 이미 엎질러진 물이고, 디자인 리뷰가 있는 4시 전까지 초인모드로 달리는 수밖에...! 총 5개 섹션 정도를 만들어야 되는데 2개를 완성해놓고, 집중력이 너무 저하된 것이 느껴져서 잠시 코드잇 강의를 수강하기로 했다.

 

텍스트 문서 작성 관련 태그

 

오늘은 텍스트 문서를 작성하는 데에 필요한 태그들에 대해서 알아보는 시간을 가졌는데, 코드잇 강의의 가장 첫 문단 문구가 기억에 남는다.

 

<h1>은 웹브라우저에서 큰 글자로 두껍게 보입니다.
하지만 이런 겉모습이 제목 태그의 본질은 아닌데요.
<h1>태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미입니다.

 

무언가를 결정하거나 생각하고 행동할 때, 그것이 무엇이든 본질에서 멀어지면 안되는 법이다. 마크업도 마찬가지이다.

 

제목 태그 <h1> ~ <h6>

문서의 제목을 나타내는 태그이다. <h1>이 가장 크고, <h6>이 가장 작다. VS code 미리보기 기능을 이용해서 가장 큰 제목부터 작은 제목까지 순서대로 태그를 써 보았다.

 

제목을 나타내는 태그

 

본문 작성 태그 <p>

본문을 작성할 때에는 <p>라는 태그를 사용한다. 한 문단을 나타낸다고 생각하면 될 것 같다. 역시 예제를 통해서 알아보도록 하자.

 

본문 작성 태그

 

줄바꿈 태그 <br>

그런데 위의 예제를 보면 <p> 안에 있는 텍스트들은 줄바꿈 처리가 되어 있지 않다. 제목이나 본문 등의 코드를 작성할 때, 엔터를 치고 텍스트를 작성해도 자동으로 줄바꿈 처리가 되지 않는다. 줄바꿈을 하고 싶은 위치에서 <br> 이라는 태그를 사용해 주어야 한다.

 

줄바꿈 태그 사용

 

중요 <strong>과 강조 <em> 

중요한 내용을 표시할 때 우리는 보통 글씨를 '굵게' 처리한다. <strong> 태그를 사용하면 중요한 내용을 강조할 수 있다. 여기서 짚고 넘어가야 할 사항은, 글씨를 굵게 처리하고 싶다고 이 태그를 사용하면 안된다. 반드시 중요하다고 생각하는 내용에만 사용해야 한다. 본질을 잊지 말자! 

또 억양을 다르게 하여 강조하고 싶은 부분이 있다면 <em> 이라는 태그를 사용한다. 크롬 브라우저에서는 이 태그를 '기울임꼴'로 표시한다.

 

중요, 강조 내용을 표시하는 태그

 

취소 태그 <s>

어떤 텍스트를 삭제가 아닌 취소 표시를 하고 싶을 때에는 <s> 태그를 사용하면 '취소선'으로 처리된다. 

 

취소를 나타내는 태그

 

인용 태그 <blockquote>, <q>

다른 곳에서 가져온 내용을 인용할 때에는 <blockquote> 태그를 사용하며, 글 안에서 짧게 인용할 때에는 간단하게 <q> 태그를 사용하면 된다. 크롬 브라우저에서 <q> 태그는 따옴표("") 디자인으로 표시한다. 

 

기타 태그

예상했던 것보다 시간이 길어져서 나머지 태그는 한꺼번에 정리하도록 하겠다.

• 위 첨자 : <sup> 태그 사용
• 아래 첨자 : <sub> 태그 사용
• 주제 전환(가로선) : <hr> 태그 사용, 각주 등 부분을 나눌 때에 주로 씀
• html에 적혀있는 그대로 보여줌 : <pre> 태그 사용, 코드 등을 보여줘야 할 때 주로 씀
• 코드 : <code> 태그 사용, 글 안에서 짧은 코드를 작성할 때 씀

 

기타 태그 예제 모음

 

위의 코드(왼쪽)와 미리보기(오른쪽)를 참고하면 이해가 쉬울 것이다. 텍스트 문서에 사용되는 태그 공부를 마치고 퀴즈 하나를 풀어보며 복습하는 시간을 가졌다. 

 

코드잇의 텍스트 태그 커리큘럼

 

해야할 일이 많으므로 오늘 강의는 두개만! 다음 시간에는 리스트에 대해서 공부할 예정이다.

 

코드잇 오늘 공부 인증

 

아직 갈 일이 멀지만 그래도 4월 중으로 HTML 핵심 개념 토픽을 모두 끝내고 싶다는 욕심이 있다. 아직 25일이나 남았으니까 충분히 할 수 있으리라 믿고... 벌써 점심시간이다. 모두 맛점 :D