1. HTML 이란
HTML이란 웹페이지의 구성요소를 표현할 때 사용되는 지배적(아직까지 절대적으로 필요한)인 마크업구조 언어이다.
H -> Hyper
T -> Text
M -> Markup
L -> Language
2. HTML의 문법
- 구성요소
<h1> 내용입니다. </h1>위에 보이는 바와 같이
<h1> , </h1> => 이 부분을 태그(Tag)라고 부릅니다. 그리고 앞부분을 시작태그, 마지막을 종료태그라고 합니다.
<h1> 내용입니다. </h1> => 이부분 전체를 요소(Element)라고 합니다.
- 요소
요소는 크게 세가지로 나눌 수 있습니다.
-블락 요소
다른 블락 요소를 포함할수도 있으며, 인라인 요소 역시 포함할 수 있습니다.
또한 블락 요소에는 원래 태그가 내포하고 있는 의미가 있는 태그가 있는데,
이를 시멘틱 태그(Sementic tag)라고 합니다.
블락 요소는 후에 나올 높이와 너비값을 가지고 있어서 늘리거나 줄일 수 있습니다.
쉽게 비유하자면 상점이라고 생각하면 되겠습니다.
간판에 따라서 그 상점이 가진 의미와 의도를 알 수 있기 때문이죠.
그렇기 때문에 블락 요소는 기본적으로 쌓이는 성질을 가지고 있습니다.
<div></div>
<h1></h1>
<p></p>
.
.
.
-인라인 요소
인라인 요소는 블락 요소와는 다르게 인라인 요소만을 포함할 수 있습니다.
또한 별다른 의미를 내포하고 있지 않습니다.
기본적으로 주어진 크기는 없습니다.
쉽게 비유하면 컨테이너나 박스 정도로 생각하면 되겠습니다.
겉으로 봐서는 뭐가 있는지 모르겠고,
안에 내용물을 봐야만 그제서야 의미를 알 수 있습니다.
일단 기존 박스 옆에 차례차례 나열하고,
만약 옆에 공간이 없다면 위에 쌓기 시작하는
그런 모양을 생각하시면 되겠습니다.
<a></a>
<span></span>
<strong></strong>
.
.
.
-빈 요소
내용은 넣을 수 없으며, 그저 기능을 수행합니다.
<br>
<hr>
/-------------------/
br은 줄바꿈을 시켜주는 태그입니다.
hr은 수평선을 그어 시각적으로 문서를 구분 시켜줍니다.
- 속성
html의 요소 중 태그만으로는 기능하지 못해 속성이라는 값을 더해 기능을 완성합니다.
예를 들어
인라인 요소에 스타일을 적용하면 높이와 너비값을 줄 수 있습니다.
<span>왜 나 꽈찌추는 햄보칼수 없는고야</span>
/------------------------------------------------------/
<span style="display:block; width:100px">이제 꽈지추는 햄보케</span>이렇게 디스플레이 속성으로 블락 값을 주면 span도 크기를 가질 수 있게 됩니다.
여기서의 style 역시 속성(Attribute)이라고 부릅니다.
그리고 display, width를 속성값이라고 부릅니다.
그 외에도 alt, src, href 등의 속성이 있습니다.
이후의 태그를 학습하며 속성에도 익숙해질 수 있습니다.
3. 시맨틱 태그
- 시맨틱이란
'의미론적', '의미의'라는 뜻을 가지고 있습니다.
그래서 시맨틱 태그는 이 코드를 읽는 개발자와 웹브라우저가 명확히 코드를 알아볼 수 있다는 특징을 가집니다.
요소의 내용이 아니라 태그자체에 의미가 내포되어 있기 때문입니다.
아래는 우리가 사용할 수 있는 시맨틱 태그들입니다.
| <article> | <aside> | <details> | <figcaption> | <figure> |
| <footer> | <header> | <main> | <mark> | <nav> |
| <section> | <summary> | <time> |
직접 웹페이지에서 찾아보겠습니다.
header: 사이트의 소개 및 로그인 등을 포함합니다.
footer: 작성자의 연락처, 저작권, 등 페이지 가장 하단에 위치합니다.
aside: 사이드바와 같은 것을 포함합니다.
article: 본 사이트의 내용을 포함합니다.
nav: 탐색바, 메뉴 등 유저의 사용편의를 위한 것들을 포함합니다.
section: 해당 페이지의 세부 메뉴와, 접근성을 위한 것을 포함합니다.
4. HTML 기본 구조
- DOCTYPE
html 문서의 맨 처음 명시해야 하는 태그입니다.
이 문서의 버전을 알려줍니다.
- html
html로 작성됐음을 브라우저에게 알립니다.
lang으로 언어를 설정할 수 있습니다.
- head
메타태그와 타이틀을 포함합니다.
메타태그는 다른 웹브라우저 및 소셜미디어에서 해당 페이지를 크롤링(정보를 긁어가는것)할 때의 정보를 표현합니다.
타이틀은 브라우저창 제목을 나타냅니다.
- body
주로 화면에 보이는 요소들을 포함합니다.
한 문서에 한개만 존재합니다.
https://www.w3.org/TR/2012/WD-html-markup-20121025/elements.html
HTML elements - HTML5
www.w3.org
이곳에서 각 태그의 종류와 기능을 알아볼 수 있습니다.
