안녕하세요. 플입니다.
오늘은 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부터 시작하시는 걸 추천드리긴 하지만 다른 언어부터 시작하고 싶으시다면 그것 또한 멋진 선택일 거예요.
티스토리의 장점은 코드를 몰라도 블로그 관리를 할 수 있다는 점이기도 하지만
또 코드를 알면 더 다양하게 활용이 가능하니까 쓸만한 부분을 조금 가져와봤습니다.
제목처럼 대충 이해해보기이니까 너무 어렵게 보지 마시고 가볍게 봐주세요~
이해가 안 가도 괜찮아요. 사실 조금 생소하고 어려운 게 사실이니까요. 너무 무섭게 보지 마시고 그냥 재미로 봐주세요~
그럼 이만.
총총.
'coding > html + css' 카테고리의 다른 글
| [css] 도형을 회전시키는 애니메이션을 만들어보자 (10) | 2020.11.22 |
|---|---|
| [html] <!DOCTYPE html> 대충 이해해보기 (29) | 2020.10.03 |
| [css] css 속성 강제 적용하기 (우선 적용) (58) | 2020.09.17 |
| [css] 긴 문장의 단을 나눠보자 (36) | 2020.09.04 |
| [css] 텍스트 줄 바꿈 단어 단위로 하기 (2) | 2020.06.12 |
