프론트 엔드 공부를 위해 HTML과 CSS 카테고리를 만들었다. 차후에 자바스크립트 공부도 시작하게 되면 카테고리를 만들어 포스팅할 예정이다. HTML과 CSS는 프로그래밍 언어가 아닌데 왜 프로그래밍 카테고리에 넣었냐고 말하는 사람이 있을 것 같아 적어둔다. 그냥 별도의 카테고리를 넣기가 귀찮아서 그랬다.
HTML 기본 문법을 살펴보기 전에 HTML이 무엇인지 개괄적으로 살펴보자.
1. HTML이란?
HTML(Hyper Text Markup Language)은 웹 페이지를 위한 마크업 언어이다. 마크업 언어(Markup Language)란, 태그와 같은 요소들을 활용하여 문서나 데이터의 구조를 명기하는 언어의 일종이다. 일반적으로 데이터를 기술하는 데에만 그치기 때문에 C나 Python, Java와 같은 프로그래밍 언어로 불리는 것들과는 구별된다.
HTML의 특징은 아주 간단한 문법 구조를 취하고 있다는 점이다. 그것을 통해 웹 페이지를 구성하기 위한 의미적 요소들을 담을 수 있으며, 다양한 형태로 구조적인 문서를 개발할 수 있다. HTML이외에도 CSS나 자바스크립트 등을 활용하여 더욱 다이내믹한 웹 페이지를 만들 수 있는 것이다.
2. HTML의 문법 구조
이번에는 HTML이 어떤 문법 구조를 가지고 있는지 알아보고자 한다. HTML의 문법 구조는 정말 간단하다. 이것을 익히고, 웹 페이지 작성에 필요한 필수적인 요소들을 익히면 예쁘지는 않더라도 어느정도 형태는 갖춘 웹페이지를 제작할 수 있다. 아래는 HTML의 문법을 설명하기 위한 그림이다.
HTML은 위와 같은 형태로 작성된다. 꽤나 직관적인 구성이라는 생각이 들지 않는가? HTML을 이루는 가장 기본적인 사항은 바로 '태그(Tag)'와 '내용(Content)'이다. 위 그림에서는 HTML 문법을 설명하기 위해 속성과 값이라는 요소도 추가하였지만, 태그와 내용만으로도 웹 브라우저에 간단한 글자들을 표시하게 할 수 있다. 가령 아래와 같은 형태로도 말이다.
<p>안녕하세요</p>
제시한 그림보다 훨씬 간단하다. HTML은 이렇게 간단한 문법만으로 웹 페이지를 구성할 수 있도록 되어있다!
그럼 위 그림을 통해 본격적으로 HTML 문법에 대해 차근차근 알아보자.
2-1. Tag
Tag는 HTML을 이루는 가장 중요한 요소이다. 사용자가 웹 페이지에 작성하고자 하는 내용이 어떤 의미를 담고 있는지를 Tag가 알려준다. HTML은 이러한 Tag들을 통해 개발자들이 HTML 문서를 보고 사용자가 어떠한 의도를 가지고 마크업을 했는지 알 수 있다.
Tag는 '<'와 '>'라는 꺽쇠를 통해 표현된다. 위 그림을 통해 설명하자면 <a>와 같은 형태로 말이다. 여기서 a는 웹 페이지 내에서 다른 웹 페이지로 넘어가는 '하이퍼링크'를 만들어주는 태그이다. 태그는 반드시 꺽쇠안에 포함되어 있어야 한다.
위 그림을 보면 Tag에 Opening Tag와 Closing Tag가 있는 것을 확인할 수 있는데, <a> 태그가 오프닝 태그, 그리고 슬래쉬가 포함된 </a> 태그가 클로징 태그이다. 대부분의 태그는 위 그림처럼 <a></a>와 같이 컨텐츠를 오프닝 태그와 클로징 태그로 감싸주어야 한다. 그렇지 않으면 웹 브라우저는 HTML을 온전히 해석하지 못한다.
하지만 일부 태그는 클로징 태그를 작성하지 않아도 된다. 빈 문단을 만들어주는 <br> 태그가 그러하다.
2-2. Content
오프닝 태그와 클로징 태그에 둘러싸인 Content(내용)은 웹 브라우저가 독자들에게 보여줄 내용이다. 이 곳에 사용자가 독자들에게 전달하고자 하는 글을 작성할 수 있다.
2-3. Attribute
꺽쇠로 표현된 Tag에는 속성(Attribute)이 추가될 수 있다. 속성을 보유하지 않는 Tag도 있겠지만, 그런 Tag에게도 속성을 부여할 수 있는데, 이를테면 id나 class가 그렇다. id나 class는 CSS를 포스팅할때 자세히 다루도록 하겠다.
속성이란, 태그가 보여주는 기본적인 기능 외에 추가적으로 부여할 수 있는 옵션과도 같다. HTML 태그의 속성은 태그의 동작을 제어하기도 하며, 본래 기능을 수정하는 역할도 한다. 이러한 속성을 통해 HTML 태그를 더욱 다양하게 구성할 수 있다. 위 그림에 사용된 <a> 태그를 예시로 든다면, 아래와 같은 속성들을 가지고 있다.
| 속성 | 설명 |
| href | 링크된 페이지의 URL을 명시 |
| target | 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시 |
| rel | 현재 문서와 링크된 문서 사이의 연관 관계를 설명 |
| type | 링크된 문서의 미디어 타입을 명시 |
이 외에도 다른 속성들이 존재한다. HTML 태그는 여러 속성들을 가지고 있으며, 사용자는 태그의 속성들을 사용하여 다양한 기능을 구현할 수 있다.
2-4. Value
각 태그에는 속성을 지정할 수 있고, 각 속성에는 그에 맞는 적절한 값(Value)를 입력해주어야 태그의 속성이 제대로 동작할 수 있다. 속성의 값은 숫자일수도 있으며, HTML에서 미리 지정해놓은 특정한 문자열일수도 있다. 2-3 속성에서 소개했던 태그 <a> 속성들의 값을 아래의 표로 정리해놓았다.
| 속성 | 값 | 설명 |
| href | URL(ex - www.naver.com) | 링크된 페이지의 URL을 명시 |
| target | _blank, _parent, _self, _top | 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시 |
| rel | alternate, author, bookmark, external ... | 현재 문서와 링크된 문서 사이의 연관 관계를 설명 |
| type | 미디어 타입 | 링크된 문서의 미디어 타입을 명시 |
속성들의 값에 대해서는 자세히 설명하지 않겠지만 ㅡ향후 설명할 기회가 있다면 역시 포스팅하도록 하겠다ㅡ 속성들의 값으로는 다양한 형태로 이루어져 있음을 알 수 있다.
여태껏 소개했던 HTML의 문법 구조(Tag, Content, Attribute, Value)들은 모두 하나의 요소(Element)가 된다. HTML은 이러한 요소를 만들 수 있도록 도와주고, 웹 페이지란 결국 이런 요소(Element)들이 모인 요소덩어리로 된 HTML 문서인 것이다. HTML 문법 구조는 정말 간단하고 편리하며 직관적이다. 하지만 결코 쉽지만은 않다. 앞으로 넘어야 할 산들이 많다.
P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| <22.03.11> HTML 공부 일지 #06. HTML 문서에서 특수문자 입력하기 ㅡ Entity Code (0) | 2022.03.11 |
|---|---|
| <22.03.05> HTML 공부 일지 #05. <table>태그로 테이블 구성하기 (0) | 2022.03.05 |
| <22.03.03> HTML 공부 일지 #04. 사용자로부터 입력 데이터 받기! (2) ㅡ 체크박스와 라디오, 셀렉트와 버튼 (0) | 2022.03.03 |
| <22.03.03> HTML 공부 일지 #03. 사용자로부터 입력 데이터 받기! (1) ㅡ <form>, <input> ... (0) | 2022.03.03 |
| <22.03.02> HTML 공부 일지 #02. Anchor 태그, list 태그, Quote 태그 (0) | 2022.03.02 |