- 크롬 내 개발자도구 : F12 누르기
- 주석 : <!-- ~ --> ~에 입력 시 주석처리 된다.
# p - 본문 태그
태그 | 설명 |
p(paragraph) | 본문 글자, 단락 |
br | 줄바꿈, 개행 |
hr | 수평 줄 |
ex) 결과화면
# a - 앵커 태그(Anchor tag)
서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그
- 빈 링크 : 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.
(하이퍼링크 사용하지 않을 때!)
ex)
<a href ="#"> 필기정리 </a>
//Tip : a 태그를 이용해 현재 페이지 내부의 원하는 장소로 이동할 수 있는데,
이를 위해 원하는 장소에 id 속성을 부여해야 한다.
단, 동일 페이지 내에서 아이디는 중복될 수 없다.
# 글자 형태 (요새는 스타일시트로 처리해 많이 사용하진 않는다.)
태그 | 설명 |
b | 굵은 글자 (단순 굵게 표현) |
strong | 굵은 글자 (b와 모양은 동일하나 중요하다고 인식까지 함) |
small | 작은 글자 |
sub | 아래첨자 글자 |
sup | 윗첨자 글자 |
ins | 밑줄 친 글자 |
del | 가운데 줄 그어진 글자 |
i | 기울어진 글자 |
em | 강조표현 스크린 리더 내 강조 인식함 ex) 사운드 지원 e북 리더기 |
mark | 하이라이트 표시 ex) 형광펜 |
# 인용문 형태
태그 | 설명 |
blockquote | 인용문 |
q | 짧은 인용문 |
abbr | 약어 |
adress | 주소 |
cite | 창작물 제목 정의 |
bdo | 텍스트 역방향 |
# 루비문자 : 일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미함
한국어도 한자가 많기 때문에 사용할 수 있는 태그
태그 | 설명 |
ruby | 루비문자 선언 |
rt | 위에 위치하는 작은 문자 |
rp | ruby 태그를 지원할 경우 출력되지 않는 |
ex)
<rp>( )</rp> // ( ) 사이는 태그 지원 시 출력 안됨
- 웹 브라우저는 유연하게 태크를 해석하여 지원하지 않는 태그도 정상 출력한다.
하지만 인터넷 익스플로러 8버전 이하는 태그 이름을 임의로 지정할 경우 스타일을 적용할 수 없어 주의해야 함
# 목록 태그
네비게이션 메뉴 - 페이지를 이동할 때 사용되는 메뉴
태그 | 설명 |
ul(unordered list) | 순서 없는 목록 |
ol(ordered list) | 순서 있는 목록 |
li(list item) | 목록 요소 |
# 정의 목록 : 특정 용어와 그 정의를 표현할 때 사용
태그 | 설명 |
dl(definition list) | 정의 목록 |
dt(definition term) | 정의 용어 |
dd(definition description) | 정의 설명 |
# 테이블 태그 : 표를 만들 때 사용
태그 | 설명 |
tr(table row) | 표 내부의 행 |
th(table header) | 행 내부의 제목 셀 |
td(table data) | 행 내부의 일반 셀 |
border | 표의 테두리 두께를 지정 (속성) HTML에서 사용은 가능하나 대개 CSS 속성으로 준다. |
colspan | 행 합치기 |
rowspan | 열 합치기 |
ex)
<th colspan ="4"> 테이블 </th>
<th rowspan ="5"> 테이블 </th>
// Tip : 실제 코드와 다르게 <tbody> </tbody>가 임의로 추가 삽입되는 경우가 있다.
# 이미지 태그
속성 | 설명 |
src | 이미지의 경로 지정 (상대경로 사용하는 것이 더 좋다.) |
alt | 이미지가 없을 때 나오는 글자 지정 |
width | 이미지의 너비 지정 |
height | 이미지의 높이 지정 |
width와 height도 스타일시트를 사용해 입력하는 것이 일반적임
// Tip : 이미지 완성 전 레이아웃을 미리 잡는 경우 임시이미지를 넣는 경우
placehold.it에서 사이즈별 이미지 미리 넣기
# 오디오 태그
속성 | 설명 |
src | 음악 파일의 경로 지정 |
preload | 음악을 재생하기 전에 모두 불러올지 지정 |
autoplay | 음악을 자동 재생할지 지정 2018년부터 크롬에서 autoplay를 지원하지 않음 (차단 해제 시 사용 가능) |
loop | 음악을 반복할지 지정 |
controls | 음악 재생 도구를 출력할지 지정 |
// Tip : XHTML과의 차이점
보다 엄격한 규칙을 가진 HTML로 대중화되지 못해 거의 사용 안한다.
ex)
<audio src="Kalimba.mp3" controls="controls"></audio>
- source 태그 : 웹브라우저 간 지원하는 음악파일 형식이 다른 문제를 해결하기 위해 사용
ex)
<body>
<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4">
<source src="Wildlife.webm" type="video/webm">
</video>
</body>
// Tip : source 태그의 type 속성을 입력하지 않아도 되지만
type 속성을 입력하지 않으면 웹 브라우저가 음악 파일을 내려받은 뒤에
재생 가능한 파일인지 확인하므로 트래픽이 낭비된다.
따라서 type 속성을 지정해주는 것이 좋다.
# 비디오 태그
- 비디오 파일 종류
MP4(H.264 + ACC)
webM(VP8 + Vorbis)
속성 | 설명 |
src | 비디오 파일의 경로 지정 |
poster | 비디오 준비 중일 때의 이미지 파일 경로 지정 |
preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
autoplay | 비디오를 자동 재생할지 지정 (오디오와 동일) |
loop | 비디오를 반복할지 지정 |
controls | 비디오 재생 도구를 출력할지 지정 |
width | 비디오의 너비를 지정 |
height | 비디오의 높이를 지정 |
// Tip : video 태그도 audio 태그처럼 웹 브라우저마다 지원하는 비디오 형식이 다르므로
source 태그를 사용해야 한다.
// Tip : video.js 플러그인
웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로
웹 페이지를 디자인할 때 발생할 수 문제를 해결하기 위해 video.js 플러그인을 사용한다.
ex)
<div id="" class="video-js vjs-default-skin vjs-paused" width="640" height="360" style="width: 640px; height: 360px;">
- 비디오 내 자막 내용
ex)
<track kind="subtitles" src="track.srt" srclang="ko" label="Korean">
- track kind : 텍스트 트랙의 종류, subtitles(자막)이 기본값이다.
- src : 자막의 주소 상대경로
- srclang : 텍스트 트랙의 언어
- label : 텍스트 트랙의 제목
# form : 입력 양식 태그
속성 | 설명 | |
action |
입력 데이터 전달 위치 지정 | |
method (입력 데이터 전달 방식 선택) |
get | 주소에 데이터를 입력해 크기 한정 보안문제에 취약 |
post | 별도 데이터 전송방식으로 데이터 용량 제한 없음 보안이 필요한 경우 사용 |
# input 태그
<input type = "해당 입력 방식">의 형태를 취한다.
속성값 | 설명 |
text | 글자 입력 양식 생성 |
button | 버튼 생성 |
checkbox | 체크박스 생성 |
file | 파일 입력 양식 생성 |
hidden | 보이지 않는 입력 방식 생성 |
image | 이미지 형태 생성 |
password | 비밀번호 입력 양식 생성 |
radio | 라디오 버튼 생성 |
reset | 초기화 버튼 생성 |
submit | 제출 버튼 생성 |
# label 태그
label 클릭 시 input 태그로 포커스가 이동한다.
따라서 어떠한 input 태그를 설명하고 있는지 표시해줘야 한다.
input 태그에 id 속성을 입력하고,
label 태그에 for 속성을 입력한다.
ex)
<body>
<form>
<label>이름</label>
<input type="text">
</form>
</body>
# HTML5에서 추가된 input 태그
속성값 | 설명 |
month | 월 선택 양식 생성 |
week | 주 선택 양식 생성 |
date | 일 선택 양식 생성 |
datetime | 날짜 선택 양식 생성 |
datetime-local | 지역 날짜 선택 양식 생성 |
time | 시간 선택 양식 생성 |
number | 숫자 생성 양식 생성 |
range | 범위 선택 양식 생성 |
search | 검색어 입력 양식 생성 |
url URL | 주소 입력 양식 생성 |
이메일 입력 양식 생성 | |
tel | 전화 번호 입력 양식 생성 |
color | 색상 선택 양식 생성 |
# textarea : 여러 줄의 긴 문장을 작성할 수 있는 태그
게시판 내용 적는 태그
- cols : 태그의 너비 지정
- rows : 태그의 높이 지정(enter 줄 수 기준)
ex)
<textarea cols="200" rows="30"> 텍스트 </textarea>
// Tip : 내용 여러줄 입력하고 싶을 땐 가독성은 떨어지나 아래 예시처럼 입력해야 한다.
(출력 화면에는 정상적으로 보인다)
ex)
<textarea>Hello Textarea
Hello Textarea</textarea>
# select 태그
태그 및 속성 | 설명 |
select | 하나만 선택 가능 |
multiple | ctrl키를 누른 상태로 클릭 시 여러 개 선택 가능 |
option | 옵션 생성 |
optgroup(옵션그룹) | 선택 옵션의 그룹 나눌 때 사용 |
# fieldset 태그와 legend 태그 : 입력 양식 설명
legend 태그는 fieldset 태그 안에만 사용할 수 있다.
물론 다른 곳에도 쓸 수는 있지만 아무 효과가 없다.
ex)
<fieldset>
<legend>입력 양식</legend>
<table>
<tbody><tr>
<td><label for="name">이름</label></td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email"></td>
</tr>
</tbody></table>
<input type="submit">
</fieldset>
# div, span 태그 : 공간분할태그
CSS를 사용하여 우리가 원하는 레이아웃을 구성할 수 있도록 공간 분할 해주는 것
태그 | 설명 |
div | block 형식으로 공간 분할 (전체 공간 다 차지하는 방식) |
span | inline 형식으로 공간 분할 (정해진 그 공간 만큼만 차지하는 방식) |
- block 형식의 태그와 inline 형식의 태그 비교 정리
block 형식 태그 | inline 형식 태그 |
div | span |
h1 ~h6 | a |
p | input |
목록 | 글자 형식 |
테이블 | |
form |
// 이미지 태그와 멀티미디어 태그는 inline-block 형식을 가지는 태그이다.
# semantic 구조 태그
시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그이다.
태그가 의미를 가짐으로써 검색 엔진이나 그 외의 기계적인 동작들이
웹 페이지를 쉽게 이해할 수 있게 되고 검색이 용이해지는 장점이 있다.
태그 | 설명 |
header | 머리글을 지정 제목 태그(hn) 및 nav 태그를 포함 (제목, 로고, 작성자, 작성일과 같은 메타 정보) |
nav | 동일 사이트 내 다른 사이트의 문서로 연결(네비게이션)하는 링크의 모음으로 구성 메뉴에 자주 사용 (사이트 전체 흐름) |
aside | 본문 이외의 내용을 표시하는 사이드바 영역 (광고, 링크 등으로 구성) |
section | 주제별 콘텐츠 영역 제목으로 시작하는 컨텐츠 그룹핑 위해 사용 (형식) |
article | 콘텐츠의 실제 내용을 포함하는 영역 (내용) |
footer | 주로 하단에 위치 (회사 정보, 소유자의 소셜미디어 정보, 약관 등 관련성이 적은 부가정보) |
// Tip : 시멘틱 웹 설명 추천 링크 https://blueshw.github.io/2020/05/09/know-html-semantic-elements/
// Tip : 내용 안에 ' ' 나 " "를 넣어주고 싶을 때는
해당 내용의 바깥을 반대로 " "나 ' '를 넣어준다.
ex)
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
// HTML 내용 설명 및 예시 문제 : https://www.w3schools.com/html/default.asp
'Web > HTML' 카테고리의 다른 글
[필기정리]Day35 - HTML 실습문제 및 해답 (0) | 2020.07.29 |
---|---|
[필기정리] Day33 - HTML 기본 개념 (0) | 2020.07.27 |