아는만큼 보여요

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
img {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    min-height: 100%;
    min-width: 100%;
}

http://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-css

http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image

white-space: pre;

ios에서 css속성에 overflow: scroll를 주면 스크롤시 부드럽지 못하고 뚝뚝 끊기는 현상이 있다.

이를 자연스럽게 하기 위해서 아래 속성을 추가하면 된다.

-webkit-overflow-scrolling: touch;

calc함수를 사용하면 css상에서 연산이 가능하다.

javascript단에서 연산해서 적용하는 수고를 덜어준다.

사용법은 간단하다.

이런식으로 나누기 연산이 가능하며

이렇게 하면 3을 나눈후 20px를 빼준다.

테스트를 하던중 Mac의 FireFox에서는 mp4가 재생되지 않는 문제가 발생함

FileFox홈페이지에 들어가 보니 아래와 같이 아직 Mac에서는 mp4가 지원되지 않고 있었습니다.

​

​

​

iframe으로 데이터를 전달하고 받는 방법을 찾다가 알게 되었다.

크로스 도큐먼트 메시징(Cross Document Messaging)을 사용하면 

두개의 웹 페이지가 서로 메시지를 주고 받을 수 있다.

Cross Document Messaging의 장점은 서로 다른 도메인에 존재하는 페이지끼리도 메시징이 가능하다.

Same Origin Policy에 적용받지 않아 도메인을 넘나드는 연동 구조에 적합하다.

데이터 전송하기

데이터 수신하기

데이터 수신하는 측에서는 window객체의 message 이벤트를 구현하면 됩니다.

처음에 iframe으로 데이터를 전달하고 받는 방법을 찾다가 Cross Document Messaging을 알게 되었다고 했는데 

직접 예제를 보면

test1.html

test2.html

test1.html에서 send버튼을 누르면 test2.html로 전송하여 메시지를 출력해 준다.

ios상에서 숫자가 연속적으로 나올때 번호를 전화번호로 인식하여 링크시켜준다.

이를 방지하기 위해서 다음의 메타테그를 추가하면 된다.

http://dizyne.net/30-tutorials-help-master-css3/