텍스트 표현 요소
요소<태그> 의미
| 요소<태그> |
의미 |
| <h1></h1>~ h6 |
제목 태그 |
| <p></p> |
문단을 나누는 단락을 생성 |
| <br/> |
줄바꿈 태그 |
| <hr/> |
수평선을 그려줌 , 콘텐츠 구분의 용도 |
| <pre></pre> |
편집기의 문자를 그대로 출력 |
| <blockquote></blockquote> |
인용문 생성 및 들여쓰기 |
공백 및 특수문자
&엔티티코드; 
진수; 진수;
| 특수이름 |
문자 |
엔티티코드 |
10진수 |
16진수 |
| 공백 |
|
nbsp |
32 |
20 |
| 더하기 |
+ |
plus |
43 |
2B |
| 빼기 |
- |
minus |
45 |
2D |
| 곱하기 |
* |
times |
42 |
2A |
| 나누기 |
/ |
divide |
47 |
2F |
| 등호 |
= |
equals |
61 |
3D |
물리적 스타일 관련 요소
단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소
| 요소 |
의미 |
| <b></b> |
글씨체 굵게 bold 처리 |
| <i></i> |
글씨 이탤릭체 |
| <s></s> |
글씨 가운데 취소 선 |
| <u></u> |
글씨 언더라인 |
| <sup></sup> |
글씨 위로 정렬 |
| <sub></sub> |
아래로 정렬 |
| <small></small> |
글씨 작게 표시 |
논리적 스타일 관련 요소
출력 형태보다는 요소 자체가 의미를 갖고 사용되는 요소
| 요소 |
의미 |
| <cite></cite> |
작품의 제목, 이탤릭체 |
| <code></code> |
코드 내용 표시 |
| <samp></samp> |
프로그램 샘플 출력 |
| <var></var> |
변수 , 이탤릭체 |
| <dfn></dfn> |
용어 정의, 이탤릭체 |
| <strong></strong> |
강조 |
| <abbr></abbr> |
내용이 축약임을 표시 |
| <address></address> |
주소 표시 |
| <kbd></kbd> |
키보드로 입력 내용 |
| <q> |
짧은 인용구 , 자동으로 따옴표 추가 |
| <mark></mark> |
강조 표시 , 형광팬 효과 |
블록 요소, 인라인 요소 의 차이
| 블록 요소 |
인라인 요소 |
| 문서 구조 요소 |
텍스트 요소 |
| 한줄을 전부 차지 하여, 한줄의 하나의 요소 내용만 표기 |
입력하는 내용 만큼의 공간 사용 한줄의 여러개의 태그가 같이 사용 되기도 함 |
| 자동으로 줄바꿈 수행 |
줄바꿈 x |
| div , p , h1… |
span, img, strong … |
리스트 표현 요소
| 요소 |
의미 |
| <ul></ul> |
순서 없는 리스트 / 기호 종류로 표기 (동그라미 , 네모…) |
| <ol></ol> |
순서 있는 리스트 / 숫자로 표기 / type , start, reversed 같은 속성을 사용 |
| <li></li> |
ul,ol에서 사용하는 리스트 하위 요소 태그 |
| <dl></dl> |
서술 리스트 |
| <dt></dt> |
용어 나열, 자동 줄바꿈 |
| <dd></dd> |
용어 설명 , 자동 줄바꿈 , 들여쓰기 |
이미지 표현 요소
<img> 태그 사용
| 속성 |
의미 |
| src |
경로 |
| width |
가로길이 |
| height |
세로길이 |
| alt |
대체 텍스트 |
하이퍼링크 표현
<a></a> 앵커 태그 사용
| 속성 |
의미 |
| href |
경로 |
| target |
출력 위치 |
| download |
다운로드 파일 기능 |
테이블 표현 요소
| 요소 |
의미 |
| table |
테이블 정의 |
| tr |
줄(행) 정의 |
| td |
tr 내부의 칸 정의 (내용) |
| th |
행/열의 제목 헤더 |
| caption |
테이블 자체 제목 |
미디어 표현 요소
| 요소 |
의미 |
속성 |
| audio |
오디오 재생 |
src(파일의 URL), autoplay(자동 재생), controls(제어기 표시), |
| loop(반복 재생), muted(음소거), preload(오디오 로딩 상태) |
|
|
| source |
audio , video 요소의 src 속성 대체 |
src(파일의 URL), type(MIME 형식), media(미디어 쿼리) |
| video |
비디오 재생 |
audio의 속성(src, autoplay, controls, loop, muted, preload) + width/height(비디오 콘텐츠의 표시 영역의 폭/높이), poster(비디오 데이터의 미설정 또는 로딩되는 동안 표시할 이미지) |
시멘틱 표현 요소
의미 있는 구조의 문서를 작성하기 위해서 요소의 기능에 적합한 의미를 갖는 요소명을 사용
| 태그 |
설명 |
| <header> |
문서의 머리말을 나타냄 |
| <nav> |
네비게이션 영역을 나타냄 |
| <main> |
문서의 주요 콘텐츠를 나타냄 |
| <section> |
문서의 구획을 나타냄 |
| <article> |
독립적으로 구분되거나 재사용 가능한 콘텐츠를 나타냄 |
| <aside> |
별도의 사이드바 영역을 나타냄 |
| <footer> |
문서의 꼬리말을 나타냄 |
| <figure> |
독립적인 콘텐츠, 캡션, 이미지 등을 그룹화함 |
| <figcaption> |
<figure> 요소의 캡션을 나타냄 |
| <time> |
시간 정보를 나타냄 |
| <cite> |
창작물의 제목을 나타냄 |
| <q> |
인용문을 나타냄 |
| <blockquote> |
긴 인용문을 나타냄 |
| <abbr> |
약어 또는 줄임말을 나타냄 |
| <code> |
컴퓨터 코드 조각을 나타냄 |
| <kbd> |
키보드 입력을 나타냄 |
| <var> |
변수를 나타냄 |
| <mark> |
강조된 텍스트를 나타냄 |
| <strong> |
의미적으로 중요한 텍스트를 나타냄 |
| <em> |
강조된 텍스트를 나타냄 |
| <small> |
작은 글자 크기의 텍스트를 나타냄 |
웹 폼 표현 요소
| 태그 |
설명 |
| <form> |
사용자 입력을 위한 폼을 생성 |
| <input> |
입력 필드를 생성 |
| <label> |
입력 필드의 레이블을 정의 |
| <select> |
드롭다운 목록을 생성 |
| <option> |
드롭다운 목록의 옵션을 정의 |
| <textarea> |
여러 줄의 텍스트 입력 필드를 생성 |
| <button> |
버튼을 생성 |
| <fieldset> |
관련된 입력 필드를 그룹화하여 스타일링이나 접근성을 적용 |
| <legend> |
fieldset 요소의 제목을 정의 |
| <datalist> |
입력 필드에 대한 미리 정의된 옵션 목록을 정의 |
| <optgroup> |
select 요소의 옵션을 그룹화 |
| <output> |
계산 결과나 스크립트의 출력값을 나타냄 |
| <progress> |
작업의 진행 상태를 나타냄 |
| <meter> |
범위나 측정값을 나타내는 스칼라 측정 장치를 생성 |
| <formaction> |
폼을 제출할 URL을 지정 |
| <formmethod> |
폼을 제출할 HTTP 메서드를 지정 |
| <formenctype> |
폼 데이터의 인코딩 방식을 지정 |
| <formtarget> |
폼 데이터를 전송할 대상 창이나 프레임을 지정 |
| <formautocomplete> |
폼 필드의 자동 완성 기능 사용 여부를 지정 |
댓글