본문 바로가기
coding/html + css

[html] html을 대충 이해해보자

by 씸플레이 2020. 9. 29.
728x90
반응형

 

안녕하세요. 플입니다.

오늘은 html에 대해서 이해해보도록 해요

 


 1.  html

html은 "Hyper Text Mark-up Language"의 약자입니다. 

 

하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지를 만들 때 쓰는 언어예요.

웹페이지의 뼈대를 만드는 언어죠. 티스토리를 하다 보면 종종 만날 기회가 있죠. 

 

완벽한 비유는 아니지만 그림으로 표현하자면 이런 느낌이랄까요.

html은 스케치 css는 색칠이라고 생각하면 좀 더 이해하기 쉬우실 거예요.

 

약속한 구조를 지키는 규칙이 있기도 한데 이거는 우선은 넘어가도록 해요.


 2.  열기 닫기 

 

<div> 아무말 </div>

html에는 열기닫기가 있어요. 위의 코드를 보면 아시겠나요?

<div>가 여는 부분이고 </div>가 닫는 부분이에요. 조금 더 자세히 볼까요? /(슬래쉬)가 붙어있으면 닫는 부분이에요.

 

<>이 꺽쇠로 여는 부분과 닫는 부분을 내용과 구분해주는 거예요.

 

그리고 꺽쇠로 감싼 부분을 태그라고 합니다.

 

그리고 이 여는 태그와 닫는 태그는 꼭 같이 다녀요. 그런 규칙을 만들어 두었기 때문에 우리는 그 규칙을 지켜줘야 해요.

하나라도 빠지면 컴퓨터는 어디서부터 어디까지가 같은 영역인지 알지 못해서 에러를 잔뜩 띄우게 됩니다.

 

컴퓨터는 섬세하지 못해서 처음부터 끝까지 잘 알려줘야 합니다.


 3.  <head>와 <body>

왼쪽 코드는 많이 보시는 티스토리 html 편집을 누르면 나오는 코드입니다. 

 

이름이랑 똑같이 <head>는 머리 <body>는 몸이 맞아요.

사람의 머리에는 가 들어있고 몸을 제어하기도 하죠? html에서 <head>라는 태그도 비슷해요.

 

<head>라는 태그는 웹페이지의 설정 부분이라고 생각해보셔도 괜찮아요. 그래서 설정은 할 수 있지만 페이지 자체에 나타나지는 않아요. 하지만 여기서 설정하지 않으면 웹페이지가 제대로 작동하지 않겠죠.

 

그래서 티스토리에 애드센스를 넣거나, 통계를 보려고 하면 <head> 태그 안에 뭔가 넣으라고 복사를 해야 하는 엄청 긴 무언가를 주고는 하잖아요? 그런 걸 여기에 넣어서 설정한다고 생각해주시면 된답니다.

 

<head> </head> 사이에 넣으라는 이야기도 많이 들어보셨죠? 아까 말했듯이 여는 부분과 닫는 부분이 있으니 닫기 전에 넣으라는 말이에요. 그래야 컴퓨터가 아 여기가 설정 부분 안에 있는 거구나 하고 알아채 주거든요.

 

 

/

 

<body>는 우리가 몸을 움직이듯이 웹페이지에 나오는 부분을 담당해요.

웹페이지를 열고 보이는 부분은 모두 <body> 태그 안쪽에 쓰여있는 부분이랍니다.

 

아주 크게 본다면 <head> 태그와 <body> 태그를 합친 것이 웹페이지라고 할 수 있겠네요.

물론 이것만 있는 건 아닙니다만 처음 시작할 때는 그렇게 시작해도 괜찮을 거 같아요.

 

 

 


 4.  맛보기

 

종종 코딩은 어떻게 시작하는 게 좋을지 질문해주시는 분들이 계셔서 맛보기만 소개해드렸습니다.

최대한 쉽게 다가올 수 있게 설명해봤는데 어려우셨다면 댓글 남겨주세요~

 

html부터 시작하시는 걸 추천드리긴 하지만 다른 언어부터 시작하고 싶으시다면 그것 또한 멋진 선택일 거예요.

 

티스토리의 장점은 코드를 몰라도 블로그 관리를 할 수 있다는 점이기도 하지만

또 코드를 알면 더 다양하게 활용이 가능하니까 쓸만한 부분을 조금 가져와봤습니다. 

 

제목처럼 대충 이해해보기이니까 너무 어렵게 보지 마시고 가볍게 봐주세요~

이해가 안 가도 괜찮아요. 사실 조금 생소하고 어려운 게 사실이니까요. 너무 무섭게 보지 마시고 그냥 재미로 봐주세요~

 


그럼 이만.

총총.

300x250
반응형

댓글40