HTML 기초 공부(1) - 태그, 속성, 요소
HTML 이란 무엇인가?
HTML은 웹페이지 표시를 위해 개발된 마크업 언어이다.
우리가 흔히 사용하는 수많은 웹페이지들이 이런 HTML의 문법을 사용해서 만들어진다. 때문에 HTML은 웹페이지를 구성하는 가장 기본 요소라고 할 수 있다.
마크업 언어란 무엇인가?
여기서 마크업 언어(Markup Language)란 태그 등을 이용하여 문서가 화면에 표시되는 형식을 나타내거나 데이터의 구조를 명기하는 컴퓨터 언어의 일종이다.
태그란 무엇인가?
태그는 요즘 사람들이 흔히 사용하는 #강아지, #관광지 같이 어떠한 항목을 보충 설명하는 키워드, 낱말이라고 볼 수 있다.
예를 들어서 "나는 나비를 좋아합니다."라는 문장이 있다고 치자. 그렇다면 우리는 저것을 1개의 문장으로 취급할 수 있을 것이다. 혹은 "나, 나비" 같은 낱말로 분리할 수도 있을 것이고 "~는, ~를" 같은 조사로 분류하거나 "좋아한다" 같은 용언으로 분류할 수도 있다.
HTML로 만들어진 문장또한 저런식으로 각 요소를 분류할 수 있다. 하나의 문장을 통째로 '요소'라고 치면 그것을 꾸며주는 세부 요소를 '태그'와 '속성'으로 분류할 수 있다.
예를 들어 특정 웹페이지에 아래와 같은 문장이 있다면 여기서 요소, 태그, 속성은 각각 어느 부분일까?
HTML 이란 무엇인가?
라는 문장이 있다면 실제 html 상에서는 아래와 같은 형식으로 문장이 구성되어 있다.
<h2 data-ke-size="size26">HTML 이란 무엇인가?</h2>
요소(Element) : <h2 data-ke-size="size26">HTML 이란 무엇인가?</h2> 전체를 의미한다.
즉, h2태그와 속성 그리고 내용물을 전부 포함한 개념이다.
태그 (Tag) : <h2> (시작 태그), </h2> (종료 태그)를 의미한다. 여기서 h2는 글의 제목을 나타내는 태그 중 하나다. 여기서 속성까지 시작 태그 부분에 함께 포함된다. 아까 태그는 #강아지 같이 항목을 보충 설명하는 키워드라고 했다. 그것처럼 <h2></h2> 라는 태그는 해당 내용이 #제목에 해당한다는 것을 알려준다.
속성 (Attribute) : data-ke-size="size26" 부분을 의미한다. 태그가 강아지같이 내용의 좀 더 큰 분류를 나타낸다면 속성은 세부적인 형태를 의미한다고 할 수 있다. 강아지를 예를 들면 얘가 검은 강아지인지, 크기가 얼마나 되는지 등을 의미한다고 할 수 있다.
내용 (Content) : HTML 이란 무엇인가? 라는 문장 그 자체를 의미한다. 즉 문장 형태를 제외한 순수한 내용만을 의미한다.
정리하자면 HTML의 문장은 하나를 요소라고 취급하며 세부적으로 태그, 속성, 내용으로 나뉜다는 내용이다.
실제로 요소, 태그, 속성은 아래와 같은 특징을 가진다.
요소 (Element)
- HTML 문서를 구성하는 가장 기본적인 단위
- 시작 태그와 종료 태그, 그리고 그 사이에 위치하는 내용으로 구성
- 태그와 속성을 모두 포함하는 포괄적인 개념
태그 (Tag)
- 요소의 시작과 끝을 정의하는 역할
- < > 괄호로 묶여 있으며, 시작 태그와 종료 태그로 나뉨
- 예: <p>, <h1>, <img>
속성 (Attribute)
- 요소에 대한 추가적인 정보를 제공
- 시작 태그 안에 위치하며, 속성 이름="속성 값" 형식으로 작성
- 예: <img src="image.jpg" alt="이미지 설명">에서 src와 alt