HTML : 새로운 HTML5 속성 사용 방법 : 예제, 구현

HTML : 새로운 HTML5 속성 사용 방법 : 예제, 구현

 

HTML5 속성에 placeholder와 같이 HTML5와 함께 제공되는 많은 추가 기능이 있으며 필수 기능입니다.

 

 

Hidden 속성

Hidden 속성은 이 속성이 있는 요소를 숨기는 모든 요소에 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

display: none;

 

 

차이점은 디스플레이로 요소를 스타일링하는 것보다 요소에 숨겨진 속성을 배치하는 것이 더 의미가 있다는 것입니다. 

<input type=text name=hidden_field hidden />

 

 

브라우저가 HTML5 Hidden 속성을 지원하지 않으면 CSS 파일에서 대체해서 사용할 수 있습니다.

*[hidden] { display: none; }

 

 

 

Spellcheck 속성

맞춤법 검사 속성은 사용자가 텍스트 상자나 텍스트 영역 안에 입력한 텍스트의 클라이언트 쪽 맞춤법 검사를 수행합니다. 현재 맞춤법 검사는 다음에서 지원됩니다.

• Firefox 3
• Opera 9 
• Safari 3
• Chrome

 

 

spellcheck 속성의 값은 true 또는 false 일 수 있습니다. 값을 true로 설정하면 기본 브라우저 맞춤법 검사기가 사용되며, false로 설정하면 기본 브라우저 맞춤법 검사기가 꺼집니다.

<textarea spellcheck="true"></textarea>
<textarea spellcheck="false"></textarea>

 

 

 

Download 속성

다운로드 속성은 링크에서 사용되어 다운로드되는 파일의 이름을 정의 할 수 있습니다. 이것은 끝에 쿼리 문자열이있는 데이터 소스의 파일이 있는 경우 사용자가 이미지를 다운로드 할 때 이미지를 보다 사용자 친화적인 이름으로 지정할 수 있도록 다운로드 속성을 링크에 할당 할 수 있습니다.

<a href="download-text.txt?date=1234567890" download="download-name.jpg" class="download-button">Download Button</a>

 

 

download-text.txt에서 볼 수 있듯이 쿼리 문자열이 있으며 다운로드 할 때 파일 이름에 추가됩니다. 그러나 다운로드 속성을 추가하면 파일 이름이 다운로드 속성의 값으로 저장됩니다. 또한 다운로드 속성은 파일을 다운로드하는 데 사용되도록이 링크를 정의합니다.

 

 

 

 

Draggable 속성

HTML5 드래그 가능 속성은 요소를 브라우저에서 드래그 가능하게 하기 위해 제공하는 값입니다. 페이지에 입력 유형의 파일이 있고 이미지를 업로드 입력으로 끌 수 있는 경우 이미지를 포함한 여러 요소에 추가 할 수 있습니다.

draggable 속성의 값은 true 또는 false 일 수 있습니다. 기본값은 false이므로 요소를 끌 수있는 기능을 해제 할 때만 이 값을 사용해야합니다. 

<div class="draggable-area" draggable="true">
    <p>Drag A this text</p>     
</div>

<div class="draggable-area" draggable="true">
    <p>Drag B this text</p>     
</div>

<div class="draggable-area" draggable="true">
    <p>Drag C this text</p>     
</div>