HTML은 Hyper Text Markup Language로 웹에서 하이퍼텍스트를 보여주는 용도로 사용되는 파일이다. 주로 CSS와 JS(Javascript)를 같이 사용하며, 웹에 있는 모든 페이지는 이 파일을 사용해야 페이지 내용을 보여줄 수 있다.
HTML은 다음과 같은 구조를 가진다.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>H1</h1>
</body>
</html>!DOCTYPE은 이 파일이 html인 것을 나타낸다.
<>안에 있는 것은 태그이며, 이 구조에서 쓰인 태그는 다음과 같다.
<html> html파일을 시작하는 기본 태그이다
<head> html파일 중 표시되지 않는 메타데이터를 주로 정의하거나 페이지의 제목을 표시하는 용도로 주로 사용된다
<body> html파일 중 표시되는 부분을 정의하는 용도로 사용된다
</> 태그들은 닫는 태그이며, 대부분의 경우에는 필요하다.(단, img, input 같은 일부 태그는 닫는 태그가 필요하지 않다)
h1~h6태그는 제목을 나타내는 용도로 주로 사용된다.
H1
H2
H3
H4
H5
H6
이 html은 다음과 같은 코드로 이루어져 있다.
<!DOCTYPE html>
<html>
<head>
<title>H1~H6</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>h1~h6는 글자의 크기를 지정할 수 있으며, h1이 가장 크고, h6가 가장 작다.
HTML에서 자주 사용되는 <p>태그는 택스트를 나타내는 용도로 쓰인다.
hello world
이 HTML을 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>P 태그</title>
</head>
<body>
<p>hello world</p>
</body>
</html>여기서 p 태그는 텍스트를 나타내는 용도로 쓰임을 알 수 있다.(문법 상으로는 틀리지만, html파일 내에서 <>안에 있지 않는 모든 텍스트는 브라우저가 알아서 랜더링해준다.)
HTML에서 줄바꿈을 하는 br 태그도 있다.
Text1
Text2
이 HTML를 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Text1</p>
<p>Text2</p>
</body>
</html>
이 경우 p태그의 기본적인 줄바꿈 기능을 사용하였지만, 프로그래밍 언어에서 자주 사용하는 \n처럼 <br>태그를 사용하면 더 효과적으로 줄바꿈을 할 수 있다.
Text1
Text2
이 HTML를 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Text1<br>Text2</p>
</body>
</html>HTML에서 그룹화 하는 태그가 2가지가 있다. div 태그는 블럭 형태로 그룹화 하는 태그이고, span 태그는 인타인 형태로 그룹화하는 태그이다. div 태그는 어떤 사이트를 가더라도 div태그가 무조건 보이지만, span태그는 사실상 CSS로 대체되는 경우가 많아 잘 사용되지는 않는다. 따라서 div태그만 설명한다.
제목
내용1
내용2
이 HTML를 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1>제목</h1>
<p>내용1</p>
<p>내용2</p>
</div>
</body>
</html>위의 html처럼 div태그는 다른 태그와 달리 의미 있는 태그가 아닌 것 같지만, CSS에서 그룹 형태로 디자인을 적용시킬 때는 매우 유용하게 적용하게 할 수 있는 태그이다.
HTML에서 링크를 표시할때 밑줄이 표함되어 있을 것이다. 이럴 때 사용하는 태그가 a태그이다.
이 HTML를 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://example.com">example.com</a>
</body>
</html>이 HTML에서 밑줄이 포함된 URL 링크를 표시하는데 사용된다. 클릭하면 href속성에 있는 주소로 이동한다.
HTML에서 이미지를 표시할 때 img태그를 사용한다.
이 HTML를 이루는 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://placehold.co/300x200">
</body>
</html>이처럼 img태그는 src에 있는 이미지를 불러와서 페이지에 표시해 주는 역할을 한다.
이 외에도 다양한 태그가 있다. 나머지들은 추후 정리할 예정이다.
'HTML, CSS, JS, 웹, 네트워크' 카테고리의 다른 글
| 라우팅 (0) | 2025.06.02 |
|---|---|
| JavaScript (2) | 2025.05.26 |
| DHCP (0) | 2025.05.25 |
| CSS (0) | 2025.05.14 |
| 네트워크 (2) | 2025.05.14 |