-
HTML 문서 작성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 17. 02:15
이번시간에는 HTML 문서를 만들어 보도록 하겠습니다.
지난 시간에 작성해 본 것은, 틀에도 맞지도 않고, 제대로 된 HTML 문서의 형태가 아니였습니다.
그래서 이번시간에는 Visual Studio Code, VSC에서 제대로 된 HTML 문서를 작성해 보도록 하겠습니다.
제일 먼저, <!DOCTYPE html> 태그를 작성하여, 문서 시작을 명령해야 됩니다.
위 태그는 구글 크롬에게 지금 만드는 이 문서가 HTML 문서임을 알려줍니다.
그런 다음, <html></html>태그로 문서를 열고 닫을 수 있습니다.
위 태그 사이에 있는 내용들이 무엇이든 간에 모두 HTML 문서라는 것을 지칭합니다.
그럼 여기서 잠깐! <!DOCTYPE html>은 왜 닫지 않는지에 대해 궁금할 수 있습니다.
<!DOCTYPE html> 태그는 self-contained 태그라고 해서,
태그 자체로 정보를 제공하기 때문에, 혼자 스스로 열고 닫는 태그입니다.
따라서, <!DOCTYPE html> 태크는 마킹을 하거나 명칭하는 내용이 없고,
그 자체가 정보이기 때문에, 열고 닫을 필요가 없는 태그입니다.문서는 head, 헤드와 body, 바디로 크게 두 가지 부분으로 나뉩니다.
개발자로서, 우리가 이제 항상 기억해야 되는 점은, 태그는 열었다면, 꼭 닫아줘야 된다는 점입니다.
만약, 태그를 열고 닫지 않는다면, 브라우저는 무엇이 head이고, body인지를 헷갈려하기 때문에, 태그를 꼭 열고 닫아야 합니다.여기서 또 알아둬야 할 점은, head는 유저에게 보이지 않는다는 것입니다.
head는 브라우저에게 웹사이트에 관한 필요한 정보를 제공할 뿐입니다.다시 정리하면, head는 보통 웹사이트를 이용하는 유저에게는 보이지 않고, 구글 크롬같은 브라우저에게 필요한 정보를 제공할 뿐입니다.
즉, 사람들이 읽는 컨텐츠는 head에는 없고, body에 있습니다.head 안에는 title이라는 태그가 있습니다.
<title>This is my title</title>, <제목>이건 제목이야</제목>
이라고 쓰고 태그를 닫은 후, 문서를 저장(ctrl+s)하겠습니다.
문서를 저장하지 않았다면 위 index.html 옆에 동그라미가 있고,
저장을 하면 index.html 옆 동그라미가 사라진다는 걸 확인할 수 있습니다.문서는 매번 저장(ctrl+s)하는 습관을 들이도록 합시다.
그럼 이제 저번시간에 확인했더 방법대로 새로고침을 해서 구글 크롬에서 해당 문서를 확인해 보도록 하겠습니다.
제목창, 탭에 우리가 작성한 제목, This is my title이 보일 것입니다.
이번에는 body로 이동해서 h1태그를 생성해 보도록 하겠습니다.
h1이란, 큰 제목을 쓰고 싶을 때 사용하는 태그입니다.
<h1>This is my big title</h1>, <h1>이건 큰 제목입니다</h1>
라고 h1태그를 이용해 보겠습니다.
h태그는 1부터 6까지 크기 순서대로 있는데, 1이 가장 크고, 6이 가장 작습니다.
그럼 h6태그를 이용해서,
<h6>This is my small title</h6>, <h6>이건 작은 제목입니다</h6>
라고 작성 후, 저장해 보도록 하겠습니다.
그럼 이제 구글 크롬으로 가서 새로고침 후, 확인해 보겠습니다.
이번 시간에 작성해 본 것이 바로, HTML 문서입니다.
'이거 공부 했더니 어때? > HTML & CSS & JS' 카테고리의 다른 글
의미있는 태그 vs. 의미없는 태그 (0) 2020.10.19 HTML문서 작성 #2 (0) 2020.10.18 HTML 태크 구조 (0) 2020.10.16 HTML이란? (0) 2020.10.14 공부계획 #2 HTML (0) 2020.10.13