Html&CSS/html5&css3
0226_html5_ruby, datalist, form요소들, 의미가 변경된 태그들
.Epona.
2020. 2. 26. 19:11
[ruby]
잘 쓰지는 않음, 예: 한글 이름 위에 작게 한자 이름, 모든 브라우저에서 지원됨
차승미
[datalist]
datalist는 ie10부터 지원, 앱을 할땐 갠쥰
[form]
-추가된 form요소만 확인하겠오용,
-form요소들은 ie지원 안되는 태그들이 많오용, 그러니 모바일 에서 사용할 땐 괜찮음
[ 태그 의미가 변경된 요소들 ]
>html4에서 잘 사용안하던 태그들을 사용하게끔 하기 위해 의미 변경된 것들도 있음
1) a 태그 사용법
2)강조하는 태그 사용 구분
강조, 중요하다 표현할 때 사용 강조, 중요하다 표현할 때 사용
강조할 때만 사용 중요하다를 표현할 때 사용
3)small 태그: 작은 글씨
작은 글씨
작은 주석, 세목, 면책사항, 경고, 법적 제약, 저작권 표시할 때 사용하라
예: copyright©2020~
4) s 태그: 취소선
취소선
정확하지 않거나, 관련성이 적다는 것을 표현할 때 사용
5)cite 태그 :인용문
인용문
짧은글 인용
긴글을 인용할 때
인용하는 작품의 제목 (인명, 인용문장은 사용안됨)
6) i 태그 : 기울임 글꼴
기울임글꼴
목소리, 감정, 학명, 전문용어, 본문과 다른 언어 표기, 사고(사람의 사고), 배(타고다니는 배) 표현 시
7) b 태그: 굵은 폰트
굵은 폰트
다른 문장과 구별 되는 것(키워드, 제품명, 기사 리드문 등 )
8) u 태그: 밑줄
밑줄
본문 표기와 다른 형태 일때
코드보기 [더보기] 선택
더보기
<h3>[ruby]</h3>
<h4>잘 쓰지는 않음, 예: 한글 이름 위에 작게 한자 이름, 모든 브라우저에서 지원됨</h4>
<ruby>
차승미<rt>車承美</rt>
</ruby>
<h3>[datalist]</h3>
<h4>datalist는 ie10부터 지원, 앱을 할땐 갠쥰</h4>
<form action="" method="get" name=""> <!--html5에서는 / 안해도 됨-->
<input list="browsers" name="browsers">
<datalist id="browsers"> <!--input list명과 datalist id명이 같아야 함 -->
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
</datalist>
</form>
<h3>[form]</h3>
<h4>추가된 form요소만 확인하겠오용,<br/>
form요소들은 ie지원 안되는 태그들이 많오용, 그러니 모바일 에서 사용할 땐 괜찮음 </h4>
<form method="post" name="" action="#">
-검색창:
<input type="search" name="" /> <!--input type="search" 뒤는 같음-->
을 만들 때, ie10부터 지원: input type=text와 화면상으로 보여지는 것은 같음
<br/>
-전화번호: <input type="tel" name=""/>
::only사파리 브라우저만 지원
<br/>
-홈페이지:<input type="url" name="" value="http://"/> ::홈페이지 주소를 넣을때 사용, ie10부터 지원, value에 넣은 값이 입력창에 표시됨
<br/>
-이메일: <input type="email" name=""/> ::ie10부터 지원
<br/>
-희망수강 '월'까지 노출: <input type="month" name="m"> ::ie12부터 지원, 파이어폭스/사파리 지원 안됨
<br/>
-희망수강 '일'까지 노출:<input type="date" name="d"> ::ie12부터 지원, 파이어폭스/사파리 지원 안됨
<br/>
-희망 시간: <input type="time" name="t">::ie12부터 지원, 파이어폭스/사파리 지원 안됨
<br/>
-희망 주: <input type="week" name="w">::ie12부터 지원, 파이어폭스/사파리 지원 안됨
<br/>
-신청 갯수: <input type="number" name="n" min="5" max="30" step="2" /> :: 모든 브라우저 지원
>>2씩 증가하는 콤보 박스, 숫자 선택' 입력 가능
<br/>
-색상 선택 버튼 : <input type="color" name="c"/> ::ie38부터 지원(예정)
<br/>
-나의 수준: <input type="range" name="r" min="0" max="10"> ::ie10부터 지원 (스크립트, 뷰, 앵귤러 등으로 값 뿌려지게 할 수 있음)
</form>
<br/>
<br/>
<h3>[ 태그 의미가 변경된 요소들 ]</h3>
<h5> >html4에서 잘 사용안하던 태그들을 사용하게끔 하기 위해 의미 변경된 것들도 있음</h5>
<h4>1) a 태그 사용법 </h4>
<!--html4-->
<div>
<a href="#">html4는 블록요소 안에서 링크해야만 했음</a>
</div>
<!--html5-->
<a href="#">
<div>html5에서는 a 라는 인라인 요소가 블록 요소를 포함할 수 있다.(a 태그 만 가능)</div>
</a>
<h4>2)강조하는 태그 사용 구분 </h4>
<!--html4-->
<em>강조, 중요하다 표현할 때 사용</em> <strong>강조, 중요하다 표현할 때 사용</strong>
<br/>
<!--html5-->
<em> 강조할 때만 사용 </em> <strong>중요하다를 표현할 때 사용 </strong>
<br/>
<br/>
<h4>3)small 태그: 작은 글씨 </h4>
<!--html4-->
<small>작은 글씨</small><br/>
<!--html5-->
<small>작은 주석, 세목, 면책사항, 경고, 법적 제약, 저작권 표시할 때 사용하라</small>
<p><smail>예: copyright©2020~</smail></p>
<h4>4) s 태그: 취소선 </h4>
<!--html4-->
<s>취소선</s> <br/>
<!--html5-->
<s>정확하지 않거나, 관련성이 적다는 것을 표현할 때 사용</s>
<br/>
<h4>5)cite 태그 :인용문 </h4>
<!--html4-->
<cite>인용문</cite><br/>
<q>짧은글 인용</q>
<blockquote>긴글을 인용할 때</blockquote>
<!--html5-->
<cite>인용하는 작품의 제목 (인명, 인용문장은 사용안됨)</cite>
<h4>6) i 태그 : 기울임 글꼴</h4>
<!--html4-->
<i>기울임글꼴</i><br/>
<!--html5-->
<i>목소리, 감정, 학명, 전문용어, 본문과 다른 언어 표기, 사고(사람의 사고), 배(타고다니는 배) 표현 시</i>
<h4>7) b 태그: 굵은 폰트</h4>
<!--html4-->
<b>굵은 폰트</b><br/>
<!--html5-->
<b>다른 문장과 구별 되는 것(키워드, 제품명, 기사 리드문 등 )</b>
<h4>8) u 태그: 밑줄</h4>
<!--html4-->
<u>밑줄</u><br/>
<!--html5-->
<u>본문 표기와 다른 형태 일때</u>
</body>