웹 처리 과정
- 주소창에 주소 입력
- 서버에 최초 요청 (Request)
- 서버에서 최초 응답 (Response)
- 서버에 추가 요청
- 서버에서 추가 응답 (CSS, Javascript, JPG, 등)
- 렌더링된 웹페이지
최초 응답에는 HTML을 전송합니다. (가장 먼저 찾는 파일명은 index.html입니다.)
HTML은 프로젝트의 기획자입니다.
HTML은 프로젝트의 구조를 설계합니다.
<html>: HTML 문서의 범위를 설정.
-lang: 문서의 언어
-값: ko, en
<head>: HTML 문서의 정보를 설정.
<body>: HTML 문서의 구조를 설정.메타데이터
<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정.
<base/>: HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정.
-한 문서에 하나의 <base/> 요소만 포함 가능.
-href: 기준 URL
-target: A 요소처럼 target 속성을 사용하는 요소의 기본값.
-값: _self, _blank
<link/>: 외부 리소스의 연결 및 현재 문서와의 관계를 명시. (HTML, CSS, ICON 등 가져오기)
-rel: (필수)현재 문서와 외부 리소스오의 관계.
-값: stylesheet, icon 등
-href: 외부 리소스의 URL.
-값: URL
-type: 외부 리소스의 MIME 타입.
-값: text/css, image/x-icon 등
<meta/>: 기타 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정.
-charset: 문자인코딩 방식
-값: UTF-8, EUC-KR 등
-name: 메타 데이터의 이름 (정보의 종류)
-값: author,description 등
-http-equiv: 서버/사용자 에이전트의 작동방식 변경에 대한 지시 (HTTP 응답 헤더 제공)
-값: refresh, X-UA-Compatible 등
-content: name, http-equiv의 값콘텐츠 구분
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
문서의 정보 계층을 구조화.
(Heading, 문서나 구분된 영역의 제목을 설정, 문서의 목차)
-숫자가 낮을수록 높은 단계(중요한)의 단계.
<header>: 문서의 헤더를 설정. (보통 로고, 제목, 검색 등을 포함)
<footer>: 문서의 푸터를 설정. (보통 작성자, 저작권, 관련 문서 등을 포함)
<main>: 문서의 주요 콘텐츠를 설정.
-IE 지원 불가.
-한 문서에 하나의 <main> 요소만 포함 가능.
<article>: 독립적으로 구분되거나 재사용 가능한 영역을 설정. (매거진/신문 기사, 블로그 등)
-일반적으로 <h1>~<h6>를 포합하여 식별.
-작성일자와 시간을 <time>의 datatime 속성으로 작성.
<section>: 문서의 일반적인 영역을 설정.
-일반적으로 <h1>~<h6>를 포함하여 식별.
<aside>: 문서의 별도 콘텐츠를 설정. (보통 광고나 기타 링크 등의 사이드바를 설정)
<nav>: 다른 페이지 링크를 제공하는 영역을 설정. (Navigation, 보통 메뉴(Home,About,Contact), 목차, 색인 등을 설정)
<address>: <body>, <article>, <footer> 등에서 연락처 정보를 제공하기 위해 포함하여 사용.
<div>: 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정. (Division, 꾸미는 목적으로 사용)문자 콘텐츠
<ol>, <ul>, <li>: 각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정.
-<ol>과 <ul>은 자식으로 <li>만 포함 가능.
-<li>는 단독으로 사용할 수 없으며, <ol>이나 <ul>에 자식으로 포함되어야 함.
-정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있음.
<ol>: 정렬된 목록을 설정.
-start: 항목에 매겨지는 번호의 시작 값
-값: 숫자
-type: 항목에 매겨지는 번호의 유형
-값: a, A, i, I, 1
<li>: 항목을 설정.
<dl>, <dt>, <dd>: 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정.
-Description List
-Definition Term
-Definition Details
-<dl>은 <dd>, <dt>만을 포함해야 함.
-키(key)/값(value) 형태를 표시할 때 유용.
<p>: 하나의 문단을 설정. (Paragraph)
<blockquote>: 일반적인 인용문을 설정.
-cite: 인용된 정보의 URL | 값: URL인라인 텍스트
<a>: 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정.
(Anchor, 외부로 내보내기)
-download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미. | 값: 불린(Boolean)
-href: 링크 URL | 값: URL
-rel: 현재 문서와 링크 URL의 관계 (Link Types) | 값: license, prev, next 등
-target: 링크 URL의 표시(브라우저 탭) 위치. | 값: _self, _blank
-type: 링크 URL의 MIME 타입 | 값: text/html 등
<em>: 단순한 의미 강조를 표시. (Emphasis)
-중첩이 가능.
-중첩될수록 강조 의미가 강해짐.
-정보통신보조기기 등에서 구두 강조로 발음됨.
-기본적으로 이탤릭체로 표시됨.
<q>: 짧은 인용문을 설정.
-긴 인용문을 설정할 경우 <blockquote>를 사용.
-cite: 인용된 정보의 URL | 값: URL
<time>: 날짜나 시간을 나타내기 위한 목적으로 사용.
-datatime: 유효한 날짜 문자 | 값: Date
<span>: 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.
<br/>: 줄바꿈을 설정.양식
<input/>: 사용자에게 입력 받을 데이터 양식.
-autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | 값: on, off
-autofocus: 페이지가 로드될 때 자동으로 포커스 | 값: 불린(Boolean)
-checked: 양식이 선택되었음을 표시 | 값: 불린(Boolean)
-disabled: 양식을 비활성화 | 값: 불린(Boolean)
-form: <form>의 id 속성 값.
-list: 참조할 <datalist>의 id 속성 값.
-max: 지정 가능한 최대 값. | 값: 숫자
-min: 지정 가능한 최소 값. | 값: 숫자
-maxlength: 입력 가능한 최대 문자 수 | 값: 숫자
-multiple: 둘 이상의 값을 입력 할 수 있는지 여부 | 값: 불린(Boolean)
-name: 양식의 이름
-placeholder: 사용자가 입력할 값의 힌트
-readonly: 수정 불가한 읽기 전용 | 값: 숫자
-step: 유효한 증감 숫자의 간격. | 값: 숫자
-src: 이미지의 URL | 값: URL
-alt: 이미지의 대체 텍스트
-type: 입력 받을 데이터의 종류
-button : 일반 버튼
-checkbox : 체크박스
-color : 색상
-email : 이메일
-file : 파일
-hidden : 보이지 않지만 전송할 양식
-image : 이미지 제출 버튼
-number : 숫자
-password : 비밀
-radio : 라디오 버튼
-range : 범위 컨트롤
-reset : 초기화
-search : 검색
-submit : 제출 버튼
-tel : 전화번호
-text : 일반 텍스트
-url : 절대 URL
-value: 양식의 초기 값전역 속성 (Global Attributes)
모든 HTML요소에서 공통적으로 사용 가능한 속성.
class
공백으로 구분된 요소의 별칭을 지정.
CSS 혹은 JavaScript의 요소 선택기(CSS GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근.
id
문서에서 고유한 식별자(idenifier, ID)를 정의.
CSS 혹은 JavaScript의 요소 선택기(CSS GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근.
style
요소에 적용할 CSS를 선언.
title
요소의 정보(설명)을 지정.
Reference
