html, css
HTML 기본 구조 분석
연잔
2021. 3. 23. 22:43
지난번 포스팅에서 vscode에서 html기본구조를 자동으로 완성시키는 방법을 알아보았다.
비쥬얼 스튜디오 코드(vscode) html 자동완성 기능
나같은 html 초보는 html 기본구조를 자동완성으로 만들면 편하다!! 위와 같은 기본 구조를 만드는 것이다. 1. html 입력하기 코드창에 html을 입력하고 html:5를 선택하면 된다. 2. !+Tap !입력하고 Tap 누
yjin99.tistory.com
앞서 설명한 방법대로 만든 html의 기본 구조를 분석해보자.
먼저 웹페이지에 hellow world를 출력해주는 코드를 실행시켜보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
이 코드는 크게 본문과 본문에 대한 설명으로 나눌 수 있다.
페이지의 나타낼 글과 그림이 있는 본문은 <body>태그로 묶여저 있고 그 본문에 대한 설명은 <head>태그로 묶여져있다. 그런 <head>태그와 <body>태그를 묶고 있는 것이 최고위층 태그인 <html>태그이다.
제일 위에 있는 <!DOCTYPE html>은 이 문서에 html이 담겨져 있다는 뜻이다.
+)위의 실행화면에서 화면에 상단에 뜨는 제목을 바꾸고 싶다면 어떻게 하면 될까?
본문설명에 있는 <title>태그를 수정하면 된다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HELLO</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
