-
Html, CSS 2018‧09‧27
텍스트 세로 방향으로 타이핑
글자가 입력된 문장 자체를 90도 돌린 듯 한 표현으로 타이핑 되게 하려면 아래처럼 작성한다. (단, 한글은 제외된다. 한글일 경우에는 적용되지 않고 세로로만 타이핑 된다.) writing-mode: vertical-rl; text-orientation: mixed; 그러면 이렇게 노출된다. 한 줄 내리면 이렇게 나온다. English text 글자들을 각도 조절되지 않고 세로로 타이핑 되게 하려면 아래처럼 작성한다. writing-mode: vertical-rl; text-orientation: upright; 그러면 이렇게 노출된다. […]
-
Html, CSS 2016‧09‧12
iOS에서 가로모드시 글자 크기 변경 막기
ios 모바일웹은 스마트폰을 가로모드(Landscape)로 변경되면 글자가 갑자기 커져버리는 현상이 발생함. 이를 막기 위해서 아래 코드 body에 삽입 -webkit-text-size-adjust: 100%;
-
Javascript, jQuery 2015‧01‧13
jQuery - 스마트폰 스크린 회전 감지 스크립트
스마트폰의 스크린이 가로모드와 세로모드를 감지하여 필요에 따라 스타일시트나 스크립트를 다르게 사용하는 경우가 있다. 일단 css의 미디어쿼리로 처리하는 방법을 보면 아래와 같다. #cover{ display:none; } @media only screen and (device-width: 768px) and (orientation: landscape) { #cover{ display: block; } } @media only screen and (min-device-width: 320px) and (orientation: landscape) { #cover{ display: block; } } 위 […]
-
Html, CSS 2014‧05‧20
CSS3 - 이미지 또는 div 회전
회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다. .spinimage{ -webkit-animation: spin 4s infinite linear; -o-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} […]