저번까지 배운 것
accesskeyautocapitalize
1) off(none)
2) on(sentences)
3) words
4) characters
classcontenteditable- data-*
dirdraggablehidden- id
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- lang
- part
- slot
- spellcheck
style- tabindex
- title
- translate
5. data-* 속성
이 속성은 자바스크립트와 연관된 속성이다.
예전에 data-* 속성이 없었을 때는 html태그를 이렇게 작성했었다.
<input type="text" name="name">
<input type="hidden" name="sex" value="female">
<input type="hidden" name="age" value="20">
위와 같이 작성을 해두면 form태그에서 보이지 않게 변수를 지정할 수 있었다.
하지만 현재는 type="hidden" 속성을 사용하지 않고, 아래와 같이 사용할 수 있다.
<input type="text" name="name" data-sex="female" data-age="20">
보다시피 훨씬 코드가 짧아졌다.
data-*의 사용법을 예시로 들자면 다음과 같다.
예전에 "쭉빵카페"라는 곳이 유행을 했는데, 전형적인 20대 여성들의 모임인 카페였다.
그러면 당연하게도 가입자들이 여자일테니, 변수를 위와 같이 지정해두는 것이다.
언젠가 자바스크립트에서 데이터의 중요성에 관해 다루게 될 텐데,(언제가 될지는 잘 모르겠지만) 이 자바스크립트에서 데이터를 바로 가지고 올 수 있게 되는 것이다. 그때, 자바스크립트의 코드는 아래와 같이 적으면 된다.
input.dataset.sex //"female" input.dataset.age //"20"
9. id속성
id속성은 유일하게 사용해야만 한다.
앞서서 class속성을 설명해 준 적이 있는데, class속성은 그룹으로 묶어서 사용해도 된다. 하지만 id속성을 그렇게 사용하면 절대 안된다.
id속성은 HTML내에서 유일해야만 한다.
그리고 CSS나 자바스크립트에서 class속성은 "."을 사용해서 표시하고,
id속성은 "#"을 사용해서 표시한다.
<div class="red">빨강</div>css, js(자바스크립트의 약어)에서 사용 위 블록을 선택할 때,
.red{... }로 표시
<div id="yellow">노랑</div>css, js(자바스크립트의 약어)에서 사용 위 블록을 선택할 때,
#yellow{... }로 표시
10. inputmode 속성
이것도 가상키보드에 관련된 속성이다. 가상키보드의 모양의 변경이 가능한데, 정말 잘 정리되어 있는 블로그 글이 있으니, 그것을 보는 것이 더 나을 것 같다.
16. lang 속성
html을 시작한다면 가장 먼저 발견하는 속성이다. 처음 html을 시작할 때, 기본적으로 뜨는 코드에
<html lang="en">으로 뜨는 것을 발견할 수 있을 것이다. 그리고 우리는 이것을 <html lang="ko">로 바꿔주라는 말을 가장 많이 들을 것이다.
lang은 언어 지정 속성이라고 한다. 그리고 lang이 전역속성인 이유는 body태그 안 개별 요소에서 다른 언어를 사용할 때, 해당 요소에 별도로 적용하기 위해서라고 한다.
참조 사이트 링크
예시)<span lang="ja">初めまして。</span>初めまして。
가끔 아래와 같이 적힌 경우도 확인할 수 있다.
<html lang="en-US">
lang="(언어코드)-(국가코드)"이다.
언어코드는 소문자로,
국가코드는 대문자로 작성한다.
미국같이 큰 지역에서 한인 사이트를 운영할 때, 아래와 같은 코드를 찾아볼 수 있을 지도 모른다.
(필자도 궁금해서 찾아봤지만, 찾지 못했다. 혹시 아는 사이트가 있다면 댓글을 달아주시기를 바란다.)
<html lang="ko-US">
오늘까지 배운 것
accesskeyautocapitalize
1) off(none)
2) on(sentences)
3) words
4) characters
classcontenteditabledata-*dirdraggablehiddenidinputmode- is
- itemid
- itemprop
- itemref
- itemscope
lang- part
- slot
- spellcheck
style- tabindex
- title
- translate
