Web
HTML

HTML의 기본 (1)

17 Aug 2021

My 20th Post

HTML의 기본 (1)

by Enterprise Kim.T.H

const html_Basic = (tag) => {
  console.log("tag가 무엇이고 어떻게 구성되어 있는지 알아봅시다!");
};

1. HTML은 무엇이고, 어디에 쓰일까?

먼저 HTML이 무엇인지 알아봅시다.

학교에서는 HTML의 역사와 언제 어떻게 만들어졌는지를 먼저 공부하지만. . .

우리는 그럴필요도 없구, 그럴 시간도 없는 바쁘고 젊은 현대인이기 때문에 스킵 !

HTML을 처음 접하게 되면 굉장히 복잡하다고 생각할 수 있습니다.

그렇지만 조금만 공부하면 아무리 복잡한 HTML소스도 바로 읽고, 판단이 가능해집니다.

HTML은 ‘<HTML></HTML>’ 이렇게 생긴

‘tag = 태그’

라고 불리는 요소들로 이루어져 있습니다.

쉽게 예를 들어보면 우리가 많이 하는 사진보정, 합성, 디자인 작업을 예로 들 수 있습니다.

잘 알다시피 모든사진은 아주 작은 픽셀들로 이루어져 있어서 포토샵에서 계속해서 확대하게 되면

네모난 픽셀들로 이루어져 있는 것을 볼 수 있습니다.

그런 것 처럼 모든 웹페이지의 소스를 보게 되면 HTML로 이루어져 있고 HTML를 더욱 자세히 보면

하나 하나의 태그(tag)들로 이루어져 있는 것을 볼 수 있습니다.

다음으로 HTML의 역할은 페이지의 큰 틀, 즉 레이아웃을 만드는 역할이라고 할 수 있습니다.

우리가 디자인을 할 때 인디자인이나 일러스트를 활용하여 레이아웃을 만든다고 표현하는데요.

그것과 똑같다고 볼 수 있습니다.

HTML을 이용하여 웹사이트의 기본적인 레이아웃을 잡고 더 필요한 부분은 후에 CSS를 이용하여 꾸미게 됩니다.

2. HTML의 구성

위에서 말한 것과 같이 HTML은 기본적으로 태그(tag)로 이루어져 있습니다.

각 태그(tag)들에는 이름이 있고 각각 위치와 역할이 정해져 있습니다.

아래는 가장 기본적인 HTML의 구성입니다.

<!DOCTYPE html>
<!-- 이 문서는 HTML로 만들어 졌습니다.-->
<html>
  <!-- HTML문서의 시작입니다.-->
  <head>
    <!-- 여기는 head로, 언어와 환경설정등을 데이터를 저장합니다. -->
    <title>여기는 title</title>
  </head>
  <body>
    <!--실제로 화면에 나타나는 부분입니다.-->
    여기는 body
  </body>
</html>

뭔가 엄청 복잡해보이지만 . . .

사실 하루만 배워도 별거 아닌 것을 알고 있습니다.

~~프로그래머 그까짓거 아무 것도 아니네~~

참고로 중간에 ‘여기는 head’라고 적혀있는 부분의 모양이 이상하다는 것을 눈치 채셨을 겁니다.

이런 형태를 주석태그라고 부르는데, 이것의 의미는 그냥 주석이라는 뜻입니다.

주석으로 표시한 부분에는 우리가 쓰고 싶은 말을 쓸 수 있고, 사용자가 보는 화면에는 표현되지 않습니다.

그래서 이 부분이 무엇을 의미하는 것인지 잃어버리지 않도록 적어놓는 용도로 사용합니다.

위에 적어 놓은 주석부분을 읽어보면 HTML의 기본 구조를 마스터하셨다고 할 수 있습니다.

마치며,

오늘은 첫시간으로

HTML을 왜 쓰는지,

HTML은 무엇으로 이루어져 있는지,

HTML의 기본 구조와 각 태그의 역할이 무엇인지

이렇게 기본적인 3가지를 알아보았습니다.

코딩 공부는 쉽게, 더쉽게, 너무 쉽게 해야지 재미을 느낄 수 있다고 생각하기

때문에 너무 쉬운 부분을 먼저 알려드렸습니다.

다음에는 HTML의 BODY태그 부분에 사용자들이 볼 수 있도록 컨텐츠를 넣어줄 때 사용하는

기본적인 태그들과 시간과 머리 용량이 허락한다면 . . . 시맨틱 태그(Semantic Tag)까지 알아보겠습니다.

그럼 안녕 !

ps. 글꼴이 이상하여 읽기가 불편할 것 같은데… 조만간 페이지 폰트를 교체하도록 하겠습니다!

Good Bye ~