1. 태그(Tag)
01. HTML 구조
- DOCTYPE(DYD[Document Type Definition], 버전지정)
- 마크업 언어에서 문서 형식을 정의
- HTML은 크게 1,2,3,4,X-,5 버전이 있다.
<!doctype html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="개발자OOO">
<meta name="description" content="html study">
<title>mms</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<section>
<h1></h1>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</section>
</body>
</html>
02. HTML 문서 정보
-1. TITLE tag
- <title></title>
- 웹 페이지의 제목
- <meta/>
- 웹 페이지에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등) 검색엔진이나 브라우저에 제공
<meta charset="UTF-8"> : 문자 인코딩, 텍스트 렌더링 과정 중 문자 인코딩 방식
<정보 문자인코딩방식="UTF-8">
<meta name="author" content="mms"> : 제작자
<정보 정보종류="사이트제작자" 정보값="mms">
<meta name="descripttion" content="html 공부"> : 웹 페이지 설명
<정보 정보종류="사이트설명" 정보값="html 공부">
- charset(문자 인코딩 방식) : UTF-8, EUC-KR 등..
- name(검색엔진 등에 제공하기 위한 정보의 종류(meta data)) : author, description, keyword, viewport 등..
- content : name 이나 http-equiv 속성의 값을 제공
-3. LINK tag
- < link rel="stylesheet" href="" />
- 외부 문서를 연결할 때 사용(css file, Favicon 등 ...)
<link rel="relation(관계)" href="hiper text reperence(경로)">
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="favicon.ico">
- rel(relation(필수)현재 문서와 외부 문서와의 관계를 지정) : stylesheet, icon 등..
- href(hiper text reperence, 외부 문서의 위치를 지정) : 경로
-4. STYLE tag
- <style></style>
- css를 외부문서가 아닌 html 문서 내부에 작성할 때 사용
<style>
img{
width: : 100px;
height: 200px;
}
p{
font-size: 20px;
font-weight: bold;
}
</style>
<스타일 정의>
css 코드
</스타일 정의>
-5. SCRIPT tag, NOSCRIPT tag
- <script></script>, <noscript></noscript>
- css는 link or style 태그를 활용해 외,내부에서 작업을 한다면 JS는 script tag로 이 두가지 방식을 모두 사용가능하다.
<script src="js file source route"></script>
<자바스크립트 문서경로="js file source route"></자바스크립트>
<scipt>
funtion windowOnClickHandler(event){
console.log("hi");
}
</scipt>
<noscript>
<p>Your browser does not support JavaScript</p>
</noscript>
01. script
- 스크립트 코드를 무서에 포함하거나 참조(외부 스크립트).
- async : 스크립트의 비동기적(Asynchronously) : boolean, src 속성 필수
- 동기(순서 대로(순차적) 실행, 앞에 코드가 실행되고 뒤에 코드 실행)
- 비동기(필요에 희해 건너뛰거나 되돌아가서 코드를 실행)
- crossorigin : 별도의 도메인을 사용하는 사이트(CORS)의 오류 로깅(Errorlogging)을 허용하기 위해 사용(anoymous, use-credentials)
- defer : 문서 파싱(구문 분석) 후 작동 여부, HTML문서를 읽고 나서 JS 실행(boolean, src 속성 필수)
- src : 참조할 외부 스크립트 URL(포함된 스크립트 코드는 무시 됨)
- type : MIME 타입
02. noscript
- 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의
03. 태그의 종류
-1. Self Closing Tag
- <tag></tag> : 일반적인 형태
- html, head, body, div, span ... 등
- <tag> : 내용이 없고 속성만 가지는 형태
- meta, link, img ... 등
- 이 태그는 닫아주는 태그가 없기에 <tag/> 이러한 형태로 작성하기도 한다, 이렇게 태그 자신이 스스로 닫는다 하여 Self Closing Tag라고 불린다
- h1 ~ h6
- 주제, 제목, 타이틀 등에 사용되는 태그
- 페이지 당 h1은 하나만 사용
-3. Paragraph Tag
- p
- 하나의 문단(단락)을 설정
- 정보통신보조기기 등은 다음 문단(p)으로 넘어갈 수 있는 단축키를 제공
01. img Tag
02. audio Tag
- 소리 콘텐츠(mp3) 삽입
- autoplay가 지정된 경우, preload는 무시 됨
- autoplay : 준비되면 바로 재생(boolean)
- controls : 제이 메뉴를 표시(boolean)
- loop : 재생이 끝나면 다시 처음부터 재생(boolean)
- preload : 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)(none(로드하지 않음) | metadata(메타데이터만 로드) | auto(전체 파일 로드))
- src : 콘텐츠 URL(URL)
- muted : 음소거 여부(boolean)
03. video Tag
- 동영상 콘텐츠(MP4) 삽입
- autoplay가 지정된 경우, preload는 무시 됨
- autoplay : 준비되면 바로 재생(boolean)
- controls : 제어 메뉴 표시(boolean)
- crossorigin : 가져 오기가 CORS를 사용하여 수행되어야하는지 여부(anoymous, use-credentials)
- loop : 재생이 끝나면 다시 처음부터 재생(boolean)
- muted : 음소거 여부(boolean)
- poster : 동영상 썸네일 이미지 URL(URL)
- preload : 페이지가 로드될 때 파일을로드할지의 지정(힌트 제공)(none(로드하지 않음) | metadata(메타데이터만 로드) | auto(전체 파일 로드))
- src : 콘텐츠 URL(URL)
- width : 동영상 가로 너비
- height : 동영상 세로 너비
- figure Tag는 이미지나 삽화, 도표 등의 영역을 설정
- figcaption Tag는 figure Tag에 포함되어 이미지나 삽화 등의 설명을 표시.
05. iframe Tag
- 다른 HTML 페이지를 현재 페이지에 삽입 (중첩된 브라우저 컨텍스트(프레임)를 표시)
- name : 프레임의 이름
- src : 포함할 문서의 URL(URL)
- width : 프레임의 가로 너비
- height : 프레임의 세로 너비
- allowfullscreen : 전체 화면 보드 사용 여부(boolean)
- frameborder : 프레임 테두리 사용 여부(0, 1)
- sandbox : 보안을 위한 읽기 전용으로 삽입(boolean or allow-form(양식 제출 가능)| allow-scripts(스크립트 실행 가능) | allow-same-origin(같은 출처(도메인)의 리소스 사용 가능))
06. canvas Tag
-5. Division Tag, span Tag
- div, span
- 의미없는 태그, 구역을 나누는 태그
- 시멘틱 태그가 나오기전 나오고 나서도 가장 많이 사용되는 태그이다
-6. List Tag(1)
- ol, ul, li
- 각 항목 li tag의 정렬된 목록 ol tag나 정렬되지 않은 목록 ul tag로 설정
- (Ordered List, Unordered List, List Item, 순서가 필요하거나(ol) 순서가 필요하지 않은(ul) 목록 정의)
- ol&ul운 자식으로 li만 포함 가능
- li는 단독 사용 불가, ol, ul에 자식으로 포함되어야 함
- ol의 항목 순서는 중요도를 의미할 수 있음
- ol, ul (block), li(list-item)
-7. List Tag(2)
- dl, dt, dd
- 용어(dt)와 정의(dd) 쌍들의 영역(dl)을 설정
- (Description List, Definition Details, Definition Term)
- dl tag는 dd, dt만 포함
- key/value 형태를 표시할 때 유용
<dl>
<dt>Coffee</dt>
<dd>Coffee is a brewed drink prepared from roasting species.</dd>
<dt>Milk</dt>
<dd>Milk is a nutrient-rich, white liquid food produce</dd>
</dl>
<ul>
<li>
<dfn>Coffee</dfn>
</li>
<li>
<p>Coffee is a brewed drink prepared from roasting species.</p>
</li>
<li>
<dfn>Milk</dfn>
</li>
<li>
<p>Milk is a nutrient-rich, white liquid food produce</p>
</li>
</ul>
- dfn : definition의 줄임말 태그
- 용어 하나를 정의하는 태그
-8. hr Tag, br Tag
- hr(Horizontal Rule), br(break)
- 문단의 분리(주제에 의한)를 위해 설정, 줄바꿈을 설정
- 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로 사용
- border properties로 속성 변경
-9. Hyper Link Tag
- a(anchor)
- 다른 페이지, 같은 페이지 위치(#, 해시태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 잇는 하이퍼 링크를 설정
- (Anchor, 외부로 내보내기)
- href(링크 URL) :URL (생략 가능)
- target(링크 URL의 표시(브라우저 탭)위치) : _self(default), _blank
- rel(현재 문서와 링크 URL의 관계(Link Types)) : license, prev, next ...
- download(리소스를 다운로드하는 용도로 사용) : boolean
- hreflang(링크 URL(페이지) 언어(ISO 639-1)) : ko, en ...
- types(링크 URL의 MIME 타입) : text/html ...
-10. Font Tag
01. b Tag
- 문체가 다른 글자의 범위를 설정 (Bring Attention)
- 특별한 의미를 가지지 않음.
- 읽기 흐름에 도움을 주는 용도로 사용
- 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
- 기본적으로 글자가 두껍게(Blod) 표시 됨
02. mark Tag
- 사용자의 관심을 끌기 위해 하이라이팅 할 때 사용 (Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미)
- 글자 배경이 노란색(Yello)으로 표사
- 의미 < 사각
03. em Tag
- 단순한 의미 강조를 표시 (Emphasis)
- 중첩이 가능
- 중첩될수록 강조 의미가 강해짐
- 정보통신보조기기 등에서 구두 강조로 발음
- 기본적으로 이탤릭체(Italic Type)로 표시
04. strong Tag
- 의미의 중요성을 나타내기 위해 사용 (Strong Importance)
- 기본적으로 글자가 뚜껍게(Blod) 표시
05. i Tag
- em, strong, mark, cite, dfn 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용. (평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용)
- 기본적으로 이탤릭체(Italic Type)로 표시
- fontawesome에서 사용
06. u Tag
- 밑줄이 있는 글자를 설정 (ubderline)
- 순수하게 꾸미는 용도
- a Tag와 헷갈릴 수 있는 위치에서 사용 주의
- <span style="text-decoration: underline;"></span>을 활용할 수 있어 사용을 권하지 않음
07. sup&sub Tag
- 위 첨자(sup)와 아래 첨자(sub)를 성정 (Superscripted text, Subscript text)
- X4 + Y2, H20
- X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>0
-11. Table Tag
01. table
- display : table
- 데이터 표(table)의 행(줄/tr)과 열(칸,cell/th,td)을 생성.
02. tr(Table Row)
- display : table-cell
- '머리글 칸'을 지정
- abbr : 열에 대한 간단한 설명
- headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값
- colspan : 확장하려는(병합) 열의 수 : 1
- rowspan : 확장하려는(병합) 행의 수 : 1
- scope : 자신이 누구의 '머리글 칸'인지 명시 : col(자신의 열) | colgroup(모든 열) | row(자신의 행) | rowgroup(모든 행) | auto : auto
04. td(Table Data)
- display : table-cell
- '일반 칸'을 지정
- headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값(th의 id 값을 연결)
- colspan : 확장하려는(병합) 열의 수 : 1
- rowspan : 확장하려는(병합) 행의 수 : 1
05. caption Tag
- 표의 제목을 설정
- 열리는 Table 태그 바로 다음에 작성
- table 당 하나의 caption만 사용 가능
- caption(display:table-caption)
06. colgroup & col Tag
- 표의 열들을 공통적으로 정의하는 컬럼(col,emptyTag)과 그의 집합(colgroup)
- span : 연속되는 열 수 : Number : 1
- colgroup(display:table-column-group)
- col(display:table-column)
<col style="background-color: tomato;" span="2" width="100">
07. thead & tbody & tfoot Tag
- 표의 머리글(thead), 본문(tbody), 바닥글(tfoot)을 지정
- 기본적으로 테이블의 레이아웃에 영향을 주지 않음
- thead(display:table-header-group)
- tbody(display:table-row-group)
- tfoot(display:table-footer-group)
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- form 이 다른 form을 자식 요소로 포함할 수 없음
- block Tag
- action : 전송한 정보를 처리할 웹페이지의 URL : URL
- autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
- method : 서버로 전송할 HTTP 방식 : GET(default), POST
- name : 고유한 양식의 이름
- novalidate : 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
- target : 서버로 전송 후 응답받을 방식을 지정 : _self(default), _blank
-
사용자에게 입력 받을 데이터 양식
-
empty Tag
-
autocomplate* : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
-
autofocus* : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함
-
checked* : 양식이 선택되었음을 표시 : boolean, type 속성 값이 radio, checkbox 일 경우만
-
disabled : 양식을 비활성화 : boolean
-
form* : form의 id 속성 값 : 해당 form의 후손이 아닐 경우만
-
list : 참조할 datalist Tag의 id 속성 값
-
name* : 양식의 이름
-
max : 지정 가능한 최대 값 : Number, type 속성 값이 number 일 경우만, min 속성보다 큰 값만 허용
-
min : 지정 가능한 최소 값 : Number, type 속성 값이 number 일 경우만, max 속성보다 작은 값만 허용
-
maxlength : 입력 가능한 최대 문자 수 : Number(52488), type 속성 값이 text, email, password, tel, rul 일 경우만
-
muliple : 둘 이상의 값을 입력 할 수 있는지 여부 : boolean, type 속성 값이 email, file 일 경우만, email일 경우 , 로 구문
-
placehorder : 사용자가 입력할 값의 힌트 : type 속성 값이 txt, search, tel, url, email 일 경우만
-
readonly : 수정 불가한 읽기 전용 : boolean
-
step : 유효한 증감 숫자의 간격 : Number, type 속성 값이 number, range일 경우만
-
src : 이미지의 URL : URL, type 속성 값이 image 일 경우만
-
alt : 이미지 대체 텍스트 : type 속성 값이 image일 경우만
-
type* : 입력 받을 데이터의 종류 : text
-
value : 양식의 초기 값
-
button* : 일반 버튼 : button tag처럼 사용
-
checkbox* : 체크 박스
-
email* : 이메일
-
file* : 파일
-
password* : 비밀 : 가려지는 양식
-
submit* : 제출 버튼 : 해당 form 범위 내 고유한 양식
-
text* : 일반 텍스트
-
color : 색상 : IE 지원 불가
-
hidden : 보이지 않지만 전송할 양식 : value 속성으로 값을 지정
-
image : 이미지 제출 버튼 : img Tag 처럼 사용
-
number : 숫자
-
radio : 라디오 버튼 : 같은 name 속성 그룹 내 하나만 선택 가능
-
range : 범위 컨트롤 : min, max, step, value (기본값) 속성 사용
-
reset : 초기화 : 해당 form 범위 내 모든 양식
-
search : 검색
-
tel : 전화 번호
-
url : 절대 URL
03. label Tag
- 라벨 가능 요소(labelable)의 제목(Caption)
- for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠를 포함
- 라벨 가능 요소 : button, input, progress, select, textarea
- for : 참조할 라벨 가능 요소의 id 속성 값
- inline Tag
- 선택 가능한 버튼을 지정
- autofocus : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함
- disabled : 버튼을 비활성화 : boolean
- form : form Tag의 id 속성 값 : 해당 form의 후손이 아닐 경우만
- name : 폼 데이터와 함께 전송될 버튼의 이름
- type : 버튼의 타입 : button, reset, submit
05. textarea
- 여러 줄의 일반 텍스트 양식
- autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
- autofocus : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함
- disabled : 버튼을 비활성화 : boolean
- form : form Tag의 id 속성 값 : 해당 form의 후손이 아닐 경우만
- maxlength : 입력 가능한 최대 문자 수 : Number(무한)
- name : 폼 데이터와 함께 전송될 버튼의 이름
- placehorder : 사용자가 입력할 값의 힌트
- readonly : 수정 불가능한 읽기 전용 : boolean
- rows : 양식의 줄 수 : Number
06. fieldset & legend Tag
- 같은 목적의 양식을 그룹화(fieldset)하여 제목(legend)을 지정
- disabled : 그룹 내 모든 양식 요소를 비활성화 : boolean
- form : 그룹이 속할 하나 이상의 form tag의 id 속성 값
- name : 그룹의 이름
07. selec Tag
- 옵션을 선택하는 메뉴
- autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
- disabled : 선택 메뉴를 비활성화 : boolean
- form : 선택 메뉴가 속할 하나 이상의 form Tag의 id 속성 값
- muliple : 다중 선택 여부 : boolean
- name : 선택 메뉴의 이름
- size : 한 번에 볼 수 있는 행의 개수 : Number, 0(1과 같음, default)
08. optgroup
- option을 그룹화
- label : (필수)옵션 그룹의 이름
- disabled : 옵션 그룹을 비활성화 : boolean
09. option
- 선택 메뉴(select)나 자동완성(datalist)에서 사용될 옵션
- 선택적 empty tag로 사용 가능
- disabled : 선택 메뉴를 비활성화 : boolean
- label : 표시될 옵션의 제목 : 생략되면 포함된 텍스트를 표시
- value : 양식으로 제출될 값 : 생략되면 포함된 텍스트를 값으로 사용
- selected : 옵션이 선택되었음을 표시 : boolean
<select name="Coffee">
<optgroup label="Coffee">
<option>Americano</option>
<option>Caffe Mocha</option>
<option value="Cappuccino" label="cappuccino"></option>
</optgroup>
<optgroup label="Latte" disabled>
<option>Caffe Latte</option>
<option>Vanulla Latte</option>
</optgroup>
<optgroup>
<option>Plain</option>
</optgroup>
</select>
10. datalist
- input Tag에 미리 정의된 옵션을 지정하여 자동 완성(Autocomplete)기능을 제공하는 데 사용
- input Tag의 list 속성 바인딩
- option Tag을 포함하여 정의된 옵션을 지정
<input type="text" list="fruits">
<datalist id="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>
11. progress Tag
- 작업의 완료 진행률을 표사(load bar)
- inline-block
- max : 작업의 총량 : Number
- value : 작업의 진행량 : Number, max 속성을 생략할 경우 0~1 사이의 숫자여야 함
04. Block & Inline Tag(Level)
-1. block
- div, h1, p ..
- 사용 가능한 최대 가로 너비를 사용한다.
- 사용 가능한 최대 가로 너비를 사용한다.
- 크기를 지정할 수 있다.
- (default, width:auto; height: auto;)
- (시작, width:100%, height:0;)
- 수직으로 쌓임
- margin, padding 위, 아래, 좌, 우 사용 가능하다.
- 레이아웃
-2. inline
- span, img ..
- 필요한 만큼의 너비를 사용한다.
-크기를 지정할 수 없다.
- (width:0; height:0; 시작)
- 수평으로 쌓임
- margin, padding 위, 아래 사용 불가
- TEXT
-3. display
- 강제로 요소를 변경(CSS3)
- display : inline | block | inline-block ..
- 태그 요소를 변경할 때 사용하는 css properties
- <header></header>
- 소개 및 탐색에 도움을 주는 콘텐츠(로고, 메뉴)
- header tag and footer tag, address tag 안에서는 자손으로 올 수 없다.
- <footer></footer>
- 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냄
- 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
- header tag and footer tag, address tag 안에서는 자손으로 올 수 없다.
-3. main tag
- <main></main>
- 문서 body tag의 주요 콘텐츠를 나타냄
- 콘텐츠 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적 연관된 콘텐츠들로 이루어짐
- 문서 당 하나의 태그
- 인터넷 익스플로럴에서는 호환되지 않음
-4. article tag
- <article></article>
- 독립적으로 구분되거나 재사용 가능한 영역을 설정
- (매거진/신문 기사, 블로그 포스터 등)
- 일반적으로 h1 ~ h6를 포함하여 식별
- 작성일자와 시간을 time tag의 datetime 속성으로 작성
-5. section tag
- <section></section>
- 문서의 일반적인 영역을 설정
- 일반적으로 h1 ~ h6를 포함하여 식별
- 의미가 강한 순서
- article : 독립, 제목
- section : 제목
- div : X
-6. aside tag
- <aside></aside>
- 문서의 별도 콘텐츠를 설정 (보통 광고나 기타 링크 등의 사이드바 설정)
-7. nav tag
- <nav></nav>
- 다른 페이지 링크를 제공하는 영역 (Navigation, 보통 메뉴 Home, About, Contact, 목차, 색인 등을 설정)
-8. address tag
- <address></address>
- body, article, footer tag 등에서 연락처 정보를 제공하기 위해 포함
-9. time tag
- <time></time>
- 날짜나 시간을 나타내기 위한 목적
- detetime(유효한 날짜 문자) : Date
- IE 지원 불가
- <p>The Cure will be celebrating their 40th annibersary on <time datetime="2018-07-07">July 7</time> </p>
06. 전역 속성(Global Attributes)
- 모든 HTML 요소에서 공통적으로 사용 가능한 속성
-1. class Attributes
- 공백으로 구분된 요소의 별칭을 지정
- CSS혹은 JS의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근
- 별명, .class명
-2. id Attributes
- 문서에서 고유한 식별자(Idenifier, ID)를 정의
- CSS 혹은 JS의 요소 선택기(CSS 선택자나 GetElementsById, QuerySelector 같은)를 통해서 요소를 선택하거나 접근
- 이름(고유), #id명
-3. style Attributes
- 요소에 적용할 CSS를 선언.
- 인라인 방식(Tag 내에 직접 입력)
-4. title Attributes
<h2 title="이 부분은 제목2입니다">제목2</h2>
-5. lang Attributes
<p lang="en">This paragraph is English</p>
-6. data-* Attributes
- 사용자 정의 데이터 속성을 지정
- HTML에 JS에서 이용할 수 잇는 데이터(정보)를 저장하는 용도로 사용
- data-뒤에는 내가 원하는 대로 작성
<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>
<script>
const $me = document.getElementById("me");
console.log($me.dataset.myName);
console.log($me.dataset.myAge);
</script>
-7. draggable Attributes
- 요소가 Drag and Drop API를 사용 가능한지 여부를 지정
- draggable = "auto"(default)
<div draggable="true">The element to drag</div>
-8. hidden Attributes
<form action="" id="hiddenForm">
</form>
<button form="hiddenForm" type="submit">전송</button>
-9. tabindex Attributes
- Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
- 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정 됨
- 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용
- tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능
- tabindex="1"이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음
07. 경로
-1. 상대 경로
- 현재 파일 위치를 기준으로 경로 찾는 방법
- ./(생략 가능) : 현재 위치
- ../ : 상위 위치
-2. 절대 경로
- 최상위를 기준으로 경로 찾는 방법
- http(https)
- /(//)
-3. HTML Entitties
2. 추가 설명
- 의마의, 의미가 있는
- SEO(Search Engine Optimization)(검색 최적화)
- Accessibility(웹 접근성, 스크린리더, 키보드만을 사용하는 경우에 정적힐 동작)
- header : 웹 사이트의 브랜드를 나타내는 로고나 메뉴가 들어가는 경우
- nav : 헤더안의 다양한 메뉴를 나타낼 때
- footer : 부가적인 정보나 링크가 들어가는 경우
- main : 중요한 콘텐츠
- aside : 페이지와 상관이 없는 부가적인 정보(광고)
- section : 연관된 내용들을 묶어줄 때
- article : 블로그 포스트의 포스트 하나, 신문 기사의 기사 하나, 독립적인 콘텐츠
02. i vs em
- 이탤릭체
- i는 시각적으로만 이탤릭체
- em은 강조하는 이탤릭체
03. b vs strong
- 볼드체
- b는 시각적으로만 볼드체
- strong은 정말 중요한 볼드체
04. ol vs ul vs dl
- ol : 순서가 중요
- ul : 순서 없음
- dl : 정의, 설명 목록
05. img vs background-image
- img : 이미지가 웹 페이지 안에서 하나의 중요한 콘텐츠 일경우 사용
- background-image : 콘텐츠와 상관없는 경우
- button : 특정한 액션을 위해서
- a : 어디론가 이동할 때(링크)
07. table vs css
- table : 데이터의 양이 많아서 처리해야 되는 경우
- css : 단순히 구조를 위한 경우 flex, grid 사용