Home [웹 기초] HTML #1
Post
Cancel

[웹 기초] HTML #1

HTML

HTML이란 “Hyper Text Markup Language”로 웹을 이루는 가장 기초적인 구성 요소이며, 웹의 구조를 정의할 때 사용된다. 쉽게 말하자면 웹페이지의 골격을 나타내주는 마크업 언어이다.

HTML은 tag들로 이루어져 있으며, 골격들이라고 생각하면 된다.
HTML을 학습할 때 아래 사이트를 참고하면 매우 좋다.
https://www.w3schools.com/tags/
HTML tags들을 살펴볼 수 있으며, 각 tag들에 대한 사용법이나 예제들을 볼 수 있다. 또한 가장 좋은 점은 그 자리에서 바로 실행시켜 볼 수 있다는 점이다.

HTML를 공부해보면 알겠지만 웹페이지도 하나의 문서 형태이기 때문에 워드나 한글로 문서 작성해보는 거랑 매우 비슷하다. HTML로 웹페이지를 만들어보면 제목과 본문이 있고 글자 굵게 또는 기울임, 밑줄 등 문서 편집기와 비슷한 기능들이 있다. 이에 웹페이지를 꾸며주는 기능을 하는 css가 추가되면 우리가 평소에 보는 웹페이지의 모습이 된다.

몇가지 HTML tags들을 살펴보자면

HTML tags

https://www.w3schools.com/tags/ 를 참고

<b>

일부 텍스트를 굵게 표시한다.

1
일부 텍스트를 <b>굵게</b> 표시한다.

<i>

일부 텍스트를 기울임꼴로 표시한다.

1
일부 텍스트를 <i>기울임꼴로</i> 표시한다.

<u>

일부 텍스트에 밑줄 표시한다.

1
일부 텍스트 <u>밑줄</u> 표시한다.

<strong>

매우 중요한 텍스트를 정의할 때 사용된다. 기본적으로는 굵게 표시된다.

1
<strong>매우 중요한 텍스트</strong>를 정의할 때 사용된다.

그냥 보면 <b>와 별 차이가 없는 것으로 보이는데 굳이 똑같은 기능을 하는 tag가 왜 2개나 있는지 궁금해 할 수 있다. 나중에 css를 배우거나 하면 알게되겠지만 tag마다 스타일을 지정하거나 효과를 지정할 수 있는데 지금은 효과가 같아보이지만 나중에 구분해서 효과를 줄 수 있다.

보통 정말 중요한 텍스트는 <string>로 표시하고, 중요하지는 않지만 그냥 텍스트를 보기 좋게 하기 위할 때는 <b>로 표시한다.

<h1> ~ <h6>

제목을 정의할 때 사용된다.
<h1>은 가장 큰 제목을 의미하고, <h6>은 가장 작은 제목을 의미한다.

1
2
3
4
5
6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
This post is licensed under CC BY 4.0 by the author.