input 태그 많은 control들이 추가.
- 날짜선택 (년-월-일)
<input type=“date” name=“이름” id=“아이디” class=“클래스” value=“다른 일자를 선택할 때“> 
- 날짜선택 (년-월)
<input type=“month” name=“이름” id=“아이디” class=“클래스” value=“다른 월을 선택할 때“> 
- 날짜선택 (년-월-일 시간)
<input type=“datetime-local” name=“이름” id=“아이디” class=“클래스” value=“다른 날짜 선택할 때“> 
- 시간
<input type=“time” name=“이름” id=“아이디” class=“클래스” value=“다른 시간을 선택할 때“> 
- 색
<input type=“color” name=“이름” id=“아이디” class=“클래스” value=“설정할 색“> 
- 전화번호
<input type=“tel” name=“이름” id=“아이디”> 
- 이메일
<input type=“email” name=“이름” id=“아이디”> 
- url
<input type=“url” name=“이름” id=“아이디”> 
- 범위설정
<input type=“range” name=“이름” id=“아이디” class=“클래스”min=“최저값” max=“최대값” value=“현재값”/>
meter
- 값을 시각적으로 보여줄 때
<meter name=“이름” id=“아이디” class=“클래스” min=“최저값” max=“최대값” value=“현재값”> meter태그를 지원하지 않는 브라우저에서 사용될 값 </meter>
media 재생 태그
-
동영상이나 음악을 재생할 때 사용하는 태그
- 동영상 : Codec이 있는 파일만 재생가능.(브라우저는 모든 동영상을 재생할 수 있다.)
-
HTML4.01까지는 < embed >태그로 동영상과 음악을 모두 재생했으나 HTML5부터는 동영상은 < video > , 음악은 < audio >로 구분하여 재생한다.
-
< embed >
- 사용법
<embed src="미디파일의 경로" width = "넓이" height = "높이" controller = "true"/>
- 사용법
-
audio
- 음악을 재생하기 위한 태그.
- 사용법
<audio src="음악파일의경로"controls="controls"> 당신의 브라우저는 이 태그를 지원하지 않습니다. </audio> - audio 태그는 지원하나 mp3를 지원하나 mp3를 지원하지 않는 브라우저.
<audio> <source src="음악파일의 경로"/> 처음 source에 있는 파일 a.mp3 <source src="음악파일의 경로"/> 처음 source에 있는 파일 a.mp3을 지원하지 않는 브라우저를 위해서 제공하는 source a.wave </audio>
-
video
- 동영상을 재생하기 위한 태그.
- 사용법
<video src="동영상파일의경로"controls="controls" width = "넓이" height = "높이" poster="thumbnail이미지"/> 당신의 브라우저는 이 태그를 지원하지 않습니다. </video> - video 태그는 지원하나 codec을 지원하지 않는 브라우저로 접속할 때.
<video controls="controls" width = "넓이" height = "높이" poster="thumbnail이미지"/> <source src="미디어파일의 경로"/> 처음 source에 있는 파일 a.mp4 <source src="미디어파일의 경로"/> 처음 source에 있는 파일 a.mp4을 지원하지 않는 브라우저를 위해서 제공하는 source a.avi </video>
특수문자
- 기능을 가진 문자
- 모든 Markup Language는 동일한 특수한 문자를 사용.(HTML,XML,,, 는 같은 특수문자를 사용)
- &가 시작 문자 ; 이 끝 문자
- 사용법 )
- &문자열;
- HTML은 <태그명 속성 = "값",,,>작성된다.
- < 뒤에는 공백없이 바로 태그명이 나와야 한다.
- > 앞에는 속성으로 인한 공백이 허용된다.문자 엔티티 이름 (이걸로 써도 됨) 코드 탭 (Tab) 	 	 새 줄 
 스페이스 (공백 한 칸)   ! ! " " " & & & < < < > > > © © ©
- 흘러가는 글자
- <marquee scrollamount=“글자속도” direction=“진행방향”> 글자</marquee>
글자
CSS(Cascading Style Sheet)
- 하콤 비움 리 (Hakon Wium Lie) 가 1994년에 제안한 Style Sheet언어
- 웹 디자이너가 주로 사용하는 Style Sheet언어
_ 웹 페이지에서 통일성있는 디자인을 제공할 때 사용. - CSS의 대표 FrameWork - Bootstrap
- 3가지 방법으로 사용할 수 있다.
- Inline
- Embed
- External File
- CSS는 에러가 발생하지 않는다.
- 문법 )
- 속성 : 값
- Web browser에서 동작
- web site : 일반 사용자 전용
- 별도의 사용자 교육 없이 사용 가능.
- 업무 로직이 복잡하지 않다. (주로 asp, php를 사용하여 개발 : web agency)
- web application : 기업에 일을 하는 현업
- 별도의 사용자 교육이 필요.
- site보다 개발 난이도가 높다. (SI개발자)
- web site : 일반 사용자 전용
inline 방식
- HTML Tag에 직접 정의하는 방식
- selector가 사용되지 않는다. (디자인을 적용받을 태그에 작성하기 때문에 selector사용 x)
- 장점 : 디자인 적용우선 순위가 가장 높다.
- 단점 : 디자인 코드 중복성이 가장 높다.
- 문법 )
<태그명 style="속성명:값" 작성해야함 >
embed 방식
- HTML 태그 사이에
- external file 방식보다 적용 우선순위가 높다.
- 디자인 코드의 중복성을 낮출 수 있다.
- selector를 사용한다.
- <style>태그가 선언된 HTML에서만 사용된다.
다른 페이지에서 디자인을 사용하고 싶다면 해당 페이지에서 디자인 코드를 다시 만들어야한다 . =< external file방식으로 해결가능 - 특정 페이지에서만 사용하게 되는 디자인을 정의할 때 사용.
- 디자인을 적용받을 태그를 정의.
- 디자인의 사용성을 고려하여 하나의 이름으로 묶는 것.
- 문법 )
<;style type="text/css" > 선택자 {속성 : 값 속성 : 값,,,,} </style> <!DOCTYPE> <html> <head> <title></title> <style type="text/css"> selector{속성 : 값,,,,} . . . </style> </head> <body> <태그,,,,> <태그,,,> </body> </html>
external file방식
- CSS코드를 확장자가 .css인 파일을 생성하고, 그안에 정의하는 방식
- 코드의 중복성이 가장 낮다.
- 디자인 적용의 우선순위가 가낭 낮다.(inline -> embed -> external file)
- selector를 사용하여 코드를 작성
- 로딩속도가 느리다.
- 여러 페이지에서 사용하는 공통 디자인을 정의할 때 가장 적합.
특정 페이지의 디자인을 정의해야하는 경우 embed 방식이 적합 - 사용법 )
@charset-"UTF-8"; selector{속성 : 값,,,}/*공통디자인 정의 */ a.css
