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

  1. 2015.07.07 접근성 툴
  2. 2015.06.11 화면 터치시 터치영역 제거
  3. 2014.05.27 0527 duration
  4. 2014.05.15 배너2
  5. 2014.05.13 이미지 배너
  6. 2014.02.26 ie9 이하 버전의 제한
  7. 2013.02.03 div 안에 있는 엘리먼트 합 구하기
  8. 2012.11.10 미디어쿼리 분기점
  9. 2012.11.09 html4 와 html5의 차이점
  10. 2012.10.09 접근성 모음

접근성 툴

웹표준/접근성 2015. 7. 7. 07:59

접근성 툴

http://www.accesslint.com/

 

N-WAX  크롬 부가기능

OPEN-WAX  크롬, 파이어폭스 부가기능

K wah4.4 카도와프로그램

 

http://jos39.tistory.com/119

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

레이블과 타이틀, 새창  (0) 2015.08.21
접근성 모음  (0) 2012.10.09
웹접근성 디자인  (0) 2012.06.20
디자인 명도대비 체크  (0) 2012.06.20
시각장애인 스크린리더 테스트  (0) 2011.06.15
:

화면 터치시 터치영역 제거

모바일 2015. 6. 11. 17:17

 출처 : http://htglss.tistory.com/123

[Mobile] 모바일웹, 아이폰 터치 시 발생하는 탭 하이라이트 제거

Internet World/Mobile 2011/07/08 20:59
오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다.

아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.

이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)

 


하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.

a { -webkit-tap-highlight-color:transparent;}

위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.

 

--------------------------------------------------------------------------------------------------------

안드로이드 계열에서 테스트중 터치시 파란색 불투명 영역이 백그라운드에 노출,  svg로 그린 동그라미 영역에 터치영역을 같이 잡아 동그라미를 터치할때 엉뚱한곳에 영역이 표시되었다. 터치영역을 li로 바꾸자 점을 터치할때는 엉뚱한 곳에, li 를 터치할때는 li 영역이 표시되었다.

* {-webkit-tap-highlight-color:transparent;} 를 해당 페이에만 넣어서 해결.

 

 

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

모바일 해상도 테스트  (0) 2015.12.29
디바이스별 해상도  (0) 2015.07.14
미디어쿼리 분기점  (0) 2012.11.10
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
Carousel  (0) 2011.07.05
:

0527 duration

jQuery 2014. 5. 27. 21:16

