📗HTML 문서의 구조
문서의 구조
HTML 문서는 일반적으로 아래와 같은 구조로 이루어져 있습니다. 우선 주요 부분에 대하여 알아보도록 하겠습니다.
🔴 html 태그
해당 태그 내부에 있는 내용이 html
코드라는 것을 의미합니다. 항상 html
문서의 최초 시작점이 되는 태그입니다.
태그의 속성과 값
html
문법에서 모든 태그들은 속성(attribute)이라는 것을 가질 수 있습니다. 위 예시에서 html
태그에게는 하나의 속성이 주어져 있고 그 구성은 아래와 같습니다.
위 예시에서 현재 부여된 속성 이름은 lang
이며, 이 속성은 html
문서의 언어를 지정할 수 있도록 합니다. 브라우저는 html
문서의 이 속성에게 주어진 속성 값을 기준으로 문서의 언어를 판단합니다.
위 예시에서 현재 주어진 속성 값은 "ko"
입니다. lang
속성에게 부여할 수 있는 속성 값은 제한적으로 정해져 있으며, 정해져 있지 않은 값을 사용할 수는 없습니다. 지금 당장 알아야 필요는 없지만, 속성의 종류에 따라 부여할 수 있는 값의 규칙은 매우 다양합니다.
속성은 주로, 태그에 대한 세부설정을 위해 사용되는 편입니다.
아래에서 추가 예시를 보여드리겠습니다.
링크를 표기하는 태그
아래와 같은 코드를 코드펜에 작성해보세요.
다음과 같은 내용이 웹페이지에 표기되는 것을 확인하셨나요? 그렇다면, 해당 링크를 클릭해보세요. ✔️
방금 새롭게 보여드린 a
태그는 anchor
라는 의미입니다. 한글로 "닻"이라는 의미처럼, 다른 웹사이트로 이동이 가능한 고리를 거는 것과 같은 역할을 합니다.
a
태그는 href
라는 속성 이름을 이용해 링크가 클릭되었을때 이동시키고 싶은 웹사이트 주소를 명시할 수 있습니다. 위에 주어진 예시는 해당 링크를 클릭하면 https://www.kenhuh.com
으로 이동하도록 하는 a
태그를 HTML 문서에 작성한 것입니다.
href
속성에 해당하는 속성 값은 우리가 원하는 인터넷 주소는 무엇이든 입력할 수 있습니다.
(제 블로그는 팔로우 하셨으리라 생각하겠습니다.)
이제 또 다시 아래와 같은 코드를 코드펜에 작성하고, 화면에 표시된 링크를 클릭해보세요.
처음 만들었던 링크와 바뀐 점을 눈치 채셨나요?
눈치를 채셨더라도 정확히 확인하는 차원에서 구글 검색창에 검색해보도록 하세요.
저 같으면, 대략 what is a tag target _blank site:stackoverflow.com
라고 입력하고 검색 결과를 찾아볼 것 같네요. 😎
부모 태그, 자식 태그
가장 먼저 보여드린 HTML 문서의 구조를 보면, html
태그의 컨텐츠 내부 공간에는 head
와 body
같은 다른 태그들이 입력되어 있습니다.
✔️ 이런 경우, 우리는 html
태그가 head
태그와 body
태그의 부모라고 말합니다.
✔️ 또한 반대로, head
태그와 body
태그는 html
태그의 자식이라고 말합니다.
그렇기에, head
태그는 meta
태그를 자식으로 갖고 있고, h1
태그는 body
태그를 부모로 두고 있다는 말 역시 모두 옳은 말입니다.
🔴 html 태그란?
html 태그에 대한 내용으로 돌아와 정리해보자면,
html
태그는 항상 모든 HTML 문서의 최상위 부모 태그입니다.모든 HTML 코드는
html
태그의 자식으로 작성되어야 합니다.
🟢 head 태그란?
웹페이지 내에 보여주지는 않지만, 기타 부가적인 정보를 추가하는 용도로 주로 사용됩니다. 예를 들어, 검색엔진 관련 메타 데이터가 들어가기도 하며, 브라우저 탭에 표기할 이름을 입력하기도 합니다.
🔵 body 태그란?
브라우저는 body
태그의 자식으로 입력되어진 태그들만 화면에 그리도록 합니다. body
태그 외부의 내용들은 브라우저 화면에 보여지지 않습니다. 즉, 화면에 보여질 태그들을 입력하는 공간이라고 생각할 수 있습니다.
편의상 제가 보여드릴 예제는 <html>
과 <head>
그리고 <body>
태그를 생략하고 보여드릴 수 있으니 참고해주세요. 🙇🏻♂️
요약
여러분은 이제 HTML의 기초 문법규칙과 구조에 대해 배우셨습니다.
모든 HTML 코드는 태그를 이용하여 구성하고, 대부분의 태그는 여는 태그와 닫는 태그를 이용하여 표현합니다.
속성을 이용하여 세부설정을 할 수 있습니다.
HTML 문서는
<html>
,<head>
,<body>
의 구조로 이루어져 있습니다.
태그라는 용어는 요소, 혹은 엘레먼트 라는 용어와 혼용되어 사용되기도 합니다.
Last updated