<티스토리 블로그를 운영하기 위한 기초적인 수준의 html/css 기본 개념 포스팅입니다>
html 구조
사람의 몸을 크게 머리와 몸통으로 구분하듯이 html도 head 머리와 body 몸통으로 구분할 수 있습니다.
사람의 머리는 직접 행동하기 보다는 제어하는 역할을 합니다.
html의 head도 웹페이지에 직접 보여주기 보다는 기본적인 설정들을 정해주는 역할을 합니다.
그리고 우리가 눈에 보는 웹페이지의 내용들은 body에 기술하게 됩니다.
tag, content, element란?
태그, 컨텐츠, 요소
html을 공부하다 보면 자주 접하게 되는 태그,컨텐츠,요소의 용어에 대해서 먼저 이해하고 넘어가겠습니다.
태그는 opening tag, closing tag로 구분됩니다.
opening tag는 여는 태그, 시작 태그라고도 불립니다.
closing tag는 닫는 태그, 끝 태그라고도 불립니다.
head를 예로 들면 처음에 시작하는 <head>를 opening tag
끝에 존재하는 </head>를 closing tag라고 합니다.
closing tag는<>사이에 /를 넣어줘서 opening tag와 구분해준답니다.
opening tag: <>
closing tag: </>
컨텐츠 content는 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다.
요소 element는 opening tag + content + closing tag를 합친걸 의미합니다.
그럼 실제 코드로 이해해 보겠습니다.
<title>반가워요</title> 코드가 보이시나요?
opening tag는 처음 시작을 알리는 <title>이 되고 closing tag는 </title>이 되겠네요.
가운데에 "반가워요"라는 문장이 컨텐츠가 되겠습니다.
그리고 <title>반가워요</title> 전체가 요소 element가 되겠습니다.
tag 태그 특징
태그에는 여러가지 특징이 있는데 3가지만 정리해 보도록 하겠습니다.
위에서도 설명드렸지만 tag는 opening tag와 closing tag로 구성되어 있습니다.
그런데 closing tag 닫는 태그가 없는것도 있습니다!
위에 <meta> 태그를 보시면 closing tag인 </meta> 태그가 보이지가 않습니다.
문법적으로 잘못 작성한게 아니라 맞게 작성된거죠!
closing tag가 필요없는 주요 tag 리스트입니다.
area, base, basefont, br, col, frame, hr, img, input, link, meta, param
tag는 대소문자를 구분하지 않습니다.
하지만 소문자로 작성하는걸 추천합니다!
● 개인적으로 공부하며 정리한 내용입니다 ●
잘못된 내용이 있으면 언제든 답글 달아주세요
감사합니다
댓글