<!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" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <style type="text/css">
 .lodding{width:65px; height:71px; border:1px #F00 solid; margin:150px auto;}
 
 </style>
 <script type="text/javascript">
 
 
 
  jQuery(function(){
   
   setInterval(playload,100);
   
   var heightMove = 0;
   var swe = true;
   function playload(){
    heightMove -= 71;   
    heightMove;
    
    if(heightMove<-5112){
     //consloe.log('실행');
     heightMove = 0;
    }else{
     $('.lodding').css('background','url(http://dept.galleria.co.kr/web/img/motionicon/scroll.png) no-repeat 0 '+heightMove+'px'); 
    }
   }
   
   $('.lodding').css('position','absolute').animate({
    left:'400px'
   },{
    duration:4000,
    step:function(){
     if($('.lodding').position().left>399 && swe){
      swe = false;
      $('.lodding').stop().animate({
       marginTop : '0px' 
      });
      
      
     }
    } // 4초동안 위의 동작을 하는 동안 값 추출 (위의 동작으로는 좌표값을 알 수 있음)
   });
   
  });
 
 
 </script>
</head>
<body style="background:#000">

<div class="lodding">

</div>


</body>

</html>

'jQuery' 카테고리의 다른 글

jquery 플러그인  (0) 2015.07.14
배너2  (0) 2014.05.15
이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
:

배너2

jQuery 2014. 5. 15. 21:49

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>study-banner1</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {list-style: none;  padding:30px; background:#FFFF00; text-align:center; height:202px;}
   ul li img {display:none; position:absolute; left:50%; top:30px; margin-left:-155px; width:309px; height:202px;}
   ul li.on img {display:block;}
   ul li { display:inline-block; padding-top:180px}
   ul li a {display:block; position:relative; z-index:1;  height:15px; width:15px; border:1px red solid; background:#fff;}   
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    var color = ["red","yellow","green"];
    //var colorNum = color.length;
    var liMenu = $("#banner>li").length;
    
    var menu = $("#banner>li").index();
    
    var timeRun = setInterval(count,2000);
    
    
    $("#banner>li").hover(function(){
     clearInterval(timeRun);
    },function(){
     timeRun = setInterval(count,2000);
     //setInterval(count,2000);
    });
    
    $("#banner>li>a").hover(function(){
     var menu = $(this).parent('li').index();
     
     
     
     /*$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);*/
     move(menu);
    });
    
    
    function move(arg){
     
     $('#banner>li:eq('+arg+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[arg]);
     
    }
    
    
    function count(){
     menu +=1;
     move();
     /*
     $('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);
     */
     
     if(menu == liMenu){
      menu = -1; //위에서 한번 더하기 때문에  0이 아닌 -1을 해준다
     }
    }
    
    /* 
    function test (x) {
      z = x+y;
    }
    
    alert(test (1,3));
    */
   });
  </script>
 </head>

 <body>
  <ul id="banner">
   <li class="on"><a href="#a" title="이벤트1">1</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
    
   </li>
   <li><a href="#a" title="이벤트2">2</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3">3</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>  
  </ul>
 </body>
</html>

 

'jQuery' 카테고리의 다른 글

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

이미지 배너

jQuery 2014. 5. 13. 21:56

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>0513</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {position:relative; margin:30px; list-style:none; width:309px; text-align: right;}
   ul li { display:inline-block; font-size:0; line-height:0; padding:0 2px;}
   ul li a {display:block; width:12px; height:12px; border:1px orange solid; border-radius:10px; background:yellow;}
   ul li img {display:none; position:absolute; right:0; top:22px;}
   ul li.on img {display:block; }
   ul li.on a {background:red; }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    //return false;
     //멈춤(멈춘 후 거꾸로 진행), 진행, 반환
    
    $("#banner>li:first").addClass ('on');
    
    var chNum = 0;    
    var timerId = setInterval(count,2000);
    
      $('#banner>li').hover(function () {
        $(this).css('cursor','pointer');
        clearInterval(timerId);
      },function(){
     $(this).css('cousr','Default');
     timerId = setInterval(count,1000);
      });
     

    
            
    $("#banner>li>a").hover(function(){
     chNum = $(this).parent('li').index();
     //마우스를 올렸을때
     //console.log($(this).html());
     //console.log($(this).parent('li').index());
     //$(this).addClass('on');
     //siblings 형제노드
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     ch(chNum);
     
    },function(){
     //마우스가 나갔을때
     //$('#banner>li:eq('+chNum+')').removeClass('on');
    });
    
    
        
    function ch(arg){ //arg = chNum
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     $('#banner>li:eq('+arg+')').addClass('on').siblings('li').removeClass('on');
    }
    
    
    function count(){
    
     chNum += 1;
     ch(chNum);
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     
     if(chNum == 4){
        chNum = -1; //현재 위치에서는 0 이 아닌 -1로 셋팅 --> 위에서 +1을 하고 있음
      
     }
    } 
       
   }); 
   
  </script>
 </head>
 <body>
  <ul id="banner">
   <li><a href="#a" title="이벤트1"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트2"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트4"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hsbn_140411_cam(0).jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트5"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_cb_140429.jpg" alt="" />
   </li>
  </ul>
 </body>
</html>

'jQuery' 카테고리의 다른 글

0527 duration  (0) 2014.05.27
배너2  (0) 2014.05.15
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
마우스오버 아웃  (0) 2012.07.10
:

ie9 이하 버전의 제한

CSS 2014. 2. 26. 17:21

ie9 이하 버전에 셀렉터 제한이 있었다!!!!!

처음엔 라인 버그인줄 알고 이게 뭐지? 했었는데....셀렉터 제한이라니...-_-;ㅋ

이상한거 들어간 줄 알고 눈알 빠지게 찾을뻔 했구료.....

 

펌글 : http://mkyoon.com/105

원문 :

 

CSS Limit #1.


