accesskey 속성

2015.04.14 16:47에 씀

accesskey 속성은 사용자 에이전트에 의해 요소를 활성화시키거나 포커스를 갖게끔 하는 단축키를 생성하기 위한 가이드로 사용된다.


html5 와 이하버전 모두에서 사용가능하나, html5에서는 모든 요소에 사용가능하고, 

이전버전에서는 포커스가 필요한 요소들(<a>, <area>, <button>, <input>, <label>, <legend>, and <textarea>)에만 사용할 수 있다.


<a href="#travel_word" accesskey="1" title="브라우저에 따라 Alt + 1 또는 Alt + Shift + 1 또는 Shift + Esc + 1 후 Enter를 치시면 본문영역으로 바로갑니다." class="skip">본문 바로가기</a>

지구촌 스마트 여행사이트에서 가져옴

속성값은 유니코드값이면 되는데, 한자리수 숫자나 알파벳으로 작성하면 됨




'퍼블리싱 > HTML5' 카테고리의 다른 글

accesskey 속성  (0) 2015.04.14
disabled와 readonly 속성의 차이  (0) 2015.02.23
required 속성  (0) 2015.02.23
html5 새로운 요소들의 적절한 사용  (0) 2015.02.23
html5 규칙과 이전버전 규칙의 혼합  (0) 2015.02.23
HTML5 기본템플릿  (0) 2015.02.23
글쓰고 저장

disabled와 readonly 속성의 차이

2015.02.23 17:15에 씀

disabled 

  • fieldset에도 적용가능함
  • 일반적으로 disabled속성을 지닌 폼요소는 내용이 희미하게 표시됨. 그 텍스트는 활성화된 폼 컨트롤 값의 색상보다 연하다. 그리고 disabled 속성이 설정된 폼 컨트롤에는 포커스를 줄 수 없음. 
  • 이 속성은 모든 필드가 정확하게 채워지기 전까지 전송버튼이 비활성화돼 있게 하는데 자주 쓰임.
  • disabled 속성을 지닌 폼 컨트롤은 폼과 함께 전송되지 않음. 따라서 폼에 입력된 값은 서버쪽 폼 처리 코드에서 이용할수 없음. 
  • 편집할수는 없지만 볼 수 있고 전송도 가능한 값을 원한다면 readonly를 이용


readonly

  • disabled 속성과 유사함. disabled처럼 사용자가 해당 값을 수정할 수 없게 만듬.
  • 하지만, disabled와 달리 이 필드는 포커스를 받을 수도 있고, 해당 값이 폼과 함께 전송

- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!


'퍼블리싱 > HTML5' 카테고리의 다른 글

accesskey 속성  (0) 2015.04.14
disabled와 readonly 속성의 차이  (0) 2015.02.23
required 속성  (0) 2015.02.23
html5 새로운 요소들의 적절한 사용  (0) 2015.02.23
html5 규칙과 이전버전 규칙의 혼합  (0) 2015.02.23
HTML5 기본템플릿  (0) 2015.02.23
글쓰고 저장

required 속성

2015.02.23 16:58에 씀

required 논리속성은 해당 필드가 제대로 채워졌을 때만 폼을 전송하도록 브라우저에게 아려준다. 물론 이 속성은 필드가 빈 채로 남겨져서는 안된다는 것을 의미하지만, 이것은 또한 어느 속성이나 필드의 타입에 따라 특정 종류의 값만 허용된다는 의미이기도 하다. 


필수 필드가 비어 있거나 유효하지 않다면 그 폼은 전송되지 않으며, 유효하지 않은 첫번째 요소로 포커스가 옮겨간다. 오페라, 파폭, 크롬에서는 사용자에게 오류 메시지를 제공한다. 


required속성은 일반적으로 디폴트 값이 지정된 button, range, color, hidden을 제외한 어떤 input타입에서도 설정할 수 있다.

<input type"text" id="regi-name" name="name" required aria-required="true"

접근성을 향상시키고자 required속성이 포함될때마다 aria속성 aria-required="true"를 추가한다. 많은 스크린 리더가 새로운 html5 속성에 대한 지원이 부족한 반면 wai-aria 기능은 지원하고 있다. 그러므로 이 기능을 추가함으로써 사용자에게 해당 필드가 필수라는 사실을 알릴 수 있는 가능성이 높아진다.


** 스타일적용

:required - 필수 폼요소일 경우

:valid - 유효한 필드

:invalid - 유효하지않은 필드


