웹페이지를 작성(구조화)하기 위한 언어
- Hyper Text : 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- Markup Language: 태그 등을 이용하여 문서나 데이터 구조를 명시하는 언어
ex) html, markdown
기본 구조
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="javascript.js"></script>
<style>
li {
color: black
}
</style>
</head>
<body>
<h1>웹의 구성요소</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
- html : 문서의 최상위(root) 요소
- head : 문서 메타데이터 요소
- body : 문서 본문 요소
- 요소(element) : 시작 태그와 종료 태그 그리고 그 사이 위치한 내용(contents)으로 구성
- 속성(attribute) : 속성을 통해 태그의 부가적인 정보를 설정할 수 있음
HTML Global Attribute : 모든 HTML요소가 공통으로 사용할 수 있는 대표적인 속성
- id : 문서 전체에서 유일한 고유 식별자 지정
- class : 공백으로 구분된 해당 요소의 클래스의 목록(css, js에서 요소를 선택하거나 접근)
- data-* : 페이지에 개인 사용자 정의 데이터를 저장하기 위해 사용
- style : inline 스타일
- title : 요소에 대한 추가 정보 지정
- tabindex : 요소의 탭 순서
시맨틱 태그(Semantic) : HTML5에서 의미론적 요소를 담은 태그
-
기존 영역을 의미하는 div 태그를 대체
-
요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 쉽게 함
-
검색엔진 최적화(SEO)를 위해서 메타태그, 시맨틱 태그 등을 통한 마크업을 효과적으로 활용해야 함
- header : 문서 전체나 섹션의 헤더(머리말 부분)
- nav : 네비게이션
- aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 컨텐츠
- section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
- footer : 문서 전체나 섹션의 푸터(마지막 부분)
- form
- a
- table
<div> <div></div> </div> <div> <div></div> <div></div> </div> <div></div><header> <nav></nav> </header> <section> <article></article> <article></article> </section> <footer></footer>- Non sementic 요소
DOM(Document Object Model) 트리
- 텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조 (렌더링 : 웹사이트 코드를 사용자가 보게 되는 웹 사이트로 바꾸는 과정)
- HTML, XML 문서의 Programminginterface로 HTML과 Javascript가 상호작용 할 수 있도록 하는 도구
-
HTML 문서에 대한 모델을 구성함
-
HTML 문서 내에 각 요소에 접근 / 수정에 필요한 프로퍼티와 메서드를 제공함
-
문서 노드 : Document에 해당하는 트리 최상단 계층으로, 문서 전체를 가리키는 객체. DOM 트리로 웹페이지를 접근하는 시작점
-
요소 노드 : 모든 HTML 태그에 해당(속성노드를 가질 수 있는 유일한 노드)
-
속성 노드 : 모든 HTML 태그의 속성은 속성노드
-
텍스트 노드 : HTML 문서의 의 모든 텍스트는 텍스트 노드. 개행, 공백은 명시적으로 보이지 않더라도 텍스트 노드로 취급함
-
주석 노드 : HTML 문서의 모든 주석은 주석노드
-
인라인 / 블록 요소
-
HTML 요소는 크게 인라인과 블록 요소로 나뉨
- 인라인 요소 : 글자처럼 취급
- 블록 요소 : 한 줄 모두 사용
-
텍스트 요소(Inline)
태그 설명 <a></a> href 속성을 활용하여 다른 URL로 연결하는 하이퍼링크 생성 <b></b> <strong></strong> 굵은 글씨 요소 중요한 강조하고자 하는 요소 (보통 굵은 글씨로 표현) <i></i> <em></em> 기울임 글씨 요소 중요한 강조하고자 하는 요소 (보통 기울임 글씨로 표현) <br> 텍스트 내에 줄 바꿈 생성 <img> src 속성을 활용하여 이미지 표현 <span></span> 의미 없는 인라인 컨테이너 -
그룹 컨텐츠(Block level)
태그 설명 <p></p> 하나의 문단 (paragraph) <hr> 문단 레벨 요소에서의 주제의 분리를 의미하며 수평선으로 표현됨 (A Horizontal Rule) <ol></ol> <ul></ul> 순서가 있는 리스트 (Ordered List) 순서가 없는 리스트 (Unordered List) <pre></pre> HTML에 작성한 내용을 그대로 표현. 보통 고정폭 글꼴이 사용되고 공백문자를 유지 <blockquote> </blockquote> 텍스트가 긴 인용문 주로 들여쓰기를 한 것으로 표현됨 <div></div> 의미 없는 블록 레벨 컨테이너 -
form
-
<form>은 정보(데이터)를 서버에 제출하기 위해 사용하는 태그 -
<form>기본 속성- action : form을 처리할 서버의 URL(데이터를 보낼 곳)
- method : form을 제출할 때 사용할 HTTP 메서드(GET 혹은 POST)
- enctype : method가 POST인 경우 데이터의 유형
- application/x-www-form-urlencoded : 기본값
- multipart/form-data : 파일 전송시 (input type이 file인 경우)
- text/plain : HTML5 디버깅 용(잘 사용되지 않음)
<form action="/search" method="GET> </form>
-
-
input
-
다양한 타입ㅇ르 가지는 입력 데이터 유형과 위젯이 제공됨
-
<input>대표적인 속성- name : form control에 적용되는 이름 (이름/값 페어로 전송됨)
- value : form control에 적용되는 값 (이름/값 페어로 전송됨)
- required, readonly, autofocus, autocomplete, disabled 등
<form action="/search" method="GET> <input type="text" name="q"> </form> # GOOGLE => <https://www.google.com/search?q=검색어> -
input의 유형(type)
-
-
select
-
label