본문 바로가기

웹코딩/HTML

html 5강ㅣhtml, head, body 태그

코드는 성공적으로 작성했지만 뭔가 불편합니다.

왜냐하면 h1, strong, img 태그는 탭 화면에 바로 보이지만,

title 태그는 탭 화면에 보이지 않습니다.

그래서 뭔가 구분하고 싶단 말이죠.

탭의 모양을 나타내는 태그들을 묶고싶단 말이에요.

그리고 그게 아닌 태그들도 따로 묶고싶네요.

어떻게 해야할까요?

바로 body, head 태그를 사용하면 됩니다.

 

 

body 태그를 먼저 해볼까요?

vsc에서 <body> 라고 입력하면 <body></body>로 자동완성시켜주는데요,

왜일까요?

간단합니다. 그 자체로 뭘 할 수 있는 게 아니거든요.

body 태그는 탭 화면에서 보이는 것을 묶는 태그인데,

body 태그만 있으면 아무것도 하지 못합니다.

애초에 묶는 역할이기 때문이죠.

 

그럼 body 태그에 h1, br, img 태그같은 것들을 다 집어넣어보겠습니다.

저장하고 새로고침하면

아무런 차이도 없습니다.

왜일까요?

body 태그는 탭 화면에서 보이는 태그들을 묶는 역할을 하거든요.

그래서 당연히 보이는 건 아무런 차이가 없습니다.

 

이번엔 head 태그도 만들고 거기에 title 태그를 집어넣어보겠습니다.

음 완벽해.

역시 탭을 새로고침하면 아무런 차이가 없습니다. 하지만 이렇게 해야 합니다. 문법이거든요.

 

 

그런데 여기서 끝이 아닙니다.

html 안에서는 html 말고 다른 언어를 쓸 수 있는데요, css와 js라는 언어를 사용할 수 있습니다.

그러니까 무려 html 파일 하나에 3개의 언어를 넣을 수 있다는거죠.

그런데 언어가 3개면 html이 뭐가 html인지, css인지, js인지 알수가 없잖아요.

 

그래서 html에게 "이 코드는 무슨 언어니까 너가 알아서 읽어" 라는 명령을 해줄 필요가 있는데,

역시나 명령은 태그로 합니다.

 

지금까지 작성한 건 무슨 언어죠?

html이죠.

그럼 html에게 "이건 html이니까 너가 알아서 읽어" 라고 할 필요가 있습니다.

html 파일에게 이건 html이라고 가르쳐줘야 한다니 좀 이상하죠..? ㅋㅋㅋ

html에게 "이건 html이야" 라고 가르쳐주는 태그는 바로 "html" 이란 태그입니다.

뭔가 가면 갈수록 웃겨지고 있는데 아무튼 html이란 태그로 모든 코드를 감싸보겠습니다.

감싼거랑 안감싼거랑 역시 결과는 똑같습니다.

 

 

근데 html에게 이건 html이라고 가르쳐줘야 하는데 html이라고 넣지 않아도 오류가 나지 않았습니다.

그 이유가 뭘까요?

바로 브라우저가 자동 완성을 해주기 때문이죠.

그래서 지금 시대에는 따로 html 태그를 넣지 않아도 잘 작동하지만 웹 표준에 위배되기 때문에 꼭 넣으셔야 합니다.

 

마지막으로 이 문서는 html로 작성했다는 걸 선언해주는 태그를 추가해주겠습니다.

vsc 같은 경우에는 <! 라고만 하면 바로 자동완성을 추천해줍니다.

역시 아무런 차이가 없지만 꼭 넣으셔야 합니다.

 

감사합니다! 다음 시간에 뵙겠습니다.

'웹코딩 > HTML' 카테고리의 다른 글

html 강좌 아이디어가 없네요 ㅋㅋ  (8) 2021.01.05
html 6강ㅣp 태그  (2) 2021.01.03
html 4강ㅣtitle 태그  (4) 2020.12.30
html 3강ㅣimg 태그  (8) 2020.12.29
html 2강ㅣbr 태그  (5) 2020.12.27