1. HTML 의미
HTML은 HyperText Markup Language의 약자다.
HTML을 통해 웹 문서를 작성할 수가 있다. 작성된 웹 문서는 웹 브라우저가 해석하여 클라이언트에게 보여주게 될 것이다.
2. 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<title>웹 문서 제목</title>
</head>
<body>
<h1>제목 크기1</h1>
<p>내용</p>
<h2>제목 크기2</h2>
<p>내용</p>
<h3>제목 크기3</h3>
<p>내용</p>
<h4>제목 크기4</h4>
<p>내용</p>
<h5>제목 크기5</h5>
<p>내용</p>
<h6>제목 크기6</h6>
<p>내용</p>
</body>
</html>
<!DOCTYPE html>
- Document Type의 약자로 자신이 작성한 문서의 버전이 HTML 5라는 것을 웹 브라우저에게 알려줄 필요가 있기 때문에 가장 먼저 선언을 해준다. 현재는 <!DOCTYPE html>로 단일화되어있으며, 자세하게 알고 싶으면 각자 검색해서 찾아보길 바란다.
<html> ~ </html>
- 문서와 문서의 끝을 나타내는 태그로 </html> 뒤에는 아무것도 오면 안 된다.
<html lang ="ko">
- HTML 문서가 어떤 언어로 작성되었는지를 나타낸다. 영어로 작성되었다면 ko를 en로 바꾸면 된다.
- lang = "ko"를 지정해줌으로써 웹 접근성을 향상시킨다.
<head> ~ </head>
- 웹 브라우저 화면에는 보이지 않는다.
- 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력 (title, meta, link, style 등이 있다.)
<title> ~ </title>
- 웹 문서의 제목을 표시한다.
<body> ~ </body>
- 웹 문서에 들어갈 내용을 표시한다.
<h1> ~ </h1>
- header의 약자로 제목을 의미한다.
- <h1> 에서 <h6>으로 갈수록 글씨 크기가 작아진다.
<p> ~ </p>
- Paragraph의 약자로, 내용을 의미한다.
<hr>
- horizontal rule의 약자로, 수평 가로선을 정의할 때 사용한다.
- HTML 문서에서 내용을 구분하거나 주제의 변화를 정의한다.
3. HTML 입문자가 알면 좋은 TIP
1. HTML는 들여쓰기를 안 해도 코드에 지장이 없으나 구분하는 데에 있어서 불편함을 겪지 않으려면 들여쓰기를 하는 편이 낫다.
2. Visual Studio Code에서 !를 입력 후 enter 및 tab을 누르면 HTML의 기본 구조가 자동으로 입력된다.
3. Visual Studio Code 마켓플레이스
- open in broswer 설치 후 alt + b를 누르면 웹 브라우저가 실행된다. 코드가 변경되면 일일이 alt + b를 눌러 확인해야 돼서 번거롭다.
- live server 설치 후 alt + l + alt + o를 누르면 웹 브라우저가 실행된다. 코드가 변경되면 저장할 때마다 변경된 값으로 바뀌어있기 때문에 일일이 웹 브라우저를 실행시켜주지 않아도 된다.
4. ctrl + , 을 누른 후 tab size를 입력하면 들여쓰기 크기를 변경할 수 있다.
'FrontEnd > HTMl' 카테고리의 다른 글
| [HTML] 리스트와 테이블 (0) | 2021.07.17 |
|---|---|
| [HTML] 링크와 이미지 (0) | 2021.07.17 |
| [HTML] Style 속성 (0) | 2021.07.17 |
| [HTML] 문자셋 (0) | 2021.07.17 |
| [HTML] 텍스트 요소 (0) | 2021.07.16 |