1.HTML 이 뭔데?

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.

좀 더 직관적으로 말하자면, 처음 웹개발을 시작하는 이들이라면 HTML CSS Javascript를 우선적으로 공부하게 되는데,

  • HTML은 웹페이지의 내용과 구조를 담당하고,
  • CSS는 웹페이지의 디자인과 스타일을 담당하고,
  • Javascript는 웹페이지에서의 동작(행동)들을 프로그래밍 하는 언어라고 생각하면 당장 공부를 시작하는데 지장은 없을 것이다.

2.HTML, 그래서 어떻게 시작하는데?

VisualStudioCode(VScode) 에서 ! 를 치고 엔터를 눌러라.

Vscode는 웹개발에 필요한 거의 모든 Extension(확장자)를 지원하므로 설치하는 것을 권장한다.

<!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>
  
</body>
</html>

놀랍게도 우리는 ! 와 엔터 를 누른것 만으로도 벌써 웹페이지를 만들었다.
모든 html 내용은 <html> 과 </html> 사이에 들어가는데,
<head> ~ </head> 사이에는, 브라우저(사용자)에선 보여지지 않지만 메타데이터의 설정등이 위치하고 <body> ~ </body> 사이에는, 웹브라우저에 출력되는 모든요소들이 들어가게 된다.

3.HTML 기본문법

HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다. HTML document는 요소(Element)들의 집합으로 이루어진다.

태그는 대문자와 소문자를 구분하진 않지만, W3C에서 HTML4의 태그를 소문자로 권장하기에 HTML5에서도 태그를 소문자로
쓰는 것이 일반적이다.

<!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>
  <h1>안녕하세요</h1>
  <p>HTML포스팅 입니다.</p>
</body>
</html>

html 요소는 웹페이지를 구성하는 모든 요소들을 포함한다. 위 예제를 보면 html 요소는 body 요소를 포함하며 body 요소는 h1, p 요소를 포함한다. 이 중첩 관계(부자 관계)로 웹페이지의 구조(structure)를 표현한다.

이런 중첩 관계를 가독성 좋게 표시하기 위해 중첩 관계마다 들여쓰기(indent)를 한다.

간단한 기본 태그 몇가지만 더 언급하고

<strong> ~ </strong>: 글씨 굵게
<u> ~ </u> : 밑줄 (underline)
<h1> ~ </h1> : 제목이랄까? h1~h6까지 있고, 1 부터 순차적으로 작아진다.
<br> : 줄바꿈 태그, 엔터와 같은느낌인데, 닫힘태그가 필요없음 단순히 시각적인 기능.
HTML에서는 열심히 엔터키로 줄바꿈 하려고 해도 안된다. 줄바꿈이 필요하면 <br>를 사용하자 !

그럼 단순히 h태그는 p태그보다 size만 큰 글씨인가 ?
다음 포스팅에서는 반드시 특정태그를 이용해서 HTML을 작성해야하는 이유를 간략히 포스팅하겠다.