<목차>
1. vscode는 왜 사용하는가?
2. HTML 문법
3. tag의 이름 및 구조
1. vscode는 왜 사용하는가?
HTML은 간단하게 메모장으로 작성해도 상관없지만 개발자가 일일이 손으로 코드를 치기엔 다소 무리가 있다.
vscode는 HTML문서 편집 및 개발자의 작업능률을 향상해 줄 수 있는 편의기능들을 제공해 주는 하나의 문서편집기이다.
vscode를 사용하면 개발을 더 편하고 빠르게 할 수 있기 때문에 vscode를 사용하게 된다.
2. HTML 문법
컴퓨터에게 명령을 내리려면 우리가 사용하는 언어체계와 다른 컴퓨터의 언어체계를 사용해야 한다. 따라서 HTML문법을 알고 있어야 HTML문서를 작성할 수 있게 된다.
HTML문법의 예는 아래와 같다.
<html>
<head></head>
<body>안녕 나는 너의 첫 번째 문서가 될거야.</body>
</html>
위의 내용처럼 HTML은 태그를 사용해 작성된다. <html></html>처럼 <></> 꺽쇠 안에 태그의 이름을 명시하며,
<body> 안녕 나는 너의 첫 번째 문서가 될 거야. </body>와 같이 태그 사이에 들어갈 내용들을 적을 수 있다.
<html>
<head>
</head>
</html>위의 코드를 보면 <html></html> 태그 사이에 <head></head> 태그가 들어있는데 <head></head> 태그를 감싸고 있는 <html></html> 태그를 '부모 태그'라고 부르며 <html></html> 안에 들어가 있는 <head></head> 태그를 '자식 태그'라고 부른다.
3. tag의 이름 및 구조
브라우저는 html파일 안에 들어있는 태그의 이름을 확인해서 화면을 구성하며, 태그의 이름에 따라서 태그의 속성이 달라지게 되어 화면의 구역을 나누어준다. 이 태그명에 따라 html을 작성하는 것을 시맨틱 태그 작성이라고 부른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>위의 코드는 html문서의 기본 양식이다.
<!DOCTYPE html></html> : 문서의 형식을 HTML5를 사용한다는 뜻. 어떤 버전을 사용하고 있는지 명시
<html lang="en"> : html 문서라는 내용이고 en의 뜻은 영문으로 작성된 문서라는 것을 알려준다.
<head></head> : 문서의 메타데이터, 브라우저에서 문서의 정보들을 전달할 요소를 작성하는 영역이다.
<title>Document</title> : 웹 페이지의 제목을 나타내는 태그 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있다.
<body></body> : 문서의 본문 내용이며, 우리가 보여주고 싶은 페이지의 내용 요소를 작성하는 영역이다.