HTML
HTML이란?
HyperText Markup Language의 약자로 JS와 같은 프로그래밍 언어가 아닌, 웹 페이지의 뼈대를 구성하는 마크업 언어입니다.
마크업 언어?
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어. 자세한 설명은 다음을 참고하시면 되겠습니다.
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
태그는 일반적으로 여는 태그<>와 닫는 태그</>가 짝이 되어 구성됩니다.
HTML의 구조와 문법
HTML의 구조는 다음과 같습니다.
<!DOCTYPE html> // 이 문서가 html 문서임을 명시.
<html>
<head>
<title> 제목 </title>
</head>
<body>
<div> 내용 </div>
</body>
</html>첫 줄을 제외한 모든 태그들이 여는 태그와 닫는 태그로 이루어져있음을 확인 할 수가 있습니다.
각 여는 태그들은 해당 태그로 닫아줘야하며, 다른 태그로 닫을 수 없습니다.
ex)
<!DOCTYPE html> // 이 문서가 html 문서임을 명시.
<html>
<head>
<title> 제목 </title>
</span> // head 태그로 열었으나 head 태그로 닫히지 않아 오류가 발생하게 됩니다.
<body>
<div> 내용 </div>
</body>
</html>자주 사용하는 HTML 요소
- Division
<div> - Span
<span> - Image
<img> - Link
<a> - Unodererd Lisk & List Item
<ul>&<li> - Input (text, radio, Checkbox etc..)
<input> - Multi-line Text Input
<textarea> - Button
<button>
태그의 자세한 설명은 https://developer.mozilla.org/ko/docs/Web/HTML/Element 에서 확인 하실 수 있습니다.
시멘틱 요소
시멘틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다.
왜 시멘틱요소를 사용해야하나?
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했습니다. 그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 이른바 <div> 지옥이 되는 경우가 많았습니다. 이런 경우를 방지하고자 시멘틱 요소를 사용합니다.
자주 사용하는 시멘틱 요소
-
<article>: 독립적이고 자체 포함된 콘텐츠를 지정합니다. -
<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다. -
<footer>: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다. -
<header>: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다. -
<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에<ul>을 넣어 목록 형태로 사용합니다. -
<main>: 문서의 주된 콘텐츠를 표시합니다.
시멘틱 요소에 대해 더 많은 정보는 https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1
에서 확인 하실 수 있습니다.
id와 class
id
id는 html 요소에 고유한 이름을 부여하는 속성입니다.
ex)
<button id='login-btn'> 로그인 </button>이런식으로 button 요소에 'login-btn'이라는 고유한 id를 부여 할 수 있습니다.
class
class는 반복되는 영역을 유형별로 나눌 때에 사용하는 속성입니다.
ex)
<div class='comment'>
<p>댓글내용</p>
</div>
<div class='comment'>
<p>댓글내용</p>
</div>이런식으로 댓글창의 반복되는 영역을 comment 라는 클래스를 부여 할 수 있습니다.
피드백은 환영입니다!!
