<목차>
- HTML의 개념
- HTML을 구성하는 기본 문법 <head>, <body>
<HTML이란?>
Hyper Text Markup Language의 약자이다.
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 작동하는 언어이다.
HT - HyperText, 문서와 문서가 링크로 연결됨.
M - Markup, 태그(엘리먼트)로 이루어짐.
L - Language
<HTML의 기본 문법>
html을 작성할 때 기본적으로 < >를 사용하고 이 안에 html의 기본 문법이 들어가게 된다.
< >로 이루어진 부분들을 태그(엘리먼트)라고 한다. html 문법에서 정보를 정의하는 형식이다.
ex) <html> : 이렇게 작성된 html 코드를 html 엘리먼트(element)라고 한다.
모든 글에는 시작과 끝이 있는 것처럼 프로그램 코드에도 시작과 끝이 존재하게 된다.
html 엘리먼트들을 사용하여 코드를 작성할 때 작성하는 내용들의 시작과 끝을 표시해 주어야 한다.
다음과 같이 표기하여 해당 부분이 시작하고 끝났음을 표시한다.
ex) <html> ~ </html> : html 영역의 시작과 끝을 나타낸다. ( ~ 부분에 작성하고자 하는 내용이 들어가게 된다. )
html 엘리먼트에는 "head"라는 부분과 "body"라는 부분이 존재한다.
다시말해 head 엘리먼트와 body 엘리먼트가 html 엘리먼트 안에 들어가게 된다.
<head> ~ </head>
head 엘리먼트는 내용을 저장하는 공간이다.
head는 화면에 랜더링 하는 것이 아닌 랜더를 하기 위한 정보를 세팅하는 영역이라고 생각하면 된다.
head 엘리먼트 안에 추가되는 부분으로 <title>이라는 엘리먼트가 존재한다.
여기서 <title>은 웹페이지를 열었을 때 tab에 제목을 저장해 주는 공간이다.
<html>
<head>
<title>myPage</title>
</head>
</html>
<body> ~ </body>
body 엘리먼트에서는 웹페이지에서 보여줘야 하는 것들, 표출해야 하는 것들을 작성한다.
즉, <body> ~ </body> 사이에 들어가는 내용들이 랜더링 되어 웹페이지 상에 표시된다.
<html>
<head>
<title>myPage</title>
</head>
<body>
Hello, World!! This is HTML
</body>
</html>
<body> 안에서 사용하는 엘리먼트(element)
body 영역 안에서 사용하는 대표적인 element들은 다음과 같다.
- <h1>제목1</h1> ~ <h6>제목6</h6> : 사이즈별로 제목을 입력할 수 있다.
- <ul> </ul> : 순서없는 목록을 표시하는데 사용하는 엘리먼트
- <li>리스트1</li> : 리스트를 나타낼 수 있는 엘리먼트
<li>엘리먼트를 사용할 때 <ul>엘리먼트로 묶어줘야 한다.
<html>
<head>
<title>myPage</title>
</head>
<body>
Hello, World!! This is HTML
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<ul>
ul은 unordered list의 약자입니다.
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
</html>
- <a>링크</a> : 링크를 걸 수 있는 엘리먼트
- <input /> : 키보드로 입력하는 값을 입력받을 수 있는 엘리먼트
- <div>영역</div> : 블럭(block)속성을 가지는 영역 (한 줄을 차지함)
- <span>작은영역</span> : 인라인(inline)속성을 가지는 영역 (자기 글자만큼의 영역을 차지함)
여기서 블럭(block)속성과 인라인(inline)속성에 대해 알아보도록 하자.
- 블럭(block)속성 : 한 줄을 전부 차지한다는 말. 블럭속성으로 인해 한줄 한줄 떨어져서 랜더링 되게 된다.
- 인라인(inline)속성 : 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하게 하는 속성이다.
- 인라인속성과 블록속성은 display 속성 안에 있는 2가지 요소값이다.
<html>
<head>
<title>myPage</title>
</head>
<body>
Hello, World!! This is HTML
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<ul>
ul은 unordered list의 약자입니다.
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<a>링크</a>
<input>
<div>영역</div>
<span>작은영역1</span>
<span>작은영역2</span>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML의 기초(4) - <label> 엘리먼트 (0) | 2021.12.27 |
|---|---|
| HTML 응용(1) - element들 간의 관계, 이미지 삽입하기 (0) | 2021.12.22 |
| HTML의 기초(3) - table 생성하기 (0) | 2021.12.21 |
| HTML 코드 (1)~(2) (0) | 2021.12.20 |
| HTML의 기초(2) - <a>, <input> element (0) | 2021.12.20 |