HTML, CSS
-
웹 접근성 tabindex 속성 :: 마이구미HTML, CSS 2016. 8. 18. 18:17
이번 글은 tabindex 속성에 대한 웹 접근성에 대해 알아볼 것이다.참고 자료 - http://nuli.navercorp.com/sharing/blog/post/1132726tabindex 를 활용한 하나의 테크닉 - https://mygumi.tistory.com/372 tabindex 속성은 키보드 접근성에 근접한 속성이다. 키보드 접근성이란, 말 그대로 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것이다. 스크린 리더를 쓰지 않더라도, 흔히 우리도 주로 탭이나 엔터를 통해 사용하고 있다. 자 그렇다면, tabindex 란 무엇일까? 어떤 엘리먼트에 키보드 포커스를 주는 가장 흔한 방법으로 사용된다. 크게 3가지 속성값을 이용할 수 있다. 0 값 - tabindex="0" 양수..
-
웹 접근성 html lang 속성 :: 마이구미HTML, CSS 2016. 8. 16. 16:32
이번 글은 html lang 속성에 대해 알아볼 것이다. 다들 lang 속성이 무엇을 뜻하는 지는 짐작할 것이다. 단순히 언어 지정하는 것이 아닌가?맞다. 하지만 단순히 이렇게만 알고 있으면 안된다. 기본적으로 위와 같이 셋팅하여 사용한다. ko... 뭐 코리아네.. 대수롭지 않게 생각했을 것으로 예상한다. 그래도 왜 쓰는지 정확히 알고 가야하지 않겠나? 쉬운 내용이니 한번 읽어보길 바란다. lang 속성은 웹 접근성에 관한 내용이다. 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지의 head 요소 안에 페이지의 기본 언어 선언을 규정하고 있습니다. 지침을 보다시피 필히 명시되줘야한다. 그렇다면 왜 명시해줘야하는가? 화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변..
-
이미지 롤링 [transition] :: 마이구미HTML, CSS 2016. 8. 1. 16:05
이번 글은 css를 통해 이미지 롤링을 만들어 볼 것이다. 이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다. 예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다. 샘플 페이지 페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다. 페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다. css의 transition를 이용하면 해결된다. 일단 html 소스를 보자. span 태그안에 img 태그가 있다. 여기서 기억할 것은, 처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다. 자 기억했다면, css 소스를 보자. /*처음 로딩시*/ .dissolve {..
-
웹 페이지 <!DOCTYPE> :: 마이구미HTML, CSS 2016. 7. 28. 23:25
이번글은 HTML5 에 대해서 알아볼 것이다. html 파일은 보거나 개발자 도구를 통해 확인해보면, 맨 위에 선언되어 있는 이라는 녀석을 보았을 것이다. 그냥 쓰라니까 쓰는 사람도 있을 것이고, 안 쓰는 사람도 있을 것이다. 저건 무슨 태그일까? 생각해보았는가? 이 글은 본다면 생각했기 때문에 보았으리라 생각한다. 대부분 아래와 기본 틀로 이용한다. The content of the document...... 어김없이 이라는 녀석이 맨 위에 선언 되어있다. 일단, 이 녀석은 태그 같이 생겼지만 태그는 아니다. HTML 버전에 대해 웹 브라우저에게 알려주는 지침, 명령어 같은 의미이다. 무조건 태그위에 선언되어야한다. 왜 알려줘야하는가? 존재하는 브라우저는 너무나 많다. 브라우저마다 HTML 해석하는 방..
-
[웹표준] Table 태그에 대해 알아보자 :: 마이구미HTML, CSS 2016. 7. 22. 13:43
이번 글은 table에 관련된 웹 표준 및 접근성에 대해 알아볼 것이다. 이 글 이후부터 웹 표준 및 접근성에 대한 글을 다룰 예정이다. 웹 개발에서 있어서 웹 표준 및 접근성이 중요하다. 간단히 말하자면, 웹 표준은 어떤 브라우저에도 동일하게 보여져야한다. 웹 접근성은 어떤 사용자나 환경에서도 정보에 대한 접근과 이해가 보장되어야한다. (장애인들을 위함이다.) 본인은 크로스 브라우저만 고려하여 기능적인 부분만 잘 돌아가는 지만 항상 확인했다. 하지만 그건 나 스스로 웹 개발자라고 하기엔 부끄러운 생각이었다. (반성반성) 중요하다. 지금부터라도 잘 준수하자. 본론으로 넘어가자. table 태그는 가급적으로 쓰지말고 div로 처리할 수 있으면 하는 게 좋다. 하지만 테이블 구조가 필요하다면 억지로 div로..
-
map태그 사용법과 주의사항을 알아보자 :: 마이구미HTML, CSS 2016. 7. 21. 20:19
이번 글은 map 태그에 대해 알아볼 것이다.요즘 지식인활동을 가끔하고 있어서 지식인을 통해 글을 쓸 주제거리가 생겨난다.아는대로 최선을 다해 하나하나 알려주는 착한 지식인이다.1:1 질문해주면 아는 한 알려주도록 노력하겠다. 지식인 질문에 올라온 내용은 이렇다.a태그를 사용하여 특정 위치로 이동하게 한다. PC에서는 잘 되는데, 모바일에서는 a태그를 활용한 이동이 안된다는 질문이었다. a태그는 모두가 잘 알고 있을 것이고, 많이 사용하는 태그이다.새로운 페이지를 열거나 이동하고 싶을 때 또는 내부에서 특정 위치로 이동하고 싶거나 할 때 사용한다.굳이 예를 들자면, 누르면 저기로 이동하자 여기로 이동 a태그를 누르면 '여기로 이동' 텍스트가 있는 div영역으로 이동한다. 자, 이제 map 태그에 대해 알..