[HTML/CSS] HTML의 기본 구조

1. 글 제목 만들기

: <h></h>

📌

<!DOCTYPE html>
<!-- src/main/webapp/2/heading.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>글제목 1</h1>
<h2>글제목 2</h2>
<h3>글제목 3</h3>
<h4>글제목 4</h4>
<h5>글제목 5</h5>
<h6>글제목 6</h6>
</body>
</html>

2. 단락 나누기

:

📌

<!DOCTYPE html>
<!-- src/main/webapp/2/p.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>요리란?</h3>
<!-- p태그는 단락별로 나누어줌/ 많이 쓴다고해서 단락이 벌어지지 않음.-->
<p>요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체를 말합니다. 
요리는  크게 나누어 지역별로, 시대별로 그 종류를 구분할 수 있습니다.</p>
<p>전통적인 한국 정식은 밥, 국, 김치와 함께 나오는 많은 반찬들로 이루어집니다. 
한국 요리는 주로 쌀을 주식으로 하며 반찬은 참기름, 된장, 간장, 소금, 마늘, 생강 
그리고 고추장 등의 양념으로 맛을 냅니다.</p>
</body>
</html>

3. 글자 두껍게 하기

:

📌

<!DOCTYPE html>
<!-- src/main/webapp/2/b.html -->
<html>
<head>
<meta charset="UTF-8">
<title>b태그 : 글자 강조. 글자를 굵게 표시</title>
</head>
<body>
<h3>라면 맛있게 끓이는 법</h3>
<p>냄비에  물 2컵 반을 붓고 <b>건더기 수프</b>와
 <b>분말수프</b>를 <b>미리</b> 넣고 끓입니다. 
 면을 넣기 전에 <b>수프를 먼저 넣어 끓이는 것</b>이 비결입니다.</p>
</body>
</html>

4. 줄 바꿈과 공백 삽입

: ,

📌

<!DOCTYPE html>
<!-- src/main/webapp/2/br.html -->
<html>
<head>
<meta charset="UTF-8">
<title>br 태그 : new line, nbsp : 공백문자한개</title>
</head>
<body>
<p>안녕&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;하세요.
안녕 하세요.<br><br><br><br><br>반갑습니다.</p>
</body>
</html>

5. 목록 만들기

1)순서 없는 목록 : 구성상 항목의 순서가 내용과 무관한 경우
: <ul> <li></li> </ul>

📌

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul태그 : 순서가 없는 목록, ol태그 : 순서가 있는 태그</title>
</head>
<body>
<h3>음식 박람회 입장 안내</h3>
<ul>
	<li>초대권 소지자 : 등록데스크에서 본인 확인 후 교환권 지급<br>
	<li>사전 등록자 : 등록데스크에서 본인 확인 후 교환권 지급<br>
	<li>일반 관람객 : 일반 관람객은 매표소에서 입장권을 구입하여 입장<br>
</ul>
</body>
</html>

2) 순서 있는 목록 : 항목의 순서가 중요한 경우
: <ol> <li></li> </ol>

📌

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul태그 : 순서가 없는 목록, ol태그 : 순서가 있는 태그</title>
</head>
<body>
<!-- 주석, 설명문, comment : html로 번역되지 않는 영역. 소스보기에서 볼수 있음.
	프로그램의 설명을 추가할 수 있는 영역-->
<!--<h3>음식 박람회 입장 안내</h3>-->
<h3>음식 박람회 입장 안내</h3>
<ol>
	<li>초대권 소지자 : 등록데스크에서 본인 확인 후 교환권 지급<br>
	<li>사전 등록자 : 등록데스크에서 본인 확인 후 교환권 지급<br>
	<li>일반 관람객 : 일반 관람객은 매표소에서 입장권을 구입하여 입장<br>
</ol>
</body>
</html>

6. HTML문서에 설명글 달기(주석)

: <!— , —>

저작자표시 (새창열림)

'수업(국비지원) > HTML, CSS' 카테고리의 다른 글

[HTML/CSS] CSS 적용 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 테이블 삽입하기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 오디오,비디오 삽입하기, 링크걸기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 - 이미지 삽입하기 (0)	2023.04.17
[HTML/CSS] HTML의 기본 구조 (0)	2023.04.17