HTML - 블록 레벨 요소와 인라인 요소
1. 블록요소
1. DIV, H1, P
2. 사용 가능한 최대 가로 너비를 사용한다.
3. 크기를 지정할 수 있다.
4.(width: 100%; height: 0으로 시작해서 값을 가짐)
5. 수직으로 쌓임
2. 인라인 요소
1. SPAN, IMG
2. 필요한 만큼의 너비를 사용한다.
3. 크기를 지정할 수 없다.
4. .(width: 0; height: 0;로 시작)
5. 수평으로 쌓임
태그
캐릭터셋
EUC-KR: 완성형
박 영 웅
UTF-8: 조합형
ㅂ ㅏ ㄱ ㅇ ㅕㅇ ㅇ ㅜㅇ
메타데이터 - BASE
<base href="./css/"> <link rel="stylesheet" href="main02.css">
html에 한개만 사용이므로 모든 경로에 관여됨 주의해서 사용해야함
HTML / 요소 - 콘텐츠 구분 & 문자 콘텐츠
header(<header>) - 헤더 만들때 쓰는 태그, 헤더안에 헤더를 넣을 수 없고 푸터도 넣을 수 없다.
footer(<footer>) - 푸터를 만들때 쓰며 헤더와 같이 안에 헤더와 푸터를 넣을 수 없다.
h1 - 한페이지에 한번만 사용 두번 사용 하면 h2로 등급을 낮춰야함 또한, h1 다음 h2 h3이런식으로 순차적으로 써야지 건너 뛰면 안된다.
main(<main>) - 한 문서에 하나의 main만 사용가능 속성은 block이다.
article(<article>) - 기사라고 생각하면 되고, 일반적으로 <h1>~<h6>이 있으며, <time> datetime속성으로 작성한다. 독립적이어야하고 재사용이 가능해야한다.
section(<section>) - 일반적인 영역 일반적으로 <h1>~<h6>를 포함하여 식별 section은 div와 다르게 의미를 가지고 있다. 그래서 h1~6의 태그들과 주로 함께 사용된다. 의미적으로 보면 article > section > div이다.
aside(<aside>) - 별도 콘텐츠(사이드바)
nav(<nav>) - 다른 페이지 링크를 제공하는 영역
영역을 설정하는 태그는 모두 블록 위에 전부
address(<address>) - <body>, <article>, <footer>등에 연락처 정보를 제공할때 사용(이메일, 전화번호, 주소)
div(<div>) - 의미 없이 막사용 가능 css나 js로 스타일링이나 제어에 사용
ol, ul, li(<ol>, <ul>, <li>) - 각 항목<li> 정렬된 목록<ol> 정렬되지 않은 목록<ul> li는 list-item요소(블록이라고 보면됨) ol은 type기능으로 1,2,3,4 a,b,c,d 같은 방법으로 순서를 표기 할 수 있음 reversed는 역순으로 표기함
dl, dt, dd(<dl>, <dt>, <dd>) - 용어(dt)와 정의(dd) 쌍들의 영역(dl), 용어(key) - 설명(value)
<dl> <dt>Coffee</dt> <dd>Coffee is a brewed...</dd> <dt>Milk</dt> <dd>Milk is a nutriend-rich...</dd> </dl>
p(<p>) - 하나의 문단 정보통신보조기기의 다음 문단으로 넘어가는 단축키를 제공함
엔터기능을 위해서 <br>태그를 사용한다.
hr(<hr />) - 수평선 나옴, 의미적 관점으로 사용해야 함 위아래 좌우 다 선이 생김
pre(<pre>) - 서식이 미리 지정된 텍스트를 설정 텍스트의 공백과 줄바꿈을 유지하여 표시함 프리태그의 시작 바로 다음부터 띄어쓰기가 먹히기 때문에 바로 다음에 써야 한다.(들여쓰기 하면 안됨)
blockquote(<blockqute>) - 인용문쓸때 사용 속성(cite) 의미(인용된 정보의 URL) 값(URL)
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
HTML / 요소 - 인라인 텍스트 & 수정
a(<a>) - URL로 연결할 수 있는 하이퍼 링크를 설정
| 속성 | 의미 | 값 | 기본값 | 특징 |
|---|---|---|---|---|
| download | 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 | 불린(Boolean) | ||
| href | 링크 URL | URL | 생략 가능 | |
| rel | 현재 문서와 링크 URL의 관계(Link Types) | license, prev, next… | ||
| target | 링크 URL의 표시(브라우저 탭) 위치 | _self, _blank | _self | |
| type | 링크 URL의 MIME 타입 | text/html… |
abbr(<abbr>) - 약어를 지정 title 속성을 사용하여 전체 글자나 설명을 제공한다.
b(<b>) - 문체가 다른 글자 범위를 설정 1. 특별한 의미X 2. 읽기 흐름에 도움을 주는 용도 3. 다른 태그가 적합하지 않은 경우 마지막 수단 4. 기본적으로 글자가 두껍게 표시됨
mark(<mark>) - 하이라이팅 할때 사용(시각적)
em(<em>) - 단순한 의미 강조 1. 중첩가능 2. 중첩될수록 강조 의미가 강해짐(내용적으로 보이는건 차이 없음) 3. 정보통신보조기기에서 구둥 강조로 발음됨 4. 이탤릭체로 표시
strong(<strong>) - 의미의 중요성 표현
i(<i>) - em, strong, mark, cite, dfn등에서 표현할 수 있는 적합한 의미가 아닐때. 평범한 글자와 구분(아이콘이나 특수기호)
dfn(<dfn>) - 용어를 정의할 때 사용
cite(<cite>) - 참조 이탤릭체로 표시
q(<q>) - 짧은 인용문
u(<u>) - 밑줄을 위해서(css <span style="text-decoration: underline;"> 가 남)
code(<code>) - 컴퓨터 코드 범위 모노스페이스 글꼴 계열로 표시됨
kbd(<kbd>) - 텍스트 입력 장치에서 사용자 입력을 나타내는 텍스트 범위
sup(<sup>) - 위첨자(제곱)
sub(<sub>) - 아래 첨자(화학기호 H2O같은)
time(<time>) - 날짜나 시간을 나타내기 위한 목적(YYYY-MM-DD) IE에서는 지원X
span(<span>) - 인라인으로 div같이 콘텐츠 영역을 설정
br(<br />) - 줄바꿈을 설정
del(<del>) - 삭제된 텍스트의 범위를 지정 cite 변경된 이유 datetime 변경이 일어난 날짜
ins(<ins>) - 새로 추가된 텍스트의 범위를 지정 cite 추가된된 이유 datetime 변경이 일어난 날짜
HTML / 요소 - 멀티미디어 & 내장 콘텐츠
img(<img />) - 이미지의 가로든 세로든 하나만 지정하면 비율대로 알아서 조정(크기를 줄이는 용도라면 한개만 넣기)
| 속성 | 의미 | 값 | |
|---|---|---|---|
| src | (필수)이미지 URL | URL | |
| alt | (필수)이미지의 대체텍스트 | ||
| width | 이미지의 가로 너비 | ||
| height | 이미지의 세로 너비 | ||
| srcset | 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의 | w, x | |
| sizes | 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의 |
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
sizes="(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px"
src="images/heropy.png"
alt="HEROPY" />
srcset 출력될 이미지 목록 sizes 출력크기 + 최적크기 width 출력 크기 함께 쓰면 width만 적용이 된다.
<img srcset="images/heropy_small.webp 400w, images/heropy_medium.webp 700w, images/heropy_large.webp 1000w" width="500px" src="images/heropy.png" alt="HEROPY" />
사진은 화면 크기에 따라 바뀌지만 500px임
<img srcset="images/heropy_small.webp 400w, images/heropy_medium.webp 700w, images/heropy_large.webp 1000w" sizes="500px" src="images/heropy.png" alt="HEROPY" />
사진의 최적화 사이즈는 500px이니까 항상 미디움 사이즈만 나옴
audio(<audio>) - 소리 콘텐츠 삽입
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| autoplay | 준비되면 바로 재생 | 불린(Boolean) | |
| controls | 제어 메뉴를 표시 | 불린(Boolean) | |
| loop | 재생이 끝나면 다시 처음부터 재생 | 불린(Boolean) | |
| preload | 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) | none: 로드하지 않음,metadata: 메타데이터만 로드,auto: 전체 파일 로드 | metadata |
| src | 콘텐츠 URL | URL | |
| muted | 음소거 여부 | 불린(Boolean) |
video(<video>) - mp4를 삽입
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| autoplay | 준비되면 바로 재생 | 불린(Boolean) | |
| controls | 제어 메뉴를 표시 | 불린(Boolean) | |
| loop | 재생이 끝나면 다시 처음부터 재생 | 불린(Boolean) | |
| muted | 음소거 여부 | 불린(Boolean) | |
| poster | 동영상 썸네일 이미지 URL | URL | |
| preload | 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) | none: 로드하지 않음,metadata: 메타데이터만 로드,auto: 전체 파일 로드 | metadata |
| src | 콘텐츠 URL | URL | |
| width | 동영상 가로 너비 | ||
| height | 동영상 세로 너비 |
figure(<figure>), figcaption(<figcaption>) - figure는 이미지나 삽화, 도표등의 영역 설정(블록) figcaption은 figure에 포함되어 이미지나 삽화 등의 설명을 표시
iframe(<iframe>) - 다른 HTML 페이지를 현재 페이지에 삽입
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| name | 프레임의 이름 | ||
| src | 포함할 문서의 URL | URL | |
| width | 프레임의 가로 너비 | ||
| height | 프레임의 세로 너비 | ||
| allowfullscreen | 전체 화면 모드 사용 여부 | 불린(Boolean) | |
| frameborder | 프레임 테두리 사용 여부 | 0, 1 | 1 |
| sandbox | 보안을 위한 읽기 전용으로 삽입 | 불린(Boolean) orallow-form: 양식 제출 가능,allow-scripts: 스크립트 실행 가능 ,allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능 |
canvas(<canvas>) - Canvas API나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링
script(<script>) - 스크립 코드 포함 or 참조 defer로 실행 시점을 제어할 수 있음(html 다 실행후 스크립트 실행)
noscript(<noscript>) - 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의
HTML / 요소 - 표 콘텐츠 & 양식
table(<table>), tr(<tr>), th(<th>), td(<td>) - 데이터 표(<table>) 행(줄 / <tr>) 열(칸 / <th>, <td>) 테이블은 블록으로 봐도 됨
th(<th>) - 머리글 칸
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| abbr | 열에 대한 간단한 설명 | ||
| headers | 관련된 하나 이상의 다른 머리글 칸 id 속성 값 | ||
| colspan | 확장하려는(병합) 열의 수 | 1 | |
| rowspan | 확장하려는(병합) 행의 수 | 1 | |
| scope | 자신이 누구의 ‘머리글 칸’인지 명시 | col: 자신의 열colgroup: 모든 열row: 자신의 행rowgroup: 모든 행auto | auto |
td(<td>) - 일반칸
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| headers | 관련된 하나 이상의 다른 머리글 칸 id 속성 값 | ||
| colspan | 확장하려는(병합) 열의 수 | 1 | |
| rowspan | 확장하려는(병합) 행의 수 | 1 |
caption(<caption>) - 표의 제목을 설정 열리는 TABLE 태그 바로 도음에 작성 <table>당 하나의 <caption>만 사용 가능
colgroup(<colgroup>), col(<col>) - 컬럼(col) 그의 집합(colgroup)
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| span | 연속되는 열 수 | 숫자(Number) | 1 |
thead(<thead>), tbody(<tbody>), tfoot(<tfoot>) - 표의 머리글<thead>, 본문<tbody>, 바닥글<tfoot> 기본적으로 테이블의 레이아웃에 영향이 없음
form(<form>) - 웹 서버에 정보를 제출하기 위한 양식 블록 요소임
| 속성 | 의미 | 값 | 기본값 |
|---|---|---|---|
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| method | 서버로 전송할 HTTP 방식 | GET, POST | GET |
| name | 고유한 양식의 이름 | ||
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | ||
| target | 서버로 전송 후 응답받을 방식을 지정 | _self, _blank | _self |
input(<input/>) - 사용자에게 입력받을 데이터 양식
| 속성 | 의미 | 값 | 기본값 | 특징 |
|---|---|---|---|---|
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on | |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 | |
| checked | 양식이 선택되었음을 표시 | 불린(Boolean) | type 속성 값이 radio, checkbox일 경우만 | |
| disabled | 양식을 비활성화 | 불린(Boolean) | ||
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | ||
| list | 참조할 <datalist>의 id 속성 값 | |||
| max | 지정 가능한 최대 값 | 숫자(Number) | type 속성 값이 number일 경우만,min속성보다 큰 값만 허용 | |
| min | 지정 가능한 최소 값 | 숫자(Number) | type 속성 값이 number일 경우만,max속성보다 작은 값만 허용 | |
| maxlength | 입력 가능한 최대 문자 수 | 숫자(Number) | 524288 | type 속성 값이 text, email, password, tel, url일 경우만 |
| multiple | 둘 이상의 값을 입력 할 수 있는지 여부 | 불린(Boolean) | type 속성 값이 email, file일 경우만,email일 경우 ,로 구분 | |
| name | 양식의 이름 | |||
| placeholder | 사용자가 입력할 값의 힌트 | type 속성 값이 text, search, tel, url, email일 경우만 | ||
| readonly | 수정 불가한 읽기 전용 | 불린(Boolean) | ||
| step | 유효한 증감 숫자의 간격 | 숫자(Number) | 1 | type 속성 값이 number, range일 경우만 |
| src | 이미지의 URL | URL | type 속성 값이 image일 경우만 | |
| alt | 이미지의 대체 텍스트 | type 속성 값이 image일 경우만 | ||
| type | 입력 받을 데이터의 종류 | 별도 정리 | text | |
| value | 양식의 초기 값 |
데이터 종류(Type)의 값
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="text" />
| 값 | 데이터 종류 | 특징 |
|---|---|---|
| button | 일반 버튼 | <button>처럼 사용 |
| checkbox | 체크박스 | |
| color | 색상 | IE 지원 불가 |
| 이메일 | ||
| file | 파일 | |
| hidden | 보이지 않지만 전송할 양식 | value 속성으로 값을 지정 |
| image | 이미지 제출 버튼 | <img />처럼 사용 |
| number | 숫자 | |
| password | 비밀 | 가려지는 양식 |
| radio | 라디오 버튼 | 같은 name 속성 그룹 내 하나만 선택 가능 |
| range | 범위 컨트롤 | min, max, step, value(기본값) 속성 사용 |
| reset | 초기화 | 해당 <form> 범위 내 모든 양식 |
| search | 검색 | |
| submit | 제출 버튼 | 해당 <form> 범위 내 고유한 양식 |
| tel | 전화번호 | |
| text | 일반 텍스트 | |
| url | 절대 URL |
label(<label>) - for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함(<button>, <input>, <progress>, <select>, <textarea>
button(<button>) - 버튼을 지정,
onclick을 통한 자바스크립트 펑션 활용
| 속성 | 의미 | 값 | 특징 |
|---|---|---|---|
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 |
| disabled | 버튼을 비활성화 | 불린(Boolean) | |
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | |
| name | 폼 데이터와 함께 전송되는 버튼의 이름 | ||
| type | 버튼의 타입 | button, reset, submit |
textarea(<textarea>) - 여러줄의 일반 텍스트 양식
| 속성 | 의미 | 값 | 기본값 | 특징 |
|---|---|---|---|---|
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on | |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 | |
| disabled | 양식을 비활성화 | 불린(Boolean) | ||
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | ||
| maxlength | 입력 가능한 최대 문자 수 | 숫자(Number) | 무한 | |
| name | 양식의 이름 | |||
| placeholder | 사용자가 입력할 값의 힌트 | |||
| readonly | 수정 불가한 읽기 전용 | 불린(Boolean) | ||
| rows | 양식의 줄 수 | 숫자(Number) | 2 |
fieldset(<fieldset>), legend(<legend>) - 그룹화(fieldset) 제목(legend)을 지정
select(<select>), datalist(<datalist>), optgroup(<optgroup>), option(<option>) - 옵션(option, optgroup)의 선택 메뉴(select)나 자동완성(datalist)을 제공
select(<select>) - 옵션 선택하는 메뉴
| 속성 | 의미 | 값 | 기본값 | |
|---|---|---|---|---|
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on | |
| disabled | 선택 메뉴를 비활성화 | 불린(Boolean) | ||
| form | 선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값 | |||
| multiple | 다중 선택 여부 | 불린(Boolean) | ||
| name | 선택 메뉴의 이름 | |||
| size | 한 번에 볼 수 있는 행의 개수 | 숫자(Number) | 0(1과 같음) |
optgroup(<optgroup>) - option을 그룹화
| 속성 | 의미 | 값 |
|---|---|---|
| label | (필수)옵션 그룹의 이름 | |
| disabled | 옵션 그룹을 비활성화 | 불린(Boolean) |
option(<option>) - 선택 메뉴(select)나 자동완성(datalist)에서 사용될 옵션 선택적 빈태그로 사용
| 속성 | 의미 | 값 | 특성 |
|---|---|---|---|
| disabled | 옵션을 비활성화 | 불린(Boolean) | |
| label | 표시될 옵션의 제목 | 생략되면 포함된 텍스트를 표시 | |
| selected | 옵션이 선택되었음을 표시 | 불린(Boolean) | |
| value | 양식으로 제출될 값 | 생략되면 포함된 텍스트를 값으로 사용 |
datalist(<datalist>) - input에 미리 정의된 옵션을 지정하여 자동완성 기능을 제공하는 데 사용, input의 list속성 바인딩, option을 포함하여 정의된 옵션을 지정
<input type="text" list="fruits">
<datalist id="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Mango</option>
<option>Fineapple</option>
</datalist>progress(<progress>) - 작업의 완료 진행률 표시(로딩바)
| 속성 | 의미 | 값 | 특징 |
|---|---|---|---|
| max | 작업의 총량 | 숫자(Number) | |
| value | 작업의 진행량 | 숫자(Number) | max 속성을 생략할 경우 0~1 사이의 숫자여야 함 |
HTML / 전역 속성, 기타
class - 공백으로 구분된 요소의 별칭을 지정(요소 선택기)
id - 문서에서 고유한 식별자를 정의
style - 요소에 적용할 css선언(인라인 방식)
title - 요소의 정보를 지정
lang - 요소의 언어 지정
data-* - 사용자 정의 데이터 속성, HTML에 javaScript에서 이용하는 데이터를 저장하는 용도로 사용
draggable - Drag and Drop API를 사용 가능한지 여부를 지정
hidden - 요소를 숨김(데이터나 이런거는 다가지고 있음 보이는 것만 숨김)
tabindex - Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정, 대화형 콘텐츠(<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, <textarea>, <img>, <input>...)는 기본적으로 순서대로 지정됨, tabndex='1' 양수로 순서를 올림, 비대화형 콘텐츠에 tabindex='0'을 지정하여 대화형 콘텐츠와 같이 탭 순서 사용, tabindex='-1'을 통해 포커스는 가능하지만 탭순서에서 제외 가능
상대경로 - ./(주변, 생략가능), ../(상위 폴더로 가기)
절대경로 - http, /(나의 사이트일때 도메인 주소 생략)
댓글
댓글 쓰기