-
HTML 기본 구조와 태그프로그래밍/Html 2021. 9. 13. 21:03
가장 먼저 Html을 배워야 한다고 하네요?
그럼 Html이란 무엇일까요??
Html은 HyperText Markup Language의 줄임말로 웹 페이지를 위한 마크업 언어입니다.
즉 웹 페이지의 구조를 잡는데 쓰이는 언어입니다.
이렇게만 들으면 감이 그렇게 잘 오지 않습니다. 좀 더 쉽게 생각을 해봅시다.
우리는 지금부터 집을 지을 겁니다. 네모가 살 고양이 집이죠.
그렇습니다. 사실 네모는 개발을 공부하는 고양이입니다.
이 친구를 위해 집을 지어줍시다. 뭐부터 해야 할까요?
그냥 무작정 아빠가 뚝딱뚝딱 만들 수도 있겠지만, 좀 더 체계적으로 만들기 위해 구조를 먼저 설계할 것입니다.
가장 중요한 건 어떤 재료를 쓸지와 어떤 구조로 만들지에 대한 고민이겠죠?
그리고 구조가 나온다면 철골을 세워 구조를 잡을 것입니다. (고양이 집에 철골은 좀 거창하지만..)
이 뼈대에 대한 고민과 구현!
이것이 웹에서는 Html 부분입니다.
자 그렇다면 본격적으로 Html은 어떻게 사용할 수 있고 어떻게 생겼을까요?
먼저 html을 만드는 법은 간단합니다.
파일 명을. html로 해주면 됩니다.
새로운 파일을 만들고 이름을 nemo.html로 지어줬습니다.
이 파일을 클릭해서 열면 브라우저에서 파일이 열립니다.
html의 구조를 살펴보겠습니다.
<!DOCTYPE html> <html> <head> <title>네모 스토리</title> </head> <body></body> </html>html은 기본적으로 여는 태그와 닫는 태그가 있습니다. 말 그대로 태그를 열고, 닫는 것이죠.
물론 한 태그 안에서 바로 닫는 것도 있지만, 기본적으로 태그를 열었으면 닫아줘야 한다는 사실을 기억합시다.
정말 별 거 아닌데 태그 안 닫아서 시간을 낭비하면 슬프지 않습니까?
물론 제 얘기입니다.
구조를 보면 먼저 <html>이라는 큰 태그가 전체적으로 감싸고 있고, 그 안에 <head>와 <body>가 나눠져 있습니다.
head는 눈에 보이지 않지만 이 웹 페이지에 대한 정보와 설정이 담는 곳이고,
body는 실질적으로 보이는 곳을 담는 곳입니다.
웹 페이지에 대한 정보와 설정이라... 그게 뭘까요??
먼저 웹 페이지에는 제목이 있습니다.
이렇게 로고와 제목이 담겨 있죠. 이것에 대한 설정은 <head> 안에 <title> 태그를 이용해 적어줍니다.
지금 저는 <title> 안에 네모 스토리라고 적었습니다. 그렇다면?
네모 스토리라는 제목을 가진 웹 페이지가 생성됩니다.
여러분의 서비스 이름을 저 타이틀 안에 적으면 그 이름을 가진 웹페이지가 만들어지는 것입니다.
순한 맛 시간이기 때문에 아주 간단히 이 정도만 하고 head는 따로 더 깊게 다루겠습니다.
이번엔 body를 살펴보겠습니다.
웹 페이지에 실제 보이는 곳이라고 했습니다. 그럼 아무 글자나 쳐볼까요?
<!DOCTYPE html> <html> <head> <title>네모 스토리</title> </head> <body> hello Nemo!! </body> </html>body 안에 첫 입문 국룰이라고 불리는 hello world! 가 아닌 hello Nemo! 를 쳐보겠습니다.
nemo.html 실행화면
말 그대로 웹 페이지 화면에 글자가 보입니다..!
html은 이걸로 끝입니다. head에는 설정을 body에는 보이는 것들을 담으면 됩니다.
그런데 이제 뭐 이런 생각이 드네요...
body안에 저걸 다 언제 쓰며 어떤 게 제목이고 어떤 게 본문인 지 구분하기가 쉽지 않겠군...
그래서 사람들이 약속을 하기 시작합니다.
우리 앞으로 <h1></h1> 태그로 감싸고 그 안에 들어가는 것은 제목으로 하기로 해!
그런 수많은 약속을 정하는 약속에 늦은 우리는 그들이 정한대로 따라야합니다
이 약속에 따르면 앞으로 네모를 제목으로 쓰고 싶다면 body안에서 <h1> Nemo </h1>라고 써야 합니다.
이렇게 남들이 나 몰래 한 약속을 내가 지켜주도록 합시다. 허허.
그렇게 만들어진 수많은 약속들이 있습니다.
이제 태그라고 불리는 그 약속들을 알아보도록 하죠..!!