'분류 전체보기'에 해당되는 글 151건

  1. 2017.03.02 모바일 해상도 정리
  2. 2016.06.24 w3c 한글번역
  3. 2016.06.08 css calc 함수
  4. 2016.06.08 윈도우10 엣지브라우저 전화번호 형태 링크없앰
  5. 2016.06.02 on/off 버튼
  6. 2015.12.29 모바일 해상도 테스트
  7. 2015.08.21 레이블과 타이틀, 새창
  8. 2015.07.22 css 무료 벡터 아이콘
  9. 2015.07.14 jquery 플러그인
  10. 2015.07.14 디바이스별 해상도

모바일 해상도 정리

모바일 2017. 3. 2. 17:51

http://www.gguldesign.com/index.html

 

http://screensiz.es/phone

'모바일' 카테고리의 다른 글

모바일 해상도 테스트  (0) 2015.12.29
디바이스별 해상도  (0) 2015.07.14
화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
:

w3c 한글번역

카테고리 없음 2016. 6. 24. 16:16

W3C 한글 번역문

 

http://trio.co.kr/webrefer/xml/xmlidx.html

 

 

 

 

html5

http://html5.clearboth.org/spec

 

 

 

:

css calc 함수

CSS 2016. 6. 8. 16:48

http://techbug.tistory.com/215

 

http://cafe.naver.com/hacosa/94427

 

 

div
{
    width: calc( 100% - 2.5em );
    background-position: calc( 50% + 50px );
    margin: calc( 1.25rem - 5px );
}

'CSS' 카테고리의 다른 글

css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
:

윈도우10 엣지브라우저 전화번호 형태 링크없앰

크로스브라우징 2016. 6. 8. 10:46

이번 프로젝트에서 윈10 엣지에서 발생한 전화번호 형태의 링크속성 없애는 법.

메타태그는 삽입 했는데 적용되는지는 확인하지 못함.

 

 

 

<meta name="format-detection" content="telephone=no"/>

[출처] 윈도우 엣지에서 전화번호 형태에 링크걸리는데 없애는방법아시나요?  (하드코딩하는사람들) |작성자 아이고오

 

'크로스브라우징' 카테고리의 다른 글

ie6 이상한아이 발견~!  (0) 2012.09.06
ie6 주소창고정프레임셋 백그라운드 버그  (0) 2011.12.01
ie6/ie7 border-collapse 문제  (0) 2011.11.23
익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
:

on/off 버튼

HTML 2016. 6. 2. 15:23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style>
  * {box-sizing:border-box}
  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;   
  }

  
  
  input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 52px;
    height: 21px;
    background-color:#b3b3b3;
    border-radius:13px;
    transition: background 0.4s;
  }
  
  
  input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute; 
    content: "";
  }
  input.cmn-toggle-round-flat + label:after {
    top: 2px;
    left: 2px;
    bottom: 4px;
    width: 17px;
    height:17px;
    background-color: #fff;
    border-radius:50%;
    transition: margin 0.4s, background 0.4s;
   
  }
  /*
  input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color:#b3b3b3;
    border-radius:50%;
    transition: background 0.4s;  
  }
  
  */
  input.cmn-toggle-round-flat:checked + label {
    background-color: #f52969;   
  }
  input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 32px;
    background-color: #fff;
  }

  input.cmn-toggle + label span:after {font-size:13px; font-weight:500; color:#fff}

  input.cmn-toggle + label span:after {display:block; content:"OFF"; position:absolute; top:1px; right:7px }
  input.cmn-toggle:checked + label span:after {display:block; content:"ON"; position:absolute; top:1px; left:10px}
   
 </style>
</head>
<body>
 

 <div class="switch">
   <input id="toggle" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
   <label for="toggle"><span></span></label>
 </div>

 
</body>
</html>

 

'HTML' 카테고리의 다른 글

반응형 웹디자인 참고  (0) 2012.05.23
브라우저 창 늘림/줄임시 이미지/width값 밀림 현상  (1) 2011.09.30
dl, dt, dd 요소  (0) 2011.07.08
비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
:

모바일 해상도 테스트

모바일 2015. 12. 29. 15:22

모바일 해상도 테스트

 

http://troy.labs.daum.net/

'모바일' 카테고리의 다른 글

모바일 해상도 정리  (0) 2017.03.02
디바이스별 해상도  (0) 2015.07.14
화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
:

레이블과 타이틀, 새창

웹표준/접근성 2015. 8. 21. 09:44

원본 : https://www.wah.or.kr:444/Participation/consultingView.asp?cType=&seq=9207&page=1?cType=&FindTxt=타이틀&cMail=

[질문]

안녕하세요.

1) 레이블 제공에 대해 문의드립니다.
입력서식에는 레이블을 제공하도록 되어 있는데 타이틀을 제공하는 것과 비교한다면 사용자 입장에서 어떤 차이가 있는지 알고 싶습니다.
접근성 보조도구로 입력서식에 접근하면 똑같이 읽어주는 것 같습니다.

