마크업의 의미
어떤 태그가 있는지 아는 것도 중요하지만, 앞에서 설명드렸던 것처럼 마크업의 의미를 잘 이해하고 넘어가는 게 더 중요하다.
예를 들어 제목 태그인 <h1>은 웹 브라우저에서 큰 글자로 두껍게 보인다. 하지만 이런 겉모습이 제목 태그의 본질은 아니다. <h1> 태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미다.
제목 태그 <h1> ~ <h6>
문서의 제목을 나타내는 태그다.
<h1>중식당</h1>
<h2>메뉴</h2>
<h3>면류</h3>
<h3>밥류</h3>
<h3>튀김류</h3>
<h3>탕류</h3>
<h3>기타</h3>
<h2>베스트 메뉴</h2>
<h3>만두</h3>
<h3>짜장면</h3>
<h3>짬뽕</h3>
<h3>탕수육</h3>
<h3>볶음밥</h3>
<h3>유린기</h3>- 중식당
- 메뉴
-면류
-밥류
-튀김류
-탕류
-기타
- 베스트 메뉴
-만두
-짜장면
-짬뽕
-탕수육
-볶음밥
-유린기👆🏻HTML 코드에 담겨있는 정보의 구조는 위와 같은 식이다.
본문 <p>
본문을 작성할 때 사용하는 태그다.
<h1>중식당</h1>
<h2>메뉴</h2>
<h3>면류</h3>
<p>
면류의 종류로는 짜장면, 간짜장, 쟁반짜장, 해물짜장, 짬뽕, 해물짬뽕, 고추짬뽕 등이 있다.
</p>
<h3>밥류</h3>
...-중식당
-메뉴
-면류
-면류의 종류로는 짜장면, 간짜장, 쟁반짜장, 해물짜장, 짬뽕, 해물짬뽕, 고추짬뽕 등이 있다.
-밥류
...👆🏻HTML 코드에 담겨있는 정보의 구조는 위와 같은 식이다.
줄바꿈 <br>
제목이나 본문 같은데서 줄을 바꿀 때 사용하는 태그다. 줄바꿈이 없으면 한 문단으로 이어져서 한눈에 보기 불편하다.
줄바꿈을 하고 싶다면, 하고 싶은 문장 뒤에 <br>태그를 사용하면 된다.
중요<strong>
중요한 내용을 강조해서 표시할 때 사용하는 태그다.
실제로 보면 굵은 글씨로 변하는 것을 볼 수 있다.
<p>
이 집은 만두가 기가막힙니다. 꼭 모두들 <strong>군만두</strong>를 드세요.
</p>👉🏻 이 집은 만두가 기가막힙니다. 꼭 모두들 군만두를 드세요.
크롬 브라우저에서는 기본적으로 <strong> 태그를 두꺼운 글씨로 보여준다. 꾸미기 위해 두꺼운 글씨를 넣으려면 CSS로 두꺼운 글씨를 만들고, 의미상 강조의 의미가 있는 경우에만 <strong>을 사용하는 것이 좋다.
강조 <em>
글은 말하는 것과 달리 억양을 다르게 표현하기 힘들다는 단점이 있다. 그래서 전통적으로 책이나 잡지 같은데서는 글자를 조금 다른 모양으로 보여주거나 하는 식으로 억양을 표현한다. HTML에서도 <em> 이라는 태그를 사용해서 이런 내용의 강조를 나타낼 수 있다.
<p>
제 이름은 군 <em>만두</em>입니다. 만듀 아니고 먄두 아니고 만두죠.
</p>👉🏻제 이름은 군 만두입니다. 만듀 아니고 먄두 아니고 만두죠.
크롬브라우저에서는 <em>태그의 기본 디자인을 기울어진 글씨로 보여준다. 왜냐면 영어권에선 강조할 때 주로 기울어진 글씨로 표시하기 때문이다!
취소 <s>
어떤 내용이 취소, 제거되었다는 의미를 표현할 때 싸용하는 태그다.
<p>
<s>만두 판매합니다. 지금 예약 가능합니다.</s>
<br>
아 죄송합니다. 품절이에요. 예약 불가합니다.
</p>👉🏻만두 판매합니다. 지금 예약 가능합니다.
아 죄송합니다. 품절이에요. 예약 불가합니다.
인용 <blockquote>,<q>
다른 곳에서 가져온 내용들을 긴 글로 인용할 땐 <blockquote>태그를 사용하고 짧게 인용할 때에는 <q>태그를 사용한다.
<blockquote>
만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!!
<br>
- 군만두, 만두노래 중에서
</blockquote>만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!!
- 군만두, 만두노래 중에서
<p> 군만두씨는 노래자랑에서 만두 노래를 부르기도 했습니다.
<q> 만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!!
</q>
만두 노래를 아주 열정적이게 불렀답니다.
</p>군만두씨는 노래자랑에서 만두 노래를 부르기도 했습니다. 만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!! 만두 노래를 아주 열정적이게 불렀답니다.
👆🏻따옴표가 생긴 것을 볼 수 있다.위 첨자 <sup> , 아래 첨자<sub>
약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자라고 한다.
<p>
물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.
</p>물의 화학식은 H2O이고, 3의 제곱(32)은 9이다.
👆🏻원소의 개수를 나타내는 화학 기호에 아래 첨자를, 제곱 연산을 나타낸 수학 기호에는 위 첨자를 쓴 것을 볼 수 있다.주제 전환(Thematic Break)
과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만, 최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그다. 브라우저에서는 기본적으로 가로 선을 그어서 보여준다. 아래 예시 코드에서는 본문 내용 부분과 참고 자료들을 정리한 각주 부분을 <hr> 태그를 써서 구분해준다.
<p>
군만두씨는 노래자랑에서 만두 노래를 부르기도 했습니다.
<q>
만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!!<sup>[1]</sup>
</q>
만두 노래를 아주 열정적이게 불렀답니다.
</p>
<hr>
<p>
[1] "군만두, 만두 노래자랑"…한국 '들썩', 방구석뉴스 2025.03.28.
</p>군만두씨는 노래자랑에서 만두 노래를 부르기도 했습니다. 만두만두만두만두 만두 몇 개? 만두 세 개. 만두 몇 개? 만두 스무개!![1] 만두 노래를 아주 열정적이게 불렀답니다.
[1] "군만두, 만두 노래자랑"…한국 '들썩', 방구석뉴스 2025.03.28.
👆🏻중간에 선이 생긴 것을 확인할 수 있다.미리 서식이 정해진 텍스트 <pre>
본문 태그인 <p> 처럼 글을 이어서 보여주는 게 아니라, HTML에 적혀있는 그대로 보여주는 태그다. 보통 코드 같은 걸 쓸 때 많이 사용한다.
<p>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
body {
background-color: #000000;
color: #ffffff;
}
</pre>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.
body {
background-color: #000000;
color: #ffffff;
}
👆🏻코드 자체가 보이는 것을 확인할 수 있다.
코드<code>
글 안에서 짧은 코드를 작성할 때 사용하는 태그다.
<p<><code>body</code> 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
body {
background-color: #000000;
color: #ffffff;
}
</pre>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.
body {
background-color: #000000;
color: #ffffff;
}
👆🏻body가 코드처럼 변한 것을 확인할 수 있다.