input:required {background-image:url(...);}
input:focus:valid {background-image:url(...);}
input:focus:invalid {background-image:url(...);}


* 파폭 4.0에서는유효하지않은요소에 자체적으로 스타일을 적용하니 미리 다음처럼 리셋을 해놓자 :invalid {box-shadow:none;}

* 하위버전에서는 input:required대신 input[required] 속성선택기를 이용하여 적용하면 됨


- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!




'퍼블리싱 > HTML5' 카테고리의 다른 글

accesskey 속성  (0) 2015.04.14
disabled와 readonly 속성의 차이  (0) 2015.02.23
required 속성  (0) 2015.02.23
html5 새로운 요소들의 적절한 사용  (0) 2015.02.23
html5 규칙과 이전버전 규칙의 혼합  (0) 2015.02.23
HTML5 기본템플릿  (0) 2015.02.23
글쓰고 저장
<header>
  • 소개와 내비게이션에 도움이 되는 것의 모임
  • 대개 <div id="header">의 안에 포함시키던 내용
  • 페이지당 한번만 사용해야한다는 제한이 없다. 대신, 콘텐츠의 각 섹션을 소개하기 위해 새로운 header요소를 포함시킬수있다.
  • 위치와 무관함



<section>

  • 문서나 애플리케이션의 일반적인 섹션을 나타낸다. 여기서 섹션은 전형적으로 제목을 가지고 있으면서 한 가지 주제와 관련된 콘텐츠의 모임을 의미한다.
  • 단지 스타일링이나 스크립팅 목적만을 위한 컨테이너로 사용하면 안됨, 이럴땐 div를 쓰면됨
  • section안에 여러개의 section이 들어갈수있다. 중첩가능
  • section은 일반적이다. 그러므로 좀 더 구체적인 의미적 요소(article, aside, nav같은)가 적절하다면 대신 그것을 사용한다.
  • section에는 의미적인 의미가 있다. 이것은 section이 포함하고 있는 콘텐츠가 어떤 식으로든 서로 관련이 있다는 사실을 암시한다. 하나의 section에 넣으려고 하는 모든 콘텐츠를 단지 몇 단어로 간결하게 설명할 수 없다면 평범한 div같이 의미적으로 중립적인 컨테이너가 필요하다고 볼 수 있다.

<article>
  • 문서, 페이지, 애플리케이션, 사이트내의 자립적인 글을 나타내며, 이론상 독립적으로 배포하거나 재사용할 수 있다.
  • 블로그의 글, 게시판의 글, 기사 같은 것
  • article안에 여러개의 article이 들어갈수있다. 또한 section을 article안에 감쌀 수도 있고 그 반대도 가능


<nav>
  • 다른 페이지나 동일 페이지 내에서 이동할 수 있게 해주는 내비게이션 링크의 그룹이다
  • 어떤 경우든 nav요소는 핵심적인 내비게이션을 하는데 사용해야 한다. 그러므로 예를 들어 footer내에 있는링크로 구성된 짧은 목록에 nav를 사용하는 것은 자제해야 한다.


<aside>
  • 요소 주변의 콘텐츠와 거의 관계가 없고 심지어 그 콘텐츠에서 분리됐다고 여겨질 수 있는 페이지의 일부를 표시한다.
  • 사이브바, 보조 링크 리스트, 광고블록 등


<footer>
  • header처럼 한 페이지에 여러개의 footer가 있을수있음
  • 보통 저작권 정보, 관련링크목록, 저자 정보 그리고 일반적으로 콘텐츠블록이 마지막에 올 것으로 예상할수 있는 콘텐츠를 포함함
  • 위치와 무관함, 순서상 맨 위에 있어도 footer에 들어가는 내용이면 footer임

- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!



글쓰고 저장
  • XHTML에서처럼 모든 요소와 속성에서 소문자를 사용한다.
  • 닫는 태그가 필요하지 않는 요소도 일부있지만 콘텐츠가 포함된 모든 요소를 닫아주길 권장한다.
  • 물론 속성값에 따옴표를 하지않은채로 둘 수도 있겠지만 따옴표가 필요한 속성을 이용하게될 가능성이 매우 높으므로 일관성을 위해 항상 따옴표를 사용하길 권장한다.
  • (img, input, meta와 같이)콘텐츠가 없는 요소에서는 뒤에 붙는 사선을 생략한다.
  • 논리속성에 대해 중복값을 제공하지않는다. (input에서 checked="checked" 가 아닌 checked만!)

- 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다!


글쓰고 저장