이제까지 배운 것
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
19. spellcheck
spellcheck는 요소의 맞춤법 검사 여부를 확인합니다.
브라우저에서 맞춤법 검사를 지원하는 경우에만 속성이 적용됨을 확인할 수 있습니다.
크롬은 브라우저의 맞춤법 검사를 지원하니, 크롬을 기준으로 설명드리겠습니다.
우선 html부터 작성해봅시다.
<div contenteditable spellcheck="true">hollo world</div>
<div <div contenteditable spellcheck="true">hello world</div>hollo worldhello world
그리고 주소창 옆에 점이 3개로 이루어진 메뉴버튼을 클릭하면 설정이 뜹니다. 클릭해 줍니다.
설정검색에서 "맞춤법"이라고 검색하면
맞춤법 검사 메뉴가 뜹니다. 메뉴에서 웹페이지에서 텍스트 입력 시 맞춤법 오류 확인을 켜 주세요.
그리고 html문서를 확인하면 아래와 같은 것을 확인할 수 있습니다.
위와 같이 맞춤법에 오류가 발생하면 붉은 밑줄이 쳐진 것을 확인할 수 있습니다.
21.tabindex속성
<input />
<input />
<input />
가장 위에 있는 input상자에서 tap키를 눌러보세요.
클릭된 표시가 밑으로 내려갑니다.
위에서 tap키를 눌러보면 아래로 마우스를 클릭하지 않더라도 내려가면서 클릭되어지는 현상이 나타납니다. 보통은 tap키를 누르면 아래로 내려가지지만, tapindex속성은 이를 바꾸게 만들 수 있습니다.
아래는 tapindex속성을 적용한 예시입니다.
<input tabindex="1" /><br>
<input tabindex="3" /><br>
<input tabindex="2" />
첫번째 input상자에서 tap키를 누르면 세번째 input상자로 내려갔다가 2번째 input상자로 들어가게 됩니다. 이처럼 tap키의 순서를 조정할 수 있는 것이 tapindex 속성입니다.
22. title 속성
동해물과 백두산이 마르고 닳도록
<div title="우리나라 애국가">동해물과 백두산이 마르고 닳도록</div>
위의 "동해물과 백두산이..."하는 부분에 오랫동안 마우스를 두고 있으면 작은 상자에 "우리나라 애국가"라는 문구가 뜰 것입니다.
이러한 것을 제어하는 것이 title속성입니다.
23. translate 속성
번역 시 번역이 되지 않는 부분을 지정하거나 번역이 되는 부분을 지정해주는 속성입니다.
translate="yes"로 선택된 요소는 현지어로 번역이 됩니다.
하지만, translate="no"로 선택된 요소는 번역이 되지 않습니다.
위에 코드처럼 보통은 영어로 된 고유명사들은 translate="no"로 선택하는 경우가 많습니다.
지금까지 배운 것
accesskeyautocapitalize
1) off(none)
2) on(sentences)
3) words
4) characters
classcontenteditabledata-*dirdraggablehiddenidinputmode- is
- itemid
- itemprop
- itemref
- itemscope
lang- part
- slot
spellcheckstyletabindextitletranslate
여전히 잘 모르는 전역속성들이 많습니다. 조금씩 공부하면서 위에 속성들에도 줄을 칠 날이 오길 바라겠습니다.
다음 주는 head요소의 하위요소로 다시 찾아오겠습니다.
