- VS Code 홈페이지 접속( https://code.visualstudio.com/)
- 컴퓨터에 맞는 OS를 선택하여 다운로드
- Visual Studio Code 확장 기능(Extensions) 추가
HTML5
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식
공백을 추가 특수기호 :
인터넷
WEB
- 인터넷을 통해 사람들이 정보를 공유할 수 있는 공간 (통신망 위에서 작동하는 서비스)
- 네트워크가 연결된 컴퓨터들이 서버와 클라이언트로 구분하여 HTML이라는 Markup(언어)으로 자료를 주고 받는다
HTTP(Hyper Text Transfer Protocol)을 사용하여
HTML(Hyper Text Markup Language)로
작성된 문서(텍스트,그래픽,오디오, 프로그램 파일 등 멀티미디어)를 연결
<head></head> : 문서의 각종 정보와 문서 자체에 대한 설명 내용
<body></body> : 화면에 출력해서 보여주는 모든 정보/내용
<html></html> : html문서 시작, 끝 표시 ex. <html lang=“ko”>
: HTML에서 사용하는 주석
<hn></hn> : 제목을 입력할 때 사용하는 태그 (h 뒤 숫자(n)으로 구분) ex. h1,h2~h6
<br> : 문장의 줄바꿈
<hr> : 페이지에 가로로 밑줄을 만들때
<strong></strong>또는<b></b> : 문장에서 문자를 강조, 굵게 표시할 경우
<mark></mark> : 형관펜 표시
<u></u> : 밑줄 긋기
<s></s> : 취소선
<em></em> 또는 <i></i> : 문자 기울임
<small></small> : 원문자보다 작은 글씨 표시(부가정보)
<blockquote></blockquote> : 블로그 사이이트의 글 인용 들여쓰기 텍스트 구별 개행 포함
<q></q> : 인용 문구에 "" 표시 개행없음
<sup></sup> : 태그로 감싼 내용만 위 첨자
<sub>내용</sub> : 태그로 감싼 내용만 아래 첨자
<abbr title="속성값"></abbr> : 툴팁 형태로 출력
<cite>내용</cite> : 참고할 때 사용하며 이텔릭으로 표시
<code></code> : 소스코드를 담는 태그
<kbd>내용</kbd> : 사용자 입력 내용을 표시
<ul></ul> : 순서가 필요하지 않은 목록 (<li>내용1</li>)
<ol type=“설명문자” start=“시작순서”></ol> : 순서가 있는 목록 만들 때 사용
<dl></dl> : 용어나 문장에 대한 정의(definition) 리스트로 자동으로 들여쓰기
<dt>제목1</dt>
<dd>내용1</dd>
★표 관련 태그
<table></table> : 웹 문서에서 자료를 정리할 때
<th></th> : 열에 대한 제목 표시/ 중앙 정령 굵게 표시
<tr></tr> : row 행
<td></td> : col 열
<caption></caption> : 테이블의 제목이나 내용을 추가
<table border=“굵기”></table> : 표 테두리 굵기
<td rowspan= “병합할 행 개수“></td> : 행병합 (세로)
<td colspan= “병합할 열 개수“></td> : 열병합 (가로)
<thead></thead> : 표의 헤더 부분을 정의
<tbody></tbody> : 표의 본문을 정의
<tfoot></tfoot> : 표의 바닥 부분을 정의
<col> : 표의 각 열에 대한 스타일을 지정
<colgroup></colgroup> : 여러 개의 <col> 태그를 그룹화하여 한 번에 스타일을 적용
★영역 관련 태그
<div></div> : block형식의 공간을 수직으로 분할
<span></span> : inline형식의 공간을 수평으로 분할
<iframewidth=“크기” height=“크기” src=“경로”></iframe>: 웹 문서 안에 다른 웹 페이지를 추가
★멀티미디어 관련 태그
<img src=“경로” alt=“설명 문구“ width=“너비” height=“길이”/>
: 웹 페이지에 사진이나 그립을 삽입할 때 사용
<map></map>, <area> : 이미지를 구역 별로 나누어 링크를 만들어준다
alt 대체 텍스트지정
coords 분할할 지역 좌표 지정(시작, 끝)
href 링크 페이지 경로 지정
media 링크 페이지 최적화 미디어 지정
rel 현재 페이지,링크페이지 관계지정
shape 링크로 사용할 영역 형태 지정(default, rect, circle, poly)
target 링크페이지가 열릴 위치(새창, 현재창, 부모창, 최상위창)
type 링크 페이지의 미디어 유형 지정
<audio></audio> : 음악을 재생
src 음악 파일의 경로 지정
controls (“controls”, “”,-) 재생 도구 출력 지정
autoplay (“autoplay”, “”,-) 자동 재생 여부 지정(모바일에서 적용X)
loop (“loop”, “”, -) 반복 여부 지정
preload none: 미리 다운로드 하지 않음
(“none”, “metadata”,“auto”) metadata : 기본 정보는 가져옴(크기, 첫 프레 임, 오디오 길이 등)
auto : 미리 다운로드 함
<video></video> : 미디어 재생
src 미디어 파일의 경로 지정
controls 재생 도구 출력 지정
autoplay 자동 재생 여부 지정(모바일에서 적용X)
loop 반복 여부 지정
preload 재생 시 모두 불러올 지 지정
poster 재생 전 출력할 이미지 출력 / 경로 입력
width,height 너비, 높이 지
★하이퍼링크 태그
<a href=“주소”></a> : 외부 사이트 연결, 문서 내부에서 이동
href 링크한 페이지의 id값이나 사이트 주소 지정
target 링크 페이지가 표시될 위치(새 창, 현재 창) 지정
download 링크한 페이지를 표시하지 않고 다운로드 하는 것
rel 현재 페이지와의 관계 지정
hreflang 링크한 페이지의 언어 지정
type 페이지의 파일 유형 지정
ex)
내부 이동
<p id=“p1”></p>
<a href=“#p1”>링크 표시 문구</a>
target 이용하기
<a href=“주소“ target=“_blank(새 창)” or “_self(현재)”or“_parent(상위 창)”or“_top(최상위창)”> </a>
★ 폼 관련 태그
<form action=“프로그램(페이지)” method=“방식”></form>
: 사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그
method
get : URL창에 데이터를 전송 data 제한(256~4096byte)(data를 확인가능)
post : httprequest에 data를 전송 data크기에 제한 없음(data를 확인불가)
name : <form>태그의 고유 이름 지정, <form>을 구분하기 위해 사용
action : 데이터를 처리 할 프로그램(페이지)을 지정
target action : 속성의 프로그램(페이지)를 열지 지정
autocomplete : 이전 입력내용 출력 생략시 자동출력(default : on)
<fieldset name=“이름“></fieldset>, <legend>명칭</legend>
: 폼 요소를 그룹화 그룹폼 요소에 명칭을 부여
<input> : 사용자로부터 data를 입력
type :타입을 결정하는 속성(text, checkbox, radio 등)
text : 한줄 텍스트 입력창
<input type=text name=“명칭” value=“값“ size=“숫자” maxlength=“숫자”>
password : 비번전용 입력창
<input type=password name=“명칭” minlength=“숫자” maxlength=“숫자“>
hidden : 확인불가 입력값, 관리자 필요값 사용시
<input type=hidden name=“명칭” value=“값“>
button : 버튼 생성
<input type=button id=“명칭” value=“값“ onclick=“스크립트함수”>
checkbox : 체크 박스 생성
<input type=checkbox/radio name=“명칭” value=“값“ [checked]>
file : 파일 입력 양식
<input type=file name=“명칭” [multiple]>
image : 이미지 형태
<input type=“image” name/id=“명칭” src=“경로“ alt=“대체문자”>
radio : 라디오 버튼
submit : 입력내용 전송
<input type=submit/reset id=“명칭” value=“입력/취소“>
reset : 입력내용 삭제
value : input요소의 기본 값
name : input을 구별
min/max/step : 허용범위 최소값/최대값/값의 증감값
autocomplete : 자동 완성 기능
height/width : 입력 창의 높이와 너비
readonly : 읽기 전용 필드
accept : 파일 타입에 알려주는 기능
multiple : 여러 개의 값 입력 가능
placeholder : 사용자 입력 전 입력 창 표시
autofocus : 입력 창 커서
required : 필수 입력 필드
list : <datalist>의 옵션 값을 <input>안에 나열
maxlength : 글자수 제한
size : 화면표시 글자 수
minlength : 최소 입력 글자(최신 크롬, 안드로이드만 지원)
formaction : 실행 프로그램 연결, submit/image일 때 사용
formenctype : 전송시 해석방식 지정, submit/image일 때 사용
formnovalidate : 전송 데이터 유효 여부 표시
formtarget : 서버응답 표시위치 지정
<label></label> : <form>요소에 레이블(명칭)을 붙이기 위한 태그
<label for=“id이름”>명칭</label>
<input id=“id이름“ type=“타입“>
★type HTML5 양식 태그
color 색상 선택
<input type=“color” name=“명칭” value=“색상 값“>
date 년, 월, 일
datetime 년, 월, 일 시간 입력창
datetime-local 년, 월, 일 시간 선택
<input type=“타입 명” id=“명칭” min=“날짜” max=“날짜“ step=“숫자”
value=“날짜“>
time 시간을 선택
<input type=“time” id=“명칭” value=“시간“>
month 년,월 선택
week 주 선택
number 숫자를 입력창
range 슬라이드 막대로 숫자 지정
<input type=“number/range” id=“명칭” min=“숫자” max=“숫자“ step=“숫자” value=“숫자“>
search 검색어 입력창,(입력 후 X버튼이 생김)
tel 전화전호를 입력창(컴퓨터가 자동번호 인식)
email 자동 @을 확인
<input type=“search/url/email” id=“명칭” value=“초기값“>
url 주소 값 입력창 (http://가 들어가있는지 확인)
★여러 값 표현 태그
select : 드롭다운 목록으로 값을 입력
option : list 에서 옵션값으로 지정
optgroup : list목록을 그룹으로 묶을 때
datalist : input태그에서 리스트 형식으로 할 때
textarea : 여러 줄 입력하는 텍스트 영역
☆<select></select>와 <option></option>, <optgroup></optgroup>
<select size=“숫자” id=“”> size : 화면표시 항목 개수
<optgroup lebel=“목록이름”> label : 목록 제목 출력내용
<option value=“값”>표시내용</option> value : 옵션 선택 시
<option value=“값”>표시내용</option>
<option value=“값” select>표시내용</option> selected : 기본으로 선택값
</optgroup>
<optgroup lebel=“목록이름”>
<option value=“값”>표시내용</option>
<option value=“값”>표시내용</option>
</optgroup>
</select>
(multiple : 여러 항목 선택 지정, ctrl 누른 상태에서 선택)
☆<datalist></datalist>와 <option></option>
<input type=“text” id=“” list=“datalist id 값”>
<datalist id=“”>
<option value=“값” label=“명칭“></option>
<option value=“값” label=“명칭“></option>
</datalist>
<progress value=“숫자” max=“숫자“></progress> : 작업 진행 상태
<meter value=“값” min=“값“ max=“값“></meter> : 값이차지하는 크기
value 화면표시 항목 개수
max/min 범위 최대/최소 값
low/high 낮/높다고 할값
optimum 적당할 정도의 값
★시맨틱 태그
시맨틱 태그 (semantic) : 페이지구조를 특정 기능에 맞는 태그 사용
구조를 한 눈에 파악 가능 정확한 정보 검색
검색 엔진을 통한 문서내용 확인
어느 장치에서 동일한 문서해석
<header></header> : 특정부분 머리말(검색어(form), 메뉴(nav))
<nav></nav> : 페이지 이동(네비게이션)
<section></section> : 콘텐츠의 주제별 정리 중복적용 가능
<article></article> : 웹페이지 내용영역(배포, 재사용)
<aside></aside> : '사이드바' (광고 링크 모임)
<footer></footer> : 웹페이지의 최하단 (회사소개 저작권)
