✏️ HTML
HTML이란?
- Hyper Text Markup Language의 약자로 웹페이지를 만들기 위한 표준 마크업 언어
- 웹 페이지의 구조를 설명함
HTML 구조
<!DOCTYPE html> <!-- 해당 문서가 html5임을 정의 --> <html> <!-- html 페이지 루트 --> <head> <!-- html 페이지의 메타 정보, 스크립트, css 등 포함 --> <title>Page Title</title> </head> <body> <!-- 실제 웹 페이지에 표시되는 내용을 담는 컨테이너 --> body 태그 내용 </body> </html>
HTML 태그 구조
- 일반적으로 시작태그로 시작해서 종료 태그로 끝남.
- 태그 구조
<!-- 일반적인 HTML 태그 --> <태그명 속성명="속성값" ... > 태그 내용 </태그명> <!-- 빈 HTML 태그 --> <태그명>
HTML 태그 속성
- 모든 HTML 요소는 속성을 가질 수 있음
- 속성은 요소에 대한 추가정보를 제공
- 속성은 시작 태그에서 지정
- 속성은 이름/값 쌍으로 제공
✏️ HTML 텍스트 태그
<hn> 태그
- 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공
- 여러 검색 엔진에서 <h> 태그를 이용하여 키워드를 수집 및 내용 파악
- 예제
<h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6>
실제 웹사이트에서 나타나는 형태
제목1
제목2
제목3
제목4
제목5
제목6
<p> 태그
- 단락을 나타내는 태그
- 내용상 끊어서 구분할 수 있는 부분들(문단)
- 위아래로 약간의 여백이 자동으로 삽입
- 여러번 공백 및 줄바꿈을 해도 웹브라우저에서는 하나로 인식
- 줄바꿈을 하려면 <br> 태그를 사용
- 태그 내용을 그대로 출력하려면 <pre> 태그 사용
- 단락을 구분하기 위해서 <hr> 태그 사용
- 예제
<p>p 태그 테스트1</p> <hr> <p>p 태그 테스트2 </p> <hr> <p>p 태그 <br> 테스트3 </p> <hr> <pre>p 태그 테스트3 </pre>
실제 웹사이트에서 나타나는 형태
p 태그 테스트1
p 태그 테스트2
p 태그
테스트3
p 태그 테스트3
HTML 서식 태그들
- <b>태그와 <strong>태그
- 두 태그 전부 텍스트를 굵게 표현
- <strong> 태그로 텍스트를 굵게 표현했을 때는 해당 내용이 중요하다는 의미도 존재
- 예제
<p><b>b태그를 이용한 텍스트 표시</b></p> <strong>strong태그를 이용한 텍스트 표시</strong>b태그를 이용한 텍스트 표시 // b태그가 안먹힘.
strong태그를 이용한 텍스트 표시
- <i>태그와 <em>태그
- 이텔릭체를 표현할 때 사용
- <em> 태그로 텍스트를 이텔릭체로 표현했을 때는 해당 내용이 중요하다는 의미도 존재
- 예제
<i>i태그</i>를 이용한 텍스트 표시 <em>em태그</em>를 이용한 텍스트 표시i태그를 이용한 텍스트 표시
em태그를 이용한 텍스트 표시
- <mark> 태그
- 텍스트에 하이라이팅 효과 적용
- 예제
<mark>mark태그</mark>를 이용한 텍스트 표시mark태그를 이용한 텍스트 표시
- <del> 태그
- 텍스트 중앙에 가로줄을 그어 텍스트를 지운 것과 같은 효과를 냄
- 예제
<del>del태그</del>를 이용한 텍스트 표시del태그를 이용한 텍스트 표시
- <ins> 태그
- 텍스트 밑에 가로줄을 그어 빈칸에 텍스트를 삽입한 것과 같은 효과를 냄
- 예제
<ins>ins태그</ins>를 이용한 텍스트 표시ins태그를 이용한 텍스트 표시
- 태그 와 <sub> 태그
- 위첨자와 아래첨자를 사용할 때 사용
- 예제
위첨자 - 2<sup>e</sup> 아래첨자 - LOG<sub>2</sub>위첨자 - 2e
아래첨자 - LOG2
인용구
- <q> 태그
- 짧은 인용구를 표시할 때 사용
- 자동으로 앞뒤에 큰따옴표가 붙음
- 예제
<p>HTML에서 사용하는 <q>짧은 인용구 q태그</q>입니다.</p>HTML에서 사용하는 짧은 인용구 q태그입니다.
- <blockquote> 태그
- 길이가 긴 인용구를 표시할 때 사용
- 별도의 단락으로 구분되어 나타냄
- 예제
<p>HTML에서 사용하는 <blockquote>긴 인용구 blockquote태그</blockquote>입니다.</p>HTML에서 사용하는
긴 인용구 blockquote태그
입니다.
- <abbr> 태그
- 용어의 축약형을 표현하기 위해 사용
- 예제
<p><abbr title="HyperText Markup Language 5">HTML5</abbr></p>HTML5
- <address> 태그
- HTML에서 주소를 표현
- 이탤릭체로 표현 및 위아래 약간의 공백이 자동으로 삽입됨.
- 예제
부산광역시<address> 부산광역시<br> 동래구 </address>
동래구
HTML 엔티티
✏️ HTML 기본 요소
style 속성 및 <style> 태그
- 태그의 style 속성을 이용하여 CSS 스타일을 태그에서 직접 설정할 수 있음
- style 속성을 이용하면 하나의 HTML 요소만 스타일을 적용
- <style> 태그를 이용하여 css코드를 작성하여 사용할 수 있음.
- 형태
<!-- 태그에 style 속성 부여 --> <태그이름 style="속성이름:속성값"></태그이름> <!-- style 태그를 이용해 CSS 코드 작성 --> <style> css코드 </style>
<a> 태그
- 하이퍼 링크를 정의
- <a>태그 속성
- target 속성
- _self : 링크로 연결된 문서를 현재 창/탭에서 문서 오픈(기본)
- _blank : 링크로 연결된 문서를 새 창이나 새 탭에서 오픈
- _parent : 링크로 연결된 문서를 부모 창에서 오픈
- _top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임에서 오픈
- 창/탭 이름 : 링크로 연결된 문서를 지정된 창/탭에서 오픈
- href 속성 : 이동할 링크를 설정
- target 속성
- 링크 상태
- link : 아직 한 번도 방문한 적이 없는 상태
- visited : 한 번이라도 방문한 적이 있는 상태
- hover : 링크 위에 마우스를 올려놓은 상태
- active : 링크를 마우스로 누르고 있는 상태
- 책갈피 기능
- id 속성을 이용하여 페이지에 책갈피 정의
- href 속성에 id 속성의 값을 넣어 책갈피와 연결
<img> 태그
- HTML 문서에 이미지를 삽입할 때 사용
- <img> 태그는 종료 태그가 없는 빈 태그
- 형태
<img src="이미지 주소" alt="대체문자열"> - <img> 태그 속성
- src 속성 : 이미지가 저장된 주소의 URL 주소를 명시
- alt 속성 : 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열 설정
- style 속성 : 이미지 크기 및 테두리 등 여러 css 속성을 설정
- usemap 속성 : <map>태그의 name 속성과 연결
- 이미지 맵(image map)
- 이미지의 일부를 클릭할 수 있도록 만들어서 버튼 처럼 사용하는 기능을 의미
- <img> 태그의 usemap 속성을 통해 <map>태그와 연결
- <map> 태그는 하나 이상의 <area>태그를 가지고 <area> 태그가 바로 버튼과 같은 역할을 함.
리스트
- 여러 요소를 일렬로 나열한 목록이나 명단
- html에서는 순서가 없는 리스트(unordered list), 순서가 있는 리스트(ordered list), 정의 리스트(definition list)가 있다.
- 순서 없는 리스트
- 리스트는 <ul> 태그, 리스트 요소는<li> 태그
- 형태
<ul> <li>리스트1</li> <li>리스트1</li> </ul>
- 순서 있는 리스트
- 리스트는 <ol> 태그, 리스트 요소는 <li> 태그
- 형태
<ol> <li>리스트1</li> <li>리스트1</li> </ol>
- 정의 리스트
- 용어와 그에 대한 정의를 모아놓은 리스트 <dl> 태그로 시작
- 용어 이름 <dt> 태그, 용어에 대한 정의 <dd> 태그
- 형태
<dl> <dt>용어 이름</dt> <dd>용어 정의</dd> </dl>
테이블
- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 의미
- <table> 태그 : 표를 정의하는 태그
- <tr> 태그 : 표의 열을 구분해주는 태그
- <th> 태그 : 열의 제목을 표시해주는 태그, 자동으로 굵은 글씨, 가운데정렬됨.
- <td> 태그 : 표의 열을 각각의 셀로 나누는 태그
- <caption> 태그 : 테이블 상단에 제목이나 설명 표시
- <colgroup> 태그와 <col> 태그 : 테이블의 특정 열에 스타일을 지정하는데 사용
- 테이블 태그의 속성
- colspan 속성 : 테이블의 열을 합침
- rowsapn 속성 : 테이블의 행을 합침
- 형태
<table style="border:1px solid black;"> <colgroup> // 적용안됨. <col style="background-color:red;"> <col style="background-color:blue;"> </colgroup> <caption>테이블 제목</caption> <tr> <td>테이블 내용1</td> <td>테이블 내용1</td> </tr> </table>테이블 제목 테이블 내용1 테이블 내용1
✏️ HTML 공간 분할
블록과 인라인
- HTML의 모든 요소는 웹브라우저에서 어떻게 보이는가를 결정하는 display 속성을 가짐
- 블록 타입
- 언제나 새로운 라인에서 시작
- 해당 라인의 모든 너비를 차지
- 대표적인 블록 타입 태그 : <p>, <div>, <h>, <ul>, <ol>, <form>
- 인라인 타입
- 새로운 라인에서 시작하지 않음
- 해당 라인 전체가 아닌 요소 내용 만큼만 차지
- 대표적인 인라인 타입 태그 : <span>, <a>, <img>
<iframe> 태그
- 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹페이지를 삽입가능
- iframe의 페이지 변경하려면 a태그를 만들고 iframe의 name속성과 연결
- 형태
<iframe src="삽입할 주소"></iframe>
프레임셋
- 하나의 브라우저 창에 둘 이상의 페이지를 표시할 때 사용
- noresize 속성을 명시하지 않으면, 사용자가 임의로 페이지 크기를 조절할 수 있음
- 각각의 페이지는 frame 태그로 표현
- frame 요소를 지원하지 않는 브라우저일 때는 noframes 태그를 이용해 보여지는 문자열 지정
- 형태
<frameset cols="25%,*,25%"> <frame name="left" src="/html/intro"/> <frame name="center" src="/css/intro"/> <frame name="right" src="/php/intro"/> <noframes> <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body> </noframes> </frameset>
레이아웃
- div 태그를 이용한 레이아웃
- header, nav, section, footer을 지정하여 css를 통해 레이아웃 설정
- html5 레이아웃
- html5에서 제공하는 semantic 요소를 이용하여 레이아웃 설정
- <header> : 문서나 섹션 부분에 대한 헤더를 정의
- <nav> : 문서의 탐색 링크 정의
- <section> : 문서의 메인 내용 정의
- <article> : 문서에서 독립적인 하나의 글부분 정의
- <aside> : 페이지 부분 이외의 콘텐츠 정의
- <footer> : 문서나 섹션 부분에 대한 하단 정의
- table요소를 이용한 레이아웃
- 오래전부터 사용하던 방식, 현재는 거의 사용하지 않음
- 테이블로 작성된 레이아웃은 수정하기 매우 힘듬
✏️ HTML 입력양식
form 태그
- 웹페이지에서 사용자의 입력을 받거나 입력받은 데이터를 서버로 보낼 때 사용
- form 태그 속성
- action 속성
- 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
- method 속성
- 입력받은 데이러틀 서버에 전달할 방식을 명시
- GET 방식 : 주소에 데이터를 추가하여 전달하는 방식으로 크기가 작고 중요도가 낮은 데이터를 보낼때 사용
- POST 방식 : 데이터를 별도로 첨부하여 전달하는 방식으로 데이터가 외부에 드라나지 않아 보안성이 좋고 전송 데이터 크기가 제한이 없어 활용성이 높음.
- action 속성
- HTML5에서 추가된 form 태그 속성
- autocomplete 속성
- form 태그나 input 태그에 입력된 정보를 저장할지 안할지 명시
- on으로 설정 시 브라우저는 사용자 입력하는 정보를 자동으로 저장
- 해당 속성은 input 타입(text, password, range, color, date, datetime-local, month, week, email, url, tel, search)에서만 사용가능
- novalidate 속성
- 입력한 정보를 전송할 때 그 정보가 유효한지 아닌지 검사하지 않았다는 것을 명시
- 자동으로 유효성 검사를 하는 input 타입에 이 속성을 사용하면 유효성 검사를 하지 않음.
- 서버 측에서 따로 유효성 검사 해야함.
- autocomplete 속성
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> 폼태그 내부 내용 </form>
input 태그
- input 태그를 이용해 사용자로부터 입력을 받을 수 있음.
- input 태그 종류
- 텍스트 입력
- type 속성은 text로 지정
- 사용자로부터 한줄의 텍스트를 입력받을 수 있음.
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="text" name="search"> </form>
- 비밀번호 입력
- type 속성은 password로 지정
- 입력받은 텍스트는 별표나 작은 원 모양으로 표시
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="password" name="search"> </form>
- 라디오 버튼
- type 속성은 radio로 지정
- 여러 개의 선택사항 중 하나의 선택 사항만 입력받을 수 있음.
- 라디오 버튼들의 name 속성값이 같아야 서버에 정확하게 입력값을 전송할 수 있음.
- 선택되었을 때 checked 속성이 추가됨.
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="radio" name="radio" value="1">1 <input type="radio" name="radio" value="2">2 <input type="radio" name="radio" value="3">3 <input type="radio" name="radio" value="4">4 </form>
1 2 3 4
- 체크박스
- type 속성은 checkbox로 지정
- 사용자로부터 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있음.
- name 속성값이 같아야 서버에 정확하게 입력값을 전송할 수 있음.
- 선택되었을 때 checked 속성이 추가, disabled 속성을 통해 선택을 못하게 설정할 수 있음.
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="checkbox" name="checkbox" value="1">1 <input type="checkbox" name="checkbox" value="2">2 <input type="checkbox" name="checkbox" value="3">3 <input type="checkbox" name="checkbox" value="4">4 </form>
1 2 3 4
- 파일 선택
- type 속성을 file로 설정
- 사용자로부터 파일을 전송 받을 수 있음
- accept 속성을 통해 입력받을 수 있는 파일의 확장자 및 종류를 명시 가능
- 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="file" name="file" accept="image/*"> </form>
- 전송 버튼
- type 속성을 submit으로 설정
- 사용자로부터 입력받은 데이터를 서버의 폼 핸들러로 제출하는 버튼을 생성
※ 폼 핸들러 : 입력받은 데이터를 처리하기 위한 서버 측 웹페이지를 의미 - 형태
<form action="처리할 페이지 주소" method="데이터 전송 방식"> <input type="submit" name="submit"> </form>
- 텍스트 입력
- HTML5에서 추가된 input 태그 종류
- 숫자 입력
- type 속성을 number로 설정
- 사용자가 숫자를 입력할 수 있게 해줌.
- 입력 필드 우측에 숫자 크기 조절 상하 버튼이 생김
- min 속성과 max 속성을 통해 범위를 제한할 수 있음.
- 형태
<input type="number" name="number" min="1" max="9">
- 입력 범위 지정
- type 속성을 range로 설정
- 사용자가 일정범위 안의 값만 입력할 수 있도록 설정
- 형태
<input type="range" name="range" min="1" max="9">
- 색상 입력
- type 속성을 color로 설정
- 사용자가 색상을 입력할 수 있도록 설정
- 선택된 색상은 #을 제외한 16진수 6자리 색상값으로 전송함.
- 형태
<input type="color" name="color" value="#CC6600">
- 날짜 입력
- type 속성을 date로 설정
- 사용자가 날짜를 입력할 수 있도록 설정
- min 속성과 max 속성을 사용하여 날짜 선택에 제한을 설정할 수 있음.
- 형태
<input type="date" name="date">
- 시간 입력
- type 속성을 time으로 설정
- 사용자가 시간을 입력할 수 있도록 설정
- 형태
<input type="time" name="time">
- 날짜와 시간 입력
- type속성을 datetime-local로 설정
- 사용자가 날짜와 시간을 입력할 수 있도록 설정
- 형태
<input type="datetime-local" name="datetime-local">
- 연도와 월 입력
- type속성을 month로 설정
- 사용자가 연도와 월을 입력할 수 있도록 설정
- 형태
<input type="month" name="month">
- 연도와 주 입력
- type속성을 week로 설정
- 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 설정
- 형태
<input type="week" name="week">
- 이메일 입력
- type속성을 email로 설정
- 사용자가 email 주소를 입력할 수 있도록 설정
- 형태
<input type="email" name="email">
- URL 주소 입력
- type속성을 url로 설정
- 사용자가 URL주소를 입력할 수 있도록 설정
- 형태
<input type="url" name="url">
- 전화번호 입력
- type속성을 tel로 설정
- 사용자가 전화번호를 입력할 수 있도록 설정
- 형태
<input type="tel" name="tel">
- 검색어 입력
- type속성을 search로 설정
- 사용자가 검색어를 입력할 수 있도록 설정
- text 타입과 다른 점으로 입력 필드에 입력된 검색어를 바로 삭제할 수 있는 X표시가 생김.
- 형태
<input type="search" name="search">
- 숫자 입력
- input 태그 속성
- value 속성
- input 태그의 입력 필드에 나타나는 초깃값을 설정
- readonly 속성
- 사용자가 입력한 필드를 볼 수는 있지만 수정할 수 없도록 설정
- disabled 속성과 다르게 submit하면 초깃값이 서버로 전송
- disabled 속성
- 사용자가 입력 필드를 아예 사용할 수 없도록 설정
- 사용도 못하고, 클릭도 못함, 초기값이 서버로 전송되지 않음
- maxlength 속성
- 입력 필드에 입력할 수 있는 문자의 최대 길이 설정
- size 속성
- 입력 필드에 보여지는 input 태그의 크기를 설정
- 한 번에 보여줄 수 있는 문자의 최대 개수를 의미
- value 속성
- HTML5에서 추가된 input 태그 속성
- autocomplete 속성
- form 태그나 input 태그에 입력된 정보를 저장할지 안할지 명시
- on으로 설정 시 브라우저는 사용자 입력하는 정보를 자동으로 저장
- 해당 속성은 input 타입(text, password, range, color, date, datetime-local, month, week, email, url, tel, search)에서만 사용가능
- autofocus 속성
- 웹 페이지가 로드될 때, 속성이 적용된 input 태그에 자동으로 포커스가 가도록 함.
- form 속성
- input 태그의 위치에 상관없이 포함할 form 태그를 명시
- 포함할 form 태그의 id 속성값을 공백으로 연결하여, 둘 이상의 form태그에 포함할 수 있음.
- formaction 속성
- 입력한 정보를 전송할 때 정보가 전달될 서버 측 파일을 명시
- form 태그의 action속성을 덮어씀
- submit 타입과 image타입에서만 사용 가능
- formenctype 속성
- 입력한 정보를 전송할 때 암호화하는 방법을 명시
- form 태그의 enctype 속성을 덮어씀
- post 방식일 때만 적용, submit 타입과 image타입에서만 사용 가능
- formmethod 속성
- 입력한 정보를 전송할 때 사용하는 http 메소드를 명시
- form 태그의 method속성을 덮어씀
- submit 타입과 image타입에서만 사용 가능
- formnovalidate 속성
- 입력한 정보를 전송할 때 그 정보가 유효한지 아닌지 검사하지 않닸다는 것을 명시
- form 태그의 novalidate 속성을 덮어씀
- submit 타입에서만 사용 가능
- formtarget 속성
- 응답 페이지를 어디에 출력할지 명시
- form태그의 target 속성을 덮어씀
- submit 타입과 image타입에서만 사용 가능
- height와 width 속성
- type속성이 image일 때만 사용 가능
- 이미지의 높이와 너비 명시
- 클릭시 클릭한 좌표도 같이 전송
- list 속성
- 미리 정의된 옵션 리스트를 설정하는 datalist 태그의 id속성값과 일치하면 연결됨.
- min과 max 속성
- input 태그에 입력할 수 있는 최솟값과 최댓값을 명시
- number, range, date, time, datetime-local, month, week 타입에서 사용가능
- multiple 속성
- input 태그에 값을 두 개 이상 입력하는 것을 허용
- email 타입과 file 타입에서만 사용 가능
- pattern 속성
- 입력된 값을 검사하기 위한 정규 표현식을 명시
- text, password, email, tel, url 타입에서만 사용 가능
- placeholder 속성
- 입력되어야 할 값에 대한 힌트를 제공
- 해당 입력 필드에 포커스가 오면 더이상 표시 되지 않음.
- text, password, email, tel, url, search 타입에서만 사용 가능
- required 속성
- 반드시 입력되어야 할 필수 input 태그를 명시
- 해당 속성이 설정된 입력 필드값이 존재해야 서버로 전송 가능
- step 속성
- 입력할 수 있도록 허용된 숫자 간격을 명시
- number, range, date, time, datetime-local, month, week 타입에서만 사용 가능
- autocomplete 속성
select 태그
- 여러 개의 옵션이 드랍다운 리스트로 되어 있으며, 그중 하나의 옵션을 입력받을 수 있음.
- multiple 속성을 지정하면 여러개의 옵션을 선택할 수 있다.
- 형태
<select> <option value="1"> 1 <option value="2"> 2 <option value="3"> 3 <option value="4"> 4 </select>
1 2 3 4
textarea 태그
- 사용자로부터 여러 줄의 텍스트를 입력받을 수 있음.
- 형태
<textarea name="message" rows="5" cols="30"> 여기에 적으세요. </textarea>
button 태그
- 사용자가 누를 수 있는 버튼
- 형태
<button type="button" onclick="alert('클릭함!')"> 버튼 </button>
버튼
fieldset 태그
- form 태그와 관련된 데이터들을 하나로 묶어주는 역활
- legend 요소는 fieldset 태그의 제목
- 형태
<form action="/examples/media/request.php"> <fieldset> <legend>입력 양식</legend> 이름 : <br> <input type="text" name="username"><br> 이메일 : <br> <input type="text" name="email"><br><br> <input type="submit" value="전송"> </fieldset> </form>
HTML5에서 추가된 input 태그
- datalist 태그
- 미리 정의된 옵션 리스트를 명시해 주는 태그
- 사용자가 직접 입력해도되고, 드랍다운 메뉴에서 선택해도 됨.
- input 태그의 list 속성값이 datalist 태그의 id 속성값과 일치해야함.
- 형태
<form action="/examples/media/request.php"> <input list="datalist" name="datalist"> <datalist id="datalist"> <option value="1"> <option value="2"> <option value="3"> <option value="4"> </datalist> </form>
- keygen 태그
- 사용자가 인증할 수 있는 안전한 방법을 제공
- 사용자가 입력한 데이터를 암호화하여 서버로 전송
- 생성된 키를 가지고 서버는 해당 사용자의 인증을 수행
- 형태
<form action="/examples/media/request.php"> <input type="text" name="user"><br> <keygen name="keygen"><br> </form>
- output 태그
- 스크립트 등으로 실행된 계산의 결과를 바로 표시해주는 태그
- 형태
<form action="/examples/media/request.php" oninput="total.value=parseInt(value01.value)/parseInt(value02.value)"> <input type="number" id="value01" name="input01" value="20"> / ( 0 <input type="range" id="value02" name="input02" value="50" min="0" max="100"> 100 ) = <output name="total" for="value01 value02"></output><br><br> </form>
✏️ HTML5 멀티미디어
video 태그
- HTML5부터 <video>태그를 이용하여 웹페이지에 비디오를 삽입하는 표준화된 방식을 제공
- video 태그의 속성
- controls 속성
- 재생, 정지 및 소리 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널 생성
- autoplay 속성
- 웹 페이지가 로드될 때 비디오를 자동 재생 여부 설정
- loop 속성
- 비디오 재생이 끝나도 계속 반복해서 재생할지 여부 설정
- poster 속성
- 비디오가 아직 준비 중일때 불러올 이미지 파일 경로를 명시
- preload 속성
- 비디오가 재생하기 전에 파일의 내용을 모두 불러올지를 명시
- controls 속성
- <source> 태그
- 재생할 비디오 경로 및 재생 타입 설정하는 태그
- <track> 태그
- 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시
audio 태그
- 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공
- audio 태그 속성
- src 속성
- 오디오 파일의 경로를 명시
- controls 속성
- 오디오의 기본적인 동작을 조절할 수 있는 패널을 명시
- autoplay 속성
- 오디오의 자동 재생 여부 명시
- loop 속성
- 오디오의 반복 재생 여부 명시
- preload 속성
- 오디오를 재생하기 전에 파일의 내용을 모두 불러올지 명시
- src 속성
플러그인
- 웹 브라우저의 표준 기능을 확장해 주는 프로그램
- Java Applet, Flash Player, Pdf Reader 등이 있음
- object 태그
- HTML 문서에 삽입할 객체를 명시하는데 사용
- 웹 브라우저에서 동작, 객체뿐만아니라 또 다른 HTML 문서를 삽입할 수 있음
- 형태
<object data="경로"></object>
- embed 태그
- HTML 문서에 삽입할 객체를 명시하는데 사용
- 웹 브라우저에서 동작, 객체뿐만아니라 또 다른 HTML 문서를 삽입할 수 있음
- 형태
<embed src="경로">
✏️ HTML5 그래픽
Canvas 태그
- 웹 페이지에 그래픽을 그려주는 방법을 제공
- 그래픽을 위한 컨테이너 역할만 수행, 실제로 그리기 위해서 스크립트 언어를 이용
- 형태
<canvas id="이름" style="css코드"> 이 문장은 사용자의 웹 브라우저가 canvas요소를 지원하지 않을 때 나타납니다. </canvas> - canvas에서 사용하는 스크립트들
svg 태그
- 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해주는 태그
- 도표, 그래프 등 벡터 기반 다이어그램을 표현하는데 효과적
- 형태
<svg id="이름" style="css코드"> <도형태그 /> 이 문장은 사용자의 웹 브라우저가 canvas요소를 지원하지 않을 때 나타납니다. </svg> - 도형 태그 종류
- rect 태그 : 사각형
- line 태그 : 선
- circle 태그 : 원
- ellipse 태그 : 타원
- polygon 태그 : 다각형
- 도형 태그 상세 내용 사이트
✏️ HTML5 API
- Geolocation API : 사용자의 현재 위치 정보를 제공하는 API
- Drag and Drop API : 웹 페이지 내의 요소를 사용자가 자유롭게 드래그/드롭할 수 있도록 제공하는 API
- Web Storage API : 웹 브라우저가 직접 데이터를 저장하는 기능을 제공하는 API
- Application Cache API : 웹 응용 프로그램을 캐시하여, 인터넷 접속없이 사용자가 접근할 수 있게 해주는 기능을 제공하는 API
- Web Worker API : 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 기능을 제공하는 API
- Server Sent Events API : 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정하는 기능을 제공하는 API
참고사이트
프로그래밍 언어 공부 정리