HTML 요소(Element)
HTML 문서에 대해 알아보았으니
이번에는 HTML을 이루고 있는 요소에 대해 알아볼까요?
HTML 요소(Element)의 구성
이전 포스팅에서 HTML은 Tag로 둘러 싸인 Markup Langauge라고 설명했습니다. 그럼 이 Tag는 어떤 규칙을 가지고 있는지, 어떻게 사용해야 하는지 알아야 쓸 수 있겠죠? 😉
<p align="center">Sey의 개발 블로그</p>단락을 나타낼 때 사용하는 <p> tag를 사용해서 하나의 요소(element)를 작성하였습니다. element의 주요 부분을 나누면 다음과 같습니다.
요소(Element)
여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 합니다.
여는 태그(Opening tag)
요소의 이름과 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작부터 효과가 적용되기 시작합니다. 이 경우 단락의 시작 부분부터 적용됩니다. 괄호 안에 요소의 이름과 함께 속성도 넣어서 여러 효과를 줄 수 있습니다. 속성에 대해서는 아래에서 살펴봅시다.
속성(Attribute)
속성은 요소에 대한 설정을 담고 있습니다. id, name 같은 외부에서 접근할 수 있는 이름을 작성할 수도 있고, style 속성을 통해 css를 부여하거나 아예 class를 설정해 외부에서 style을 줄 수도 있습니다. 때로는 요소에 따라서 필수로 필요하는 속성들도 존재합니다. 아래 예시처럼 이미지를 넣는 <img> tag의 경우 이미지의 주소(src)와 대체 텍스트(alt)를 명시해줘야 합니다.
<img src="http://t1.daumcdn.net/tistory_admin/static/top/pcrtn/img_common_tistory.png" alt="티스토리 이미지">
내용(Content)
요소의 내용이며, 이 경우에는 단순한 텍스트입니다. 자식 요소가 들어가서 중첩된 형태를 가질 수도 있습니다.
<body>
<header>헤더</header>
<section>섹션</section>
<footer>풋터</footer>
</body>
닫는 태그(Closing tag)
요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그(Opening tag)와 같습니다. 닫는 태그는 요소의 끝에 위치합니다. 이 경우에는 단락의 끝 부분에 위치합니다. 빈 요소가 아닌 닫는 태그가 꼭 필요한 요소라면 적어줘야 합니다. (닫는 태그를 작성하지 않아도 브라우저가 오류로 처리하지 않고 닫는 태그가 있는 것처럼 동작하기도 합니다. 하지만 예기치 않은 오류가 발생할 수도 있으니 닫는 태그를 꼭 작성해주도록 합시다. 😉)
빈 요소(Empty element)
모든 요소가 여는 태그와 닫는 태그로 이루어진 것은 아닙니다. 위의 <img> tag처럼 닫는 요소 없이 단일 태그로 사용되는 태그들도 존재합니다. 자식 노드(text, 요소)를 가질 수 없는 요소입니다. 주로 문서에 무언가를 첨부할 때 사용합니다. <img> 요소 같은 경우에는 해당 위치에 이미지를 삽입합니다. 빈 요소의 종류로는 아래와 같습니다.
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<track>
<wbr>빈 요소 상세 설명: developer.mozilla.org/en-US/docs/Glossary/Empty_element
메타 태그와 시맨틱 태그
HTML은 메타 태그(메타 요소)와 시멘틱 태그(시맨틱 요소)로 분류됩니다. 간단한 정의는 아래와 같습니다.
메타 태그(Meta Tag)
HTML 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지, 문자 세트(언어 설정)는 어떤 것을 사용하는지 등의 정보를 담고 있는 태그 입니다.
시맨틱 태그(Semantic Tag)
Semantic 즉, 의미론적인 태그입니다. 이 태그는 일반 DIV 태그로 바꿔도 문서가 형태나 모습이 바뀌지 않습니다. 다만 유지보수를 하거나 협업을 할 때 해당 태그가 어떤 영역을 의미하는 것인지 파악하는데 도움이 되도록 합니다. 또한 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확하게 제공할 수 있도록 합니다.
요소가 무엇인지 어떻게 구성되는지 알아보았습니다.
다음 포스팅에서는 메타 태그와 시맨틱 태그를 더 자세하게 알아보아요.😁
'Web > HTML' 카테고리의 다른 글
| HTML(Hyper Text Markup Language)이란? <이름의 정의> (0) | 2020.09.08 |
|---|
댓글