HTML 은 웹을 이루는 가장 "기본적인" 빌딩 블럭입니다.
웹 컨텐츠의 구조와 의미를 결정합니다. html과 같이 쓰이는 CSS와 JS는 부가적인 요소이지, html 없이는 웹 사이트를 만들수가 없습니다 !!!!
그렇게 중요하다고~ 강조가 되는 html , 오늘 한번 제대로 파헤쳐 보겠습니다 🔥
HTML 이란 ?
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
출처 : 위키피디아
html 의 기본 틀은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
이 페이지에서 쓰여지는 글자의 포맷은 utf - 8 을 쓰겠다는 의미
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>html 은 제일 상위에 있는 태그이고, head 와 body 로 나뉘어져 있습니다.
head 는 사용자에게 보여지는 UI적인 요소가 전혀 없고, 구글에서 검색할때 나오는 타이틀이나 부가설명, 북마크를 추가할때 나오는 제목 등이 정의되어 있습니다.
또한 css 파일이 있다면 그것들을 연결해주는 역할을 합니다. 다른 말로는 사용자에게 보여지는 정보가 전혀 없고 메타 데이터만 존재하는 것이라고 말할 수 있습니다 !!
body 는 사용자에게 보여지는 가장 중요한 최상위의 컨테이너입니다.
body 안에서 우리가 작성하는 내용이 사용자이게 바로 보여지는 것입니다.
여기서 잠깐 !!!
웹 프론트를 처음 공부하실 때에 되게 유용한 사이트들을 소개하겠습니다 ✌️
첫 번째는 바로 JS Bin 이라는 사이트입니다.
HTML, CSS, JAVA SCRIPT, CONSOLE 테스트가 바로바로 가능한(?) 사이트입니다.
두 번째는 MDN 이라는 사이트입니다 !!! ( 별 다섯개, 매우 중요 )
mozilla 가 추진해서 만든 웹 사이트로 전세계의 정말 많은 웹 개발자들이 여기서 정보를 확인합니다. 정보들이 가장 빠르게 업데이트 되고 있기 때문에 웹을 개발하신다면 이 사이트를 통해 정보를 확인하고, 예제를 이용하여 공부를 한다면 정말 많은 도움이 될것입니다.
마지막으로 웹 사이트의 기본적인 틀은 어떻게 짜여지는지, 정석(?) 이라고 정해져 있는게 있는지 한번 알아보겠습니다.
MDN 에서 Document and website structure 에 들어가보면 웹 사이트의 구조를 배울 수 있습니다 !!
여기 보시면 "웹 사이트를 짤 때 어느 정도 구조를 잡아두고 짜야한다."
라고 나와있는데요 !! 모든 웹 사이트를 이렇게 짜야 한다는건 아니고 일반적으로는 이렇게 나누면 된다~ 라고 예제를 보여주는 것인데 다음과 같습니다.
정말 깔끔해 보입니다.... 👏 (이런걸 정석.. 이라고 하죠 !?)
헤더는 헤더대로, 푸터는 푸터대로, 메인은 메인대로 !! 어떻게 구역을 나누는지 ?
설명을 해줍니다. 자세한 내용은 직접 영어로 읽어보면서 어떤 내용들이 있는지 확인해보시길 바랍니다.
