.nocallout {-webkit-touch-callout:none;}

 

 

모바일 웹 브라우저에서 텍스트, 이미지 등을 길게 누르면 클립보드에 복사하거나 다운로드 할 수 있음.

이러한 콘텐츠의 복사나 다운로드를 막기 위한 class 설정.

 

 

── 

 

 

 

.pressed {background-color:rgba(0,0,0,0.7);}

해당 요소 영역을 눌렀을 때 선택되는 영역의 배경색을 원하는 색상으로 설정

 

 

── 

 

 

.githidden {position:absolute; left:-100%;}

노키아 S60 3.x나 5.0의 경우 애니메이션 GIF 파일을 지원하지 않음.

따라서 애니메이션 GIF를 사용하는 요소에 해당 클래스를 지정해 모바일 기기에서 처음부터 보이지 않게 설정

 

 

── 

 

 

.ir {overflow:hidden; display:block; border:0; background-color:transparent; background-repeat:no-repeat; direction:ltr; text-align:left; text-indent:-9999em;}

IR기법(의미가 포함되어 있는 이미지를 배경으로 처리하고 이미지에 상응하는 텍스트를 넣는 방법)에 대한 일반 설정.

direction 속성은 텍스트 방향을 지정하는 속성으로 ltr이라는 속성 값을 설정하여 왼쪽부터 글이 시작되게 함.

이렇게 하는 이유는 text-indent가 들여쓰기를 뜻하는 속성인데 속성 값이 음수(-) 값이라면 웹 브라우저상에서 안 보일 수 있기 때문.

사실 text-align:left; 와 derection:ltr는 같은 의미이지만 이러한 들여쓰기를 정확하게 표현하기 위해 함께 사용함.

 

 

── 

 

 

.hidden {display:none !important; visibility:hidden;}

모바일 웹 브라우저와 장애인이 웹 페이지의 내용을 다양한 형태로 인식할 수 있게 하는 스크린 리더에서 hidden 클래스로 지정한 영역을 모두 숨기도록 처리.

 

 

── 

 

 

.visuallyhidden {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0);}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {overflow:visible; position:static; width:auto; height:auto; margin:0; clip:auto;}

웹 브라우저에서 보이지는 않지만 스크린 리더에서는 보이도록 설정.

.visuallyhidden 의 링크와 포커스 : 입력 장치를 다루면서 링크 영역이나 포커스가 가능한 부분을 확정하도록 설정.

 

 

── 

 

 

.invisible {visibility:hidden;}

외관상으로는 보이지 않지만 레이아웃을 유지하는 클래스

 

 

── 

 

 

.clearfix {zoom:1;}
.clearfix:before, .clearfix:atter {content:''; display:table;}
.clearfix:after {clear:both;}

float 속성 초기화.

 

── 

 

 

* 참고 : 모바일 보일러플레이트 (모바일 웹 개발 실무를 위한 어비의 노하우)

http://book.naver.com/bookdb/book_detail.nhn?bid=7347170