하나의 CSS 파일의 크기가
288kb를 넘어설 경우,
인터넷 익스플로러에서는 읽어들이지 못하는 버그가 있다고 합니다.


CSS Limit #2.


CSS 선언. 즉, #selector { } 이러한 스타일 지정 갯수가
4096개를 넘어설 경우,
역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.


CSS Limit #3.


@import 를 사용하여 여러 CSS 파일을 한 CSS 파일에 모아 관리할 수 있죠.

- style.css -
@import url("style_one.css");
@import url("style_two.css");


이러한 @import 갯수가 32개를 넘어설 경우,
그리고 그 depth 또한 3개의 chain을 넘어설 경우, (style.css>style_one.css>style_ie.css)
또 역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

위와 같은 수치 이상으로 늘어나지 않도록,
언제나 조심해야겠습니다.-_-; (언제나 신기한 IE.)

 

 

펌글 : http://invalid.kr/ie-css-selector-limit/

어제 트위터를 하다가 본 글인데
twitter article
IE 9이하는 하나의 css파일에 선택자가 4095개 이상이면 더이상 적용이 안된다는 글을 보고 테스트 해봤다.

결과는 아래
limit
ie에서는 4095까지만 css 가 적용되었고 4096이상은 적용되지 않았고 파이어폭스는 다 적용 되었다.
뭐지… 왜 이런 제한을 두지…??

하…노가다 할뻔 했는데 zen-coding

'CSS' 카테고리의 다른 글

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

div 안에 있는 엘리먼트 합 구하기

jQuery 2013. 2. 3. 19:21

