본문 바로가기

프로그램 강좌

[html02]html = head + body


Hello, html world!

기존에는 html 내용을 그대로 복사 붙여넣기 하셨겠지만 이번엔 좀 더 코딩스러운 코딩을 해봅시다.

  1. Visual Stuio Code 실행(메모장을 열어도 상관 없음)
  2. htmlworld.html로 파일 저장
  3. html:5 라고 입력(메모장이신 분들은 아래 코드 복사 붙여넣기)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
		
    </body>
</html>
  1. <body></body> 사이에 <p>Hello html World</body> 입력
  2. 저장 후 크롬(or IE) 브라우져에서 실행 ※ 저장한 파일을 드래그 해서 브라우져로 끌어놓으면 실행 됨.

저번에 해봤던거니까 충분히 하실 수 있겠죠? 화면에 Hello html World 라고 떳나요? 여러분들은 이제 html의 세계에 오신겁니다.

자 이제 설명 들어갑니다.

 

DOCTYPE html

DOCument TYPE 이 문서의 타입을 정하는 란인데, 이 문서 설정에 따라 엄격하게 문법을 체크 혹은 완화 시킬 수도 있습니다. 하지만, 어려울테니 우선은 이런게 있다만 알고 넘어갑시다. 진짜 퍼블리셔의 길을 걸을게 아니라면 몰라도 됩니다.

 

html

html 코딩은 크게 head, body로 나뉩니다. 다리(footer)는 없습니다. body 안에 들어가는 풋터 태그는 있습니다.

<!DOCTYPE html>
<html>
    <head>
    	***    
    </head>
    <body>
		***
    </body>
</html>

이 구조가 이제 보이시나요? 규칙이 보이기 시작했죠?

 

head

head는 말그대로 머리 혹은 두뇌의 역할이예요. 본부를 헤드쿼터라고 하죠? 헤드에서 명령한걸 바디는 반드시 따라야 해요. 약간 작전 사령부 같은 느낌이예요.

여기서는 디자인을 꾸며주는 CSS도 일괄적으로 선언할 수 있고, 메타태그라고 해서 이 사이트에 대한 정보도 담아줄수 있어요. 뭐뭐가 있는지는 다음에 배우기로 하고 이런거구나 라고만 생각하고 넘기세요.

 

body

body는 말그대로 몸이예요. 몸통, 코딩의 뼈대를 여기에서 만들어줘요. 코딩을 하다보면 정말 기초공사가 중요하거든요. 없어서는 안될 곳입니다.

코딩에는 html 안에 head와 body가 있다. 이게 다예요. 쉽죠? 


여기까지 읽어주셔서 감사드리고, 다음 강의에서는 좀 더 세분화된 태그를 알아볼게요.



2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?

2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2

2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)



728x90