목차
2. HTML5.2(https://www.w3.org/TR/html52/)를 기준으로 전역 속성을 모두 찾아서 설명하시오.
1)accesskey
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
2)class
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
3)contenteditable
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
4)data-*
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
5)dir
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
6)draggable
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
7)hidden
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
8)id
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
9)lang
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
10)onclick
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
11)slot
12)spellcheck
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
12)style
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
13)tabindex
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
14)title
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
15)translate
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
16)xml:base
*참고문헌
1)accesskey
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
2)class
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
3)contenteditable
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
4)data-*
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
5)dir
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
6)draggable
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
7)hidden
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
8)id
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
9)lang
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
10)onclick
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
11)slot
12)spellcheck
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
12)style
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
13)tabindex
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
14)title
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
15)translate
①기능②사용방법③사용상 주의점④예제⑤예제의 예상결과와 기능의 구체적 설명
16)xml:base
*참고문헌
본문내용
다.
④예제
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행하면 투명 바탕의 사각형 박스에 ‘style속성 테스트’가 브라우저 화면 가운데 표시된다.
13)tabindex
①기능
요소가 Tab키를 통해 포커스 가능하거나 순차적 포커스 탐색을 사용해 도달할 수 있는지, 그리고 선택적으로 요소가 순차적 포커스 탐색 순서에 나타날 수 있는지를 제안한다.
②사용방법
tabindex의 속성값에는 정수가 올 수 있다. 속성값이 유효하면 포커스가 가능해진다. 속성값이 음수이면 순차적 포커스 탐색 순서에서 요소가 빠진다. 키보드로는 접근이 안 되지만 자바스크립트의 focus() 메서드를 통해 포커스를 부여할 수는 있다. 속성값이 0인 경우에는 순차 포커스 탐색으로 도달가능하며 그 순서는 문서의 소스 코드 순서에 따른다. 속성값으로 양수가 사용되면, 그 값에 따라 순차 포커스 탐색 순서가 결정된다. 양수의 크기가 작은 순서부터 포커싱된다.
③사용상 주의점
속성이 생략되면 브라우저가 정해놓은 디폴트가 적용된다. tabindex 속성으로 포커스가 가능한 요소는 일반적으로 마우스 이외의 활성화(예: 요소가 포커스가 있는 동안 Enter 키 누름)에 대한 응답으로 클릭 이벤트를 발생시키지 않는다.
④예제
second:
fourth:
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행한 후 tab 키를 계속 누르면, tabindex=\"2\"인 요소가 가장 먼저 포커싱되고, 다른 양수 값이 없으므로 이후에는 브라우저의 디폴트 순서로 포커싱된다. 이때 tabindex=\"0\" 요소는 소스코드 순서에 따라 세 번째로 포커싱된다.
tabindex=\"-1\"는 포커싱 되지 않지만, 자바스크립트에 의해 포커싱할 수는 있다.
14)title
①기능
요소에 대한 추가 정보를 tooltip(말풍선)으로 제공한다. 마우스 커서를 요소에 가져다 놓으면 속성값이 나타난다.
②사용방법
속성값으로 적당한 문자열을 입력한다. 속성이 사용되지 않으면 title속성이 사용되는 가장 가까운 조상 요소와 관련성을 가진다. 또한 속성값이 빈문자열이면 추가 정보가 없음을 의미한다.
③사용상 주의점
속성값에 줄바꿈 문자가 들어가면 툴팁이 2줄에 걸쳐 나타난다. 마우스가 아닌 터치 전용 장치와 키보드 등을 사용할 경우에는 지원되지 않는다. 또한 스크린 리더와 화면 돋보기 등 보조 기술의 사용 시에도 지원되지 않는 등의 접근성 문제가 있다.
④예제
보여요!\">말풍선이 두 줄로 보입니다.
마우스 커서를 여기에 놓으세요.
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행하고 마우스를 “마우스 커서를 여기에”문자열에 가져다 놓으면 font 요소에는 title 속성이 없으므로, 부모요소인 p에 있는 title 속성값, 즉 \"두 줄로 보여요!\"가 줄바꿈이 적용되어 두 줄에 걸쳐 나타난다.
15)translate
①기능
페이지가 지역화될 때 translate 속성이 사용된 요소의 Text 노드 자식과 번역 가능한 속성의 값에 대해 그 번역 여부를 지정한다. 이 속성을 사용하면 사람이나 컴퓨터 프로그래밍 이름 등의 고유명사처럼 번역이 불필요한 콘텐츠를 번역하지 못하게 할 수 있다.
②사용방법
열거형 속성으로 키워드로 빈문자열이나 yes가 오면 yes state, no가 오면 no state가 된다. 세 번째 상태인 inherit state는 missing value default와 the invalid value default를 의미한다. 각 요소는 translation mode를 가지고 있는데,
translate-enabled state와 no-translate state가 여기에 속한다. 이에 따라
translate속성이 사용되고 yes state이면 요소의 translation mode는
translate-enabled state가 된다. 또한 translate속성이 사용되고 no state이면 요소의 translation mode는 no-translate state가 된다. translate속성이 inherit state이거나 요소가 HTML 요소가 아니어서 translate속성이 없는 경우에는 요소의 translation mode는 부모 요소의 상태를 따른다. 최종적으로 요소가
translate-enabled state이면 페이지는 지역화되고, no-translate state이면 페이지는 지역화되지 않는다.
③사용상 주의점
번역 가능한 속성에는 abbr(th요소), alt(area·img·input 요소), content(meta 요소), placeholder(input·textarea 요소), title 등이 있다.
④예제
⑤예제의 예상결과와 기능의 구체적 설명
translate의 속성이 ‘no\'이므로 교과목명의 영어이름은 번역되지 않는다.
16)xml:base
XML 문서의 HTML 요소에 사용되므로 HTML 문서의 HTML 요소에 사용할 수 없다.
* 참고문헌
https://www.w3.org/TR/html52/
이관용(2017). HTML웹프로그래밍. 한국방송통신대학교출판문화원.
이관용(2018). HTML5. 한국방송통신대학교출판문화원.
http://blog.wystan.net/2008/05/03/css-conformance
④예제
style속성 테스트
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행하면 투명 바탕의 사각형 박스에 ‘style속성 테스트’가 브라우저 화면 가운데 표시된다.
13)tabindex
①기능
요소가 Tab키를 통해 포커스 가능하거나 순차적 포커스 탐색을 사용해 도달할 수 있는지, 그리고 선택적으로 요소가 순차적 포커스 탐색 순서에 나타날 수 있는지를 제안한다.
②사용방법
tabindex의 속성값에는 정수가 올 수 있다. 속성값이 유효하면 포커스가 가능해진다. 속성값이 음수이면 순차적 포커스 탐색 순서에서 요소가 빠진다. 키보드로는 접근이 안 되지만 자바스크립트의 focus() 메서드를 통해 포커스를 부여할 수는 있다. 속성값이 0인 경우에는 순차 포커스 탐색으로 도달가능하며 그 순서는 문서의 소스 코드 순서에 따른다. 속성값으로 양수가 사용되면, 그 값에 따라 순차 포커스 탐색 순서가 결정된다. 양수의 크기가 작은 순서부터 포커싱된다.
③사용상 주의점
속성이 생략되면 브라우저가 정해놓은 디폴트가 적용된다. tabindex 속성으로 포커스가 가능한 요소는 일반적으로 마우스 이외의 활성화(예: 요소가 포커스가 있는 동안 Enter 키 누름)에 대한 응답으로 클릭 이벤트를 발생시키지 않는다.
④예제
tabindex test
second:
third
No tab
no tab but focusable by javascript
fourth:
first
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행한 후 tab 키를 계속 누르면, tabindex=\"2\"인 요소가 가장 먼저 포커싱되고, 다른 양수 값이 없으므로 이후에는 브라우저의 디폴트 순서로 포커싱된다. 이때 tabindex=\"0\" 요소는 소스코드 순서에 따라 세 번째로 포커싱된다.
tabindex=\"-1\"는 포커싱 되지 않지만, 자바스크립트에 의해 포커싱할 수는 있다.
14)title
①기능
요소에 대한 추가 정보를 tooltip(말풍선)으로 제공한다. 마우스 커서를 요소에 가져다 놓으면 속성값이 나타난다.
②사용방법
속성값으로 적당한 문자열을 입력한다. 속성이 사용되지 않으면 title속성이 사용되는 가장 가까운 조상 요소와 관련성을 가진다. 또한 속성값이 빈문자열이면 추가 정보가 없음을 의미한다.
③사용상 주의점
속성값에 줄바꿈 문자가 들어가면 툴팁이 2줄에 걸쳐 나타난다. 마우스가 아닌 터치 전용 장치와 키보드 등을 사용할 경우에는 지원되지 않는다. 또한 스크린 리더와 화면 돋보기 등 보조 기술의 사용 시에도 지원되지 않는 등의 접근성 문제가 있다.
④예제
보여요!\">말풍선이 두 줄로 보입니다.
마우스 커서를 여기에 놓으세요.
⑤예제의 예상결과와 기능의 구체적 설명
예제를 실행하고 마우스를 “마우스 커서를 여기에”문자열에 가져다 놓으면 font 요소에는 title 속성이 없으므로, 부모요소인 p에 있는 title 속성값, 즉 \"두 줄로 보여요!\"가 줄바꿈이 적용되어 두 줄에 걸쳐 나타난다.
15)translate
①기능
페이지가 지역화될 때 translate 속성이 사용된 요소의 Text 노드 자식과 번역 가능한 속성의 값에 대해 그 번역 여부를 지정한다. 이 속성을 사용하면 사람이나 컴퓨터 프로그래밍 이름 등의 고유명사처럼 번역이 불필요한 콘텐츠를 번역하지 못하게 할 수 있다.
②사용방법
열거형 속성으로 키워드로 빈문자열이나 yes가 오면 yes state, no가 오면 no state가 된다. 세 번째 상태인 inherit state는 missing value default와 the invalid value default를 의미한다. 각 요소는 translation mode를 가지고 있는데,
translate-enabled state와 no-translate state가 여기에 속한다. 이에 따라
translate속성이 사용되고 yes state이면 요소의 translation mode는
translate-enabled state가 된다. 또한 translate속성이 사용되고 no state이면 요소의 translation mode는 no-translate state가 된다. translate속성이 inherit state이거나 요소가 HTML 요소가 아니어서 translate속성이 없는 경우에는 요소의 translation mode는 부모 요소의 상태를 따른다. 최종적으로 요소가
translate-enabled state이면 페이지는 지역화되고, no-translate state이면 페이지는 지역화되지 않는다.
③사용상 주의점
번역 가능한 속성에는 abbr(th요소), alt(area·img·input 요소), content(meta 요소), placeholder(input·textarea 요소), title 등이 있다.
④예제
교과목명은 HTML Web Programming입니다.
⑤예제의 예상결과와 기능의 구체적 설명
translate의 속성이 ‘no\'이므로 교과목명의 영어이름은 번역되지 않는다.
16)xml:base
XML 문서의 HTML 요소에 사용되므로 HTML 문서의 HTML 요소에 사용할 수 없다.
* 참고문헌
https://www.w3.org/TR/html52/
이관용(2017). HTML웹프로그래밍. 한국방송통신대학교출판문화원.
이관용(2018). HTML5. 한국방송통신대학교출판문화원.
http://blog.wystan.net/2008/05/03/css-conformance
소개글