생각 작업실 The atelier of thinking

4. <HTML> 기본 태그 - 제목<h1> , 단락<p> 본문

웹(Web) 이야기

4. <HTML> 기본 태그 - 제목<h1> , 단락<p>

knowledge-seeker 2024. 1. 26. 18:02

HTML은 웹페이지가 웹브라우저에 읽혀지기 위한 약속이라 할 수 있습니다.
기본 구조를 나타내는 태그인 <html>,<head>,<body> 태그안에 html 태그를 이용하여 웹페이지를 보다 읽기 쉽게 할 수 있습니다.

1. 제목 태그 <h1> ~ <h6>



제목 태그는 크기에 따라 <h1> 부터 <h6> 까지 있습니다.

 

<h1> Headline 1 </h1>
<h2> Headline 2 </h2>
<h3> Headline 3 </h3>
<h4> Headline 4 </h4>
<h5> Headline 5 </h5>
<h6> Headline 6 </h6>



HTML은 태그간의 계층구조가 있습니다.


제목태그는 <body> 태그 안에서 사용할 수 있습니다.

앞서 만들었던 기본구조 html 파일에서 제목에 <h1>,<h2> 태그를 넣어보겠습니다. 

<!DOCTYPE html>

 <html>
<head>
<title> 인터넷과 웹(Web) </title>
</head>
<body>
...
<h1> 1. 인터넷 (Internet) </h1>
...
<h2> (1) 인터넷의 유래 </h2> 
...
<h2> (2) 인터넷 프로토콜(Protocol) - TCP/IP </h2>
...
<h2> (3) 인터넷과 웹과의 관계 </h2> 
...
<h1> 2. 웹(World Wide Web) </h1>
<h2> (1) 웹(World Wide Web)의 유래 </h2>
...
<h2>(2) 웹의 주요 용어 들</h2>
...
<h1> 3. 웹과 웹브라우저 그리고 HTML </h1>
...
</body>
</html>

 



제목 태그만으로도 앞서 <body> 태그만 있을 때보다 한결 보기 좋아지는 것을 볼 수 있습니다.

 

 

2. 문단 태그 <p>



<p> 태그는 paragraph 에서 온 것으로 단락을 정의하는 데 사용합니다.
시작태그 <p> 와 종료태그 </p> 사이에 위치한 텍스트는 하나의 단락으로 간주됩니다.
단락사이에는 자동줄바꿈이 적용되고, 단락의 위아래 여백이 생깁니다.

위 파일에 <p> 태그를 적용해보겠습니다.

 

<!DOCTYPE html>

 <html>
<head>
<title> 인터넷과 웹(Web) </title>
</head>
<body>
<p> ... </p>
<h1> 1. 인터넷 (Internet) </h1> 
<p> ... </p>
<p> ... </p>
<h2> (1) 인터넷의 유래 </h2>
<p> ... </p>
<p> ... </p>
<h2> (2) 인터넷 프로토콜(Protocol) - TCP/IP </h2> 
<p> ... </p>
<p> ... </p>
... ...
</body>
</html>

 


줄바꿈과 단락간의 여백이 생긴 것을 볼 수 있습니다.

 

3. 줄바꿈 <br> , 수평선긋기 <hr>



HTML 에디터에서는 빈 칸이 여러 개 있어도 하나의 빈 칸으로 간주되고, 엔터키로 줄을 바꾸어도 빈 칸 하나로 간주됩니다.
줄 바꿈을 하기 위해서는 <br> 태그가 필요합니다.
<br> 태그는 시작태그만 있고 종료태그는 없습니다.

<hr> 태그는 수평선을 그려주는 태그입니다. 시작태그만 있습니다.

위 파일에 <br> ,<hr> 태그를 적용해 보겠습니다. 

<h2> (1) 인터넷의 유래 </h2>
    <p>
    인터넷은 1960년에 ... 만들어졌다고 합니다.</p>
    <p>
    1960년대 ... 다른 종류의 LAN들을 선으로 연결하였습니다. <br>
    이것이 인터넷의 시초라고 합니다.
    </p>
    <hr>
    
<h2> (2) 인터넷 프로토콜(Protocol) - TCP/IP </h2> 
    <p>
    프로토콜을 번역하면 통신규약이라 할 수 있습니다. <br>
    컴퓨터를 선으로 연결하는 것만으로는... 이 약속을 프로토콜이라 합니다. <br>
    인터넷은 서로 다른 네트워크끼리 연결한 것이며 ... 이것이 바로 TCP/IP 입니다.
    </p>
    <p>
    ▶ TCP (Transmission Control Protocol) <br>
    TCP는 데이터를 안정적으로 전송하기 위한 연결 지향 프로토콜입니다. <br>
    이는 데이터가 손실되거나 ... 등의 기능을 제공합니다.
    </p>
    <p>
    ▶ IP (Internet Protocol) <br>
    IP는 컴퓨터 네트워크 상에서 데이터를 패킷 단위로 전송하는 역할을 하는 프로토콜입니다. <br>
    각 디바이스는 ... 최적의 경로로 전송합니다.
    </p>
    <hr>

 


제목 태그( <h1>~<h6>) 와 문단 태그(<p>) 및 줄바꿈,줄긋기 태그를 이용하여 웹페이지의 텍스트를 보다 읽기 편하게 만들 수 있습니다.
앞으로 더 알아볼 <HTML> 태그와 CSS 태그의 역할은 웹페이지를 웹브라우저에 보다 시각적으로 보기 편하게 하는 것입니다. 이 관점을 가지고 HTML과 CSS 코드를 하나씩 확장해 간다면 보다 쉽게 코딩에 적응할 수 있을 것입니다.

'웹(Web) 이야기' 카테고리의 다른 글

6.<HTML> 텍스트 표현 태그-<b>,<u>,<i>  (1) 2024.01.29
5. <HTML> 리스트 태그 <ol>, <ul>, <li>  (0) 2024.01.27
3. 코딩 실습 환경 준비 - Visual Studio(VS) Code  (1) 2024.01.25
2. <HTML> 이란 ?  (0) 2024.01.24
1. 인터넷(Internet)과 웹(Web)  (0) 2024.01.22
'웹(Web) 이야기' Related Articles more