웹의 시작은 HTML 부터입니다.
HTML이란?
HyperText MArkyp Language의 약자로써 브라우저에서 보여지는 데이터들의 뼈대입니다. 웹페이지는 HTML 문서라고도 불리우듯이, HTML 태그들이 없으면 웹은 존재하지 않습니다.
태그
HTML 태그는 꺾쇠 괄호로 감싸서 표현합니다.
<h1> 제목 태그 </h1>
<p> 단락 태그 </p>
<strong> 텍스트 강조 태그 </strong>기본 구조
<!DOCTYPE html>
<html>
<head>
// 헤드 부분
<title></title>
</head>
<body>
// 바디 부분
</body>
</html><!DOCTYPE html>문서 가장 위에 위치하며, html로 이루어진 문서라는 정보를 알려줍니다.html모든 태그를 감싸는 문서의 루트 요소 입니다. 모든 태그는 이 태그 안에서 존재합니다.head문서의 메타데이터(metadata)를 정의합니다.
metadata란? HTML 문서에 대한 정보로 웹 브라우저 화면에는 직접적으로 표현되지 않는 정보를 의미 합니다.
메타데이터의 종류로는<title>,<style>,<link>,<script>,<base>등이 존재합니다.
-
titlehead 태그 자식 태그로써 문서의 제목을 정의합니다. -
body웹 브라우저를 통해 보이는 내용입니다. 우리가 현재 사용하는 브라우저 화면을 나타냅니다.
🍕 태그의 종류는 많지만 모두 외우려고 않아도 됩니다. 그때 그때 구글을 통해 서치하고 찾아 쓰는 것 또한, 개발자의 덕목!
속성
태그에는 속성을 추가할 수 있습니다. attribute라고 명칭되어 집니다. 태그의 부가적인 정보를 넣어줄 수 있고, 각 태그마다 가지는 속성은 각기 다릅니다.
<h1 width="100"> 넓이가 100이라는 것을 알려주는 속성입니다.</h1>
<div class="friends"> 영수 </div>
<div class="friends"> 철수 </div>
// 영수와 철수를 담고 있는 div 태그는 같은 class 속성을 가지고 있습니다. 이를 통해 css를 적용할 때 같은 선택자를 이용할 수 있게 됩니다.속성 또한, 태그의 종류만큼 다양하게 존재합니다. html5에선, 속성의 대소문자를 구분하지 않지만 W3C에서는 속성 이름을 사용할 때 소문자를 사용할 것을 권장합니다.
또한 XHTML이라는 또 다른 데이터 구조에선 엄격하게 소문자로만 사용해야 합니다.
시멘틱
태그의 사용은 작성자의 선택에 따라 자유롭습니다. 하지만, 태그들은 각자 사용되는 의미가 있으므로 그에 알맞게 사용하는 것이 권장됩니다. 이러한 태그의 올바른 사용을 시멘틱한 마크업이라고 일컬어 집니다.
<h1>은 제목을 나타내고, <aside>는 사이드 공간을 의미하는 등 각자가 가지고 있는 의미를 이용해 마크업하는 습관을 가집시다!
마치며
html은 문법과 사용이 쉬워 쉽게 여겨지기 쉽습니다. 하지만, 웹에서 CSS로 꾸미거나 자바스크립트를 이용해 브라우저를 더욱 동적으로 보여지게 하는 모든 것들이 결국은 HTML 태그를 대상으로 이루어지게 됩니다! HTML을 모두 알고 있을 필요는 없지만, 어떤 역할을 하는지 정확히 알아갑시다.
