HTML의 요소 구조

오늘은 HTML의 요소 구조에 대해 알아보겠습니다.

HTML의 태그의 사용방법을 구체적으로 알아보는 시간입니다.

HTML의 요소와 태그 개념을 뚜렷하게 잡아 놓는다면, 앞으로 배울 CSS(디자인)나 Javascript(반응형)에서는 많이 중요하게 사용되기 때문에 오늘 HTML의 요소 구조에 대해 알아보도록 하겠습니다.

요소 구조에 대해 알아보려면 먼저 '요소'가 무엇인지 알아야겠죠?

요소(Element) : HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미한다.

요소는 위와 같은 뜻을 가지고 있습니다. 여기서 '시작 태그' 그리고 '종료 태그'에서 HTML 첫 번째 시간에서 알아보았지만, 또다시 한번 알아보도록 하겠습니다.

태그(Tag) : 요소(Elements)의 일부로 시작 태그와 종료 태그 두 종류가 있다.
시작 태그는 요소를 시작하며, 종료태그는 요소를 끝내는 기능을 가지고 있다. 일부 태그 중에는 종료 태그가 없는 것도 있다.(Ex. br 태그)

요소와 태그의 개념이 뚜렷이 구별되지 않고 혼용되는 경우가 많은데, HTML에서는 굳이 요소라는 말을 쓰지 않아도 되지만 앞으로 배울 CSS(디자인)나 Javascript(반응형)에서는 요소라는 말이 아주 중요한 용어가 됩니다.

속성(Attribute) : 요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계를 의미한다.
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성 값(value)으로 표현된다.

이 위에 3개만 알고 계시면 HTML의 요소 구조도 이해하기 빠르실 겁니다.

HTML의 요소를 알기 위한 3가지의 단어의 뜻을 배웠습니다.

이제는 위에 3가지의 단어를 이용하여 HTML의 요소 구조에 대해 설명해보겠습니다.

<태그명 속성명="속성값">내용</태그명>

▲ HTML 태그의 문법

위와 같이 태그명을 작성해 주시고, 그 다음 속성의 이름을 적어주시고, 따옴표로 속성 값을 적어주시면 됩니다.

그리고 마지막으로 종료 태그로 내용을 감싸주시면 됩니다.(종료 태그가 없는 태그도 있음)

그럼 사진과 같은 코드를 가져와서 설명해보도록 하겠습니다.

<h1 class="primary">DevKuma</h1>

자 빨간색으로 칠해진 부분이 태그입니다.

그리고 노란색 부분이 속성명, 그리고 초록색 부분이 속성값입니다.

차례대로 설명해 보도록 하겠습니다.

그다음 노란색 부분은 속성명입니다.

속성명은 굉장히 다양합니다.

예시로 코드를 가져온 것에는 class라고 적혀있습니다.

class는 무엇일까요? 이것도 유추해 보면 알 수 있듯이 다양한 뜻이 있겠지만, 그중 '부류, 종류'라는 뜻을 가지고 있습니다. CSS에서 사용할 테지만, class를 사용하여, 태그를 종류별로 분류하여, 효과를 줄 수 있습니다.

이렇게 유추하기 쉽게 HTML은 이름이 작성되어있습니다.

여기서 class 뿐만 아니라, id 또는 태그에 맞게 생기는 속성명까지 다양하게 존재합니다.

그다음으로 초록색으로 적혀있는 부분은 속성 값입니다.

속성 값은 속성명의 따라, 속성 값이 달라집니다.

속성값은 꼭 따옴표(', ")를 사용하지 않아도 되긴 합니다만,

속성 값을 따옴표로 감싸지 않으면, 아래와 같은 예상치 못한 오류가 발생할 수 있습니다.

<h1 class=desigl class>제목</h1>
<h1 class="desigl class">제목</h1>

이렇게 위에 있는 태그는 'desigl'만 속성 값으로 받아드렸고, 'class'는 속성값으로 받아지지 않았습니다.

하지만 아래쪽에 따옴표로 감싸진 속성 값은 전부다 'desigl class'라고 정상적으로 받아진 모습을 알 수 있습니다.

※ 속성 값을 감쌀 때는 대부분이 큰 따옴표(")가 사용되며, 작은따옴표(')도 사용할 수 있습니다." ※

이제 HTML의 문법을 거의 다 아셨으므로, 태그에 대해 더 알아보고, 속성명과 값을 더 알아보도록 하겠습니다.

지금까지 읽어주셔서 감사합니다.

지금까지 HTML의 요소 구조에 대해 알아보았습니다.

티스토리툴바