<style type="text/css">
  .set {float:left; height:100px; width:200px; background:#ccc;}
 </style> 

 

<script type="text/javascript">
  $(document).ready(function(){
   
   
   
   var totalWidth = 0;
   var set = $('.set')   
   
   set.each(function(){
    totalWidth = totalWidth + $(this).width();
   })
 
   
   $('.scroll').css('width', totalWidth)


  });  
   </script>

 

 

 <div class="scroll">
  <div class="set" style="width:250px">
  가나다
  </div>
 <div class="set" style="width:220px">
  가나다
  </div>
   <div class="set">
  가나다
  </div>
 
  <div class="set">
  가나다
  </div>
</div>

'jQuery' 카테고리의 다른 글

배너2  (0) 2014.05.15
이미지 배너  (0) 2014.05.13
신현석님 Jquery AIP 정리  (1) 2012.08.29
마우스오버 아웃  (0) 2012.07.10
웹접근성에 맞는 탭메뉴  (0) 2012.07.02
:

미디어쿼리 분기점

모바일 2012. 11. 10. 11:34

참고 사이트 : http://mediaqueri.es/

 

 

갤럭시s3 전까진 아래게 맞는거 같은데...요즘 해상도가 더 높은것들이 나와서...고민이다....

320픽셀

휴대폰과 같은 소형 스크린 기기에서 portrait 모드일 때

480픽셀

휴대폰과 같은 소형 스크린 기기에서 landscape 모드일 때

600픽셀

아마존 킨들(600x800), 반스앤노블(600x1024)과같은

소형 태블릿에서 portrait 모드일 때

768픽셀

아이패드(768x1024)와 같은 10인치 태블릿에서 portrait 모드일 때

1024픽셀

아이패드(768x1024)와 같은 태블릿에서 landscape 모드일때, 특정 노트북, 넷북, 데스크톱의 디스플레이일 때

1200픽셀

와이드 스크린 디스플레이, 주요 노트북, 데스크톱의 브라우저일 때


반응형 웹 디자인을 제작하기 위한 미디어쿼리 해상도 분기점 리스트 입니다.


resolution break point 라고도 합니다.


국내에도 다양한 해상도를 지닌 디바이스들이 존재하지만 현 디바이스 시장에서 가장 많이 사용되는 제품을 주로 하여,

해상도 분기점을 사용하는 편입니다.


꼭 위의 분기점들이 완벽하게 모든 기기들을 지원한다고 할 수는 없습니다. 그러나 css3 속성인 '미디어쿼리'를 지원하고 'viewport'를

사용한다면 현 시장에서 대중적으로 사용되는 디바이스에는 전부 지원이 가능한 분기점 리스트 입니다.

[출처] 반응형 웹 디자인을 위한 해상도 분기점 리스트|작성자 운돌이

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

디바이스별 해상도  (0) 2015.07.14
화면 터치시 터치영역 제거  (0) 2015.06.11
[아이폰4 대응] css sprite, -webkit-background-size  (0) 2012.01.30
Carousel  (0) 2011.07.05
모바일 프레임워크  (0) 2011.07.05
:

html4 와 html5의 차이점

Html5 2012. 11. 9. 15:58
자세한 건 아래의 글들을 참고하면 좋을 듯 싶다.

'Html5' 카테고리의 다른 글

html5 검사시 summary 오류  (0) 2012.10.08
iframe 사용  (0) 2011.04.05
HTML5의 새로운 태그를 IE에서도 사용하는 방법  (0) 2011.03.30
html5 브라우저 호환 준비하기  (0) 2011.03.30
HTML5 문서의 구조  (0) 2011.03.30
:

접근성 모음

웹표준/접근성 2012. 10. 9. 13:25

1.레이어 팝업이 다른 콘텐츠를 가려서 레이어를 닫아야만 하는 경우 마우스 초점을 정밀하게 다룰 수 없는 장애 영역(주로 상지 장애 -팔이 없거나 움직이기 어려운-)의 접근을 어렵게 합니다. 심사 가이드에 따라 심사를 할 것입니다. 다른 콘텐츠를 가리지 않는 레이어라면 문제가 없습니다.

2. 폼 콘트롤 요소의 선택 또는 입력 행위만으로 폼이 자동으로 전송되는 경우에만 문제가 됩니다. 체크박스, 라디오 버튼, 콤보박스가 선택될 때 폼을 전송하는 것이 아니라 단지 하위 콘텐츠의 내용이 변경되는 것은 문제가 되지 않습니다.

 

[질문]

안녕하세요~~

[질문 1]
테이블의 td 속성이지만 제목의 역할을 하는 셀에는 scope 속성을 넣어 표현하게 되어있는데요.
html5 경우 td에 scope 속성을 쓰지 못하게 되어 있습니다.

이경우~
제목의 역할을 하는 td는 th로 변환하는 것이 방법일까요?


[질문 2]
간혹 th에 scope와 ID 두개 다 적용하는 경우가 있는데요
이런 경우
둘 중 하나를 쓰게 하는 것이 맞는지요?
(현재 심플한 테이블은 scope를 사용하고 복잡한 구조에는 id를 사용하고 있음.)

[질문 3]
scope와 id를 섞어서 사용하는 경우
예) 세로열의 th에는 id를 사용하고, 가로형의 th에는 scope="row"로 사용
해당 셀에는 headesr="세로열 th의 id"만 제공하는 경우
이런 부분은 어떻게 하는 것이 좋을까요?

경우의 수가 많아서 좀 복잡하고 사용하고 있습니다.



[답변]

질문 1: 네, 제목의 역할을 하는 셀은 <th>로 마크업하시는 것이 바람직합니다.

질문 2: th에 id를 명시하고 td에 headers로 th와 연결시키는 경우 말씀이신가요? 맞다면 말씀하신 대로 하시면 충분하다고 판단됩니다.

질문 3: scope와 headers를 혼용하는 경우 이 마크업을 해석하는 보조 기기별로 해석 결과가 다를 수 있기 때문에(headers에 명시된 제목셀과 scope의 제목 셀 중 어떤게 먼저인지에 대한 해석, 두가지를 다 제목으로 사용자에게 전달할지 여부에 대한 해석 등) headers를 사용하시면 headers만으로 제목 셀과의 연결을 구현하시기를 추천드립니다.

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

레이블과 타이틀, 새창  (0) 2015.08.21
접근성 툴  (0) 2015.07.07
웹접근성 디자인  (0) 2012.06.20
디자인 명도대비 체크  (0) 2012.06.20
시각장애인 스크린리더 테스트  (0) 2011.06.15
:
◀ PREV : [1] : [2] : [3] : [4] : [5] : [···] : [16] : NEXT ▶

티스토리툴바