2) 새 창에 대해 target을 blank로 지정해 놓으면 접근성 보조도구에서 정상적으로 새창이라고 리딩해 주는 것으로 알고 있습니다. 지침에 따라 title 속성을 써서 새 창 알림 정보를 제공하면 중복해서 읽어주게 되는데요..그래도 입력해 주는 것이 좋다면 어떤 면에서 도움이 되는지 알고 싶습니다.

감사합니다.




[답변]

안녕하세요.

1) 레이블 제공 방법에 대해 안내해 드립니다.

입력서식을 이해할 수 있는 1:1 대응하는 레이블을 제공하여야 합니다.
문의 주신 것처럼 <label>요소를 연결하여 제공하는 방법과 title 속성을 이용하여 제공하는 방법이 있습니다.

레이블을 연결할 텍스트가 있다면 <label>요소로 제공하는 것이 권장됩니다.
<label> 요소를 제공하지 않은 경우에는 체크박스나 라디오버튼을 직접 클릭해야만, 텍스트와 입력서식이 1:1로 연결하면 <label>요소내 텍스트를 클릭하면 입력서식도 체크됩니다.
이는 정밀하게 선택이 어려운 사용자에게 많은 도움이 됩니다. 이러한 경우 <label>요소로 제공하는 것이 바람직합니다.

우편번호나, 전화번호처럼 여러개의 입력서식을 받아야 하는 경우처럼 레이블으로 연결할만한 텍스트가 화면상에 제공되지 않거나, 시각적으로 보이지 않는 경우 처럼 레이블이 1:1으로 대응하기 어려운 경우에는 title 속성을 이용하여 제공하는 것이 바람직합니다.

국내에서 가장 많이 사용되는 센스리더의 경우, <label> 요소나 title 속성 중 하나만 제공되면 편집창 접근시 레이블을 읽어줍니다. 단, <label> 요소와 title 속성을 같이 사용한 경우, <label>요소이 우선권을 같습니다.

<label> 요소와 title 속성을 용도나 상황에 맞게 고려하여 레이블을 제공하는 것이 권장됩니다.

2) 새창 열림 미리 알림 방법에 대해 안내해 드립니다.

새창 페이지를 제공할 때는 target="_blank" 속성을 제공하는 것이 바람직합니다.
_blank로 제공하면 센스리더를 포함한 대부분의 스크린리더는 새창을 미리 알려줍니다.
예) 센스리더
(링크텍스트) 새창 링크, (이미지 alt) 새창 그래픽 링크

window.open 메소드를 이용하여 새창을 여는 방법과 같이 스크립트를 통해 새창 페이지를 여는 경우, title 속성으로 새창을 미리 알리는 방법이 권장되고 있습니다. 이는 스크립트로 열리는 경우, 새창여부를 알 수 없기 때문입니다.

title 속성으로 새창을 알리는 경우, 스크린리더에 따라 옵션을 켜야만 듣게되거나, 읽어주지 않을 수 있습니다.
그러므로 특별한 경우가 아니라면 target속성을 통해 새창을 미리 알수 있도록 합니다. 즉, target 속성으로 제공하는 것이 보조기기 환경과 관계없이 새창임을 구분할수 있으므로 사용자 입장에서 더 도움이됩니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

즉

1) 기본은 label 과 폼 요소 연결, 레이블에 여러개의 폼요소가 연결되거나 시각적으로 보이지 않을 경우 title 사용

2) 새창은 기본적으로 target="_blank" 로 사용. window.open 시 title을 사용하나 이는 기기에 따라 옵션 설정이 있을수 있으므로 비권장

 

 

'웹표준/접근성' 카테고리의 다른 글

접근성 툴  (0) 2015.07.07
접근성 모음  (0) 2012.10.09
웹접근성 디자인  (0) 2012.06.20
디자인 명도대비 체크  (0) 2012.06.20
시각장애인 스크린리더 테스트  (0) 2011.06.15
:

css 무료 벡터 아이콘

CSS 2015. 7. 22. 08:56

http://fontawesome.io/


상업적 사용 프리

'CSS' 카테고리의 다른 글

css calc 함수  (0) 2016.06.08
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
:

jquery 플러그인

jQuery 2015. 7. 14. 20:25
http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=13#quick main

http://wooreeweb.com/lecture/archives/140

http://bxslider.com/

'jQuery' 카테고리의 다른 글

0527 duration  (0) 2014.05.27
배너2  (0) 2014.05.15
이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
:

디바이스별 해상도

모바일 2015. 7. 14. 18:34

http://indiecast.co.kr/150184216201

해상도 정리 

 

 

http://konatamoe.com/20159187691

해상도 차이를 비교

'모바일' 카테고리의 다른 글

모바일 해상도 정리  (0) 2017.03.02
모바일 해상도 테스트  (0) 2015.12.29
화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
:
◀ PREV : [1] : [2] : [3] : [4] : [···] : [16] : NEXT ▶

티스토리툴바