HTML
HTML(Hyper Text Markup Language)은 마크업(Mark-up)언어로 웹페이지의 기본적인 형태를 만드는 코드이다.
프로그래밍 언어가 아니기때문에 연산은 할수없고 단순히 웹페이지의 겉모습만을 담당한다.
예를 들면 글자나 버튼같은 것들이 HTML로 만들어지며 쉽고, 직관적이기때문에 쉽게 배울수있다.
기본구조
visual studio code에서 느낌표를 누르고 탭을 누르면, html의 기본구조템플릿이 생성된다. (! + Tab)
HTML의 기본적인 구조이며 HTML을 작성하기 위해서는 꼭 있어야 하는 구조이다.
- <!DOCTYPE HTML> : HTML5를 사용함을 브라우저에 선언하는 역할을 한다.
- <html> : 전체 html 문서를 감싸는 태그이다. html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 된다.
- <head> :html 문서에 대한 정보를 나타내는 부분이다.
- <title> : head 안에 들어가는 태그로 제목표시줄의 내용을 나타낸다.
- <meta> : meta 역시 head 안에 들어가는 태그로 문서에 대한 설명을 표시한다. 속성으로 charset="utf-8"이라고 한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시하는것이고, 이 부분이 있어야 한글이 깨지지 않는다.
- <body> : html 문서에서 실제적으로 화면에 보여지는 부분을 나타낸다.
<h#>태그. 하나의 제목을 만들때 쓰입니다.
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>까지 존재합니다.
- 1부터 6까지의 숫자는 글자크기의 차이를 의미하며 1이 가장 크고 6이 가장 작습니다.
★ html
★ result
<p>태그
- p태그는 문단을 넣을때 사용되는 태그입니다. (글자크기는 기본)
- 문단은 항상 새로운 줄에서 시작합니다.
★ html
★ result
<br>태그
기본적으로 HTML은 엔터를 쳐서 줄바꿈을 해도 연속적인 텍스트가 나오며 줄바꿈이 되지않습니다.
이때 강제적으로 줄바꿈을 하고 싶을때 <br>태그를 사용합니다.
★ html
★ result
<hr>태그
hr태그는 웹 페이지에 수평선을 그려줍니다.
이러한 hr태그는 문단을 의미적으로 분리하고자 할 때 사용합니다.
★ html
★ result
<pre>태그
pre태그로 감싼 문장은 입력한 형태 그대로 웹페이지에 표현할 수 있습니다.
예를들어 HTML은 엔터, 탭, 스페이스를 눌러도 하나의 공백만을 인식하지만, pre태그로 감싸주면 입력한 형태 그대로 출력됩니다.
★ html
★ result
* Reference
'HTML5' 카테고리의 다른 글
| [HTML5] src, href 속성 정리 (0) | 2022.09.28 |
|---|---|
| [HTML5] input태그 속성 : autofocus, placeholder (0) | 2022.07.31 |
| [HTML5] #3.html5 (0) | 2022.07.24 |
| [HTML5] #2.html5 태그 (0) | 2022.07.24 |
| [HTML5] HTML5 사용을 위한 VSCODE초기 설정 (0) | 2022.07.21 |
