HTML은 웹 문서를 구조적으로 표현하기 위한 언어이다.
CSS는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어이다.
JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 nodejs를 활용하여 서버 제작 및 PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어이다.
웹 문서 표준을 서술하는 언어는 없고, HTML Living Standard 에서 상세한 웹 표준을 제시하고 있으니 참고하자.
문서의 구조나 문서의 틀을 만드는 마크업 언어이다
html
자식과 부모 노드로 구성되어 있고 그 안에 내용이 담긴다.
tag란? 부등호로 묶여있는 HTML의 기본 구성요소이다.
html 태그는 크게 non-semantic 요소, semantic 요소로 구분할 수 있다.
div, span 등이 있으며 이 태그들만 보고는 content에 뭐가 들어가는지 명확한 구분이 어렵다.
<div>
: 하나의 구역(division)을 지정한다.
<span>
semantic 요소란?
HTML5에서 등장한 것으로 모두 div 태그와 같은 기능을 수행하는 태그이다.
div와 가장 큰 차이는 "content를 정확히 알 수 있다."는 것이다.
<header>
: 페이지나 Section의 상단 정보 영역을 의미한다.
<nav>
: 페이지의 네이버게이션 부분을 지정한다.
<section>
: 본문의 여러 내용을 감싸는 영역을 의미한다.
<article>
: 여러 문단을 묶는 태그, 독립적인 콘텐츠 영역을 지정한다.
<aside>
: 페이지의 왼쪽 혹은 오른쪽에 위치한 요소들의 영역을 의미한다. 퀵메뉴나 스크롤탑버튼등에 사용한다.
<footer>
: 페이지나 일부분의 하단 정보 영역 부분을 의미한다.
<details>
: 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 의미한다.
<figure>
: 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자료들의 영역을 지정한다.
<img>
: 이미지를 지정한다.
<ul> & <li>
: Unordered list 와 List item을 의미한다.
<textarea>
: 여러줄의 텍스트를 의미한다.
<button>
: 버튼을 의미한다.
<dialog>
: 대화상자나 창을 지정한다.
그 밖에도 다양한 태그들이 있다.
웹 폼(Web Form): 웹 페이지를 통해 사용자 입력을 받는 것을 말한다.
폼(Form)을 만들기 위한 요소들을 폼 요소라고 하는데 <input>
이 대표적이다.
<input type="type">
처럼 'type'에 특정 형식을 넣어주면 된다.
<input type="text">
: 텍스트 입력
<input type="password">
: 패스워드 입력
<input type="button">
: 버튼
<input type="submit">
: 데이터 전송
<input type="checkbox">
: 체크박스(중복 체크 불가)
<input type="radio">
: 라디오버튼(중복 체크 가능)
<input type="search">
: 검색어 입력 창
<datalist>
: 데이터 목록
개발자가 의도한 요소의 의미를 명확하게 나타낼 수 있다.
div
를 일괄적이게 사용해 나타내면 content가 무엇인지 파악하기 힘들어진다. 시맨틱 태그로 나타내면 어떤 content가 들었는지, 웹 페이지가 어떻게 구성되었는지 파악하기 쉬워진다.
가독성을 높이고 유지보수를 쉽게 할 수 있다.