-
Html, CSS 2018‧09‧27
텍스트 세로 방향으로 타이핑
글자가 입력된 문장 자체를 90도 돌린 듯 한 표현으로 타이핑 되게 하려면 아래처럼 작성한다. (단, 한글은 제외된다. 한글일 경우에는 적용되지 않고 세로로만 타이핑 된다.) writing-mode: vertical-rl; text-orientation: mixed; 그러면 이렇게 노출된다. 한 줄 내리면 이렇게 나온다. English text 글자들을 각도 조절되지 않고 세로로 타이핑 되게 하려면 아래처럼 작성한다. writing-mode: vertical-rl; text-orientation: upright; 그러면 이렇게 노출된다. […]
-
Html, CSS 2017‧08‧01
css3 animation 키프레임 멈추기
CSS3로 키프레임 애니메이션을 작동하다가 멈추고 싶을 때가 있다. 대부분 hover나 Class 를 추가하여 멈추는 동작을 넣고 싶을 경우다. -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; -webkit-animation: none !important; 맨 마지막 줄에 -webkit-animation: none 이 있는 이유는 아이폰 ios 사파리에서 paused; 동작이 제대로 작동하지 않는다. 그렇기 때문에 대안으로 만들어진 코드이다.
-
Html, CSS 2016‧10‧17
css - div에 글자 입력 받고 placeholder 넣기
<div contenteditable="true" placeholder="여기에 글자를 입력해주세요."></div> 위 처럼 html을 작성한 후 아래처럼 css를 작성한다. [contenteditable=true]:empty:before{ content: attr(placeholder); display: block; /* For Firefox */ } div[contenteditable=true] { border: 1px solid #ddd; color : #333; font-size: 12px; width: 300px; padding: 5px; } 아래는 샘플
-
Html, CSS 2016‧10‧05
그림문자인 이모지(emoji) 웹에 사용하기
요즘 아이폰, 안드로이드와 같은 스마트 기기에서 이모지(emoji, 원래는 일본 명칭 에모지이지만 영어 발음으로 전해지다 보니 이모지가 됨)를 종종 사용한다. 특히 인스타그램, 페이스북과 같은 소셜 미디어에서 종종 보았을 것이다. 이게 제공되는 유니코드가 있고 그 유니코드에 따라 스마트폰 OS나 소셜 미디어 마다 이미지로 노출하는 디자인이 조금씩 다른 것이지만 의미와 코드는 거의 같다. 이는 바로 이모지 유니코드 테이블을 […]
-
Html, CSS 2016‧09‧12
iOS에서 가로모드시 글자 크기 변경 막기
ios 모바일웹은 스마트폰을 가로모드(Landscape)로 변경되면 글자가 갑자기 커져버리는 현상이 발생함. 이를 막기 위해서 아래 코드 body에 삽입 -webkit-text-size-adjust: 100%;
-
Html, CSS 2015‧01‧13
css - 모바일웹 화면 회전시 텍스트 크기가 변경될 때
반응형 웹사이트를 제작하다보면 미디어쿼리를 이용해서 모바일 화면의 폰트 크기를 지정하는 경우가 있다. 그런데 세로로 보는 상태에서 화면을 회전시켜 가로 모드 (Landscape)가 되면 텍스트들이 자동으로 커지는 현상을 발견할 것이다. 픽셀로 정의한 폰트가 아닌 가변적인 치수로 지정할 경우 그러한데 이는 스마트폰의 브라우져가 컨텐츠 정보를 읽기에 최적화된 모드로 렌더링하기 때문이다. 이에 디자인을 기반으로 em이나 %로 폰트 사이즈를 설정한 […]
-
Html, CSS 2015‧01‧06
css3 - 아이폰에서 스크롤이 부드럽지 않고 버벅일 때
overflow:scroll; -webkit-overflow-scrolling:touch; 위와 같이 써주면 스크롤이 자연스럽게 변하게 된다.
-
Html, CSS 2014‧10‧24
CSS3 - 미디어쿼리 사이즈별로 임포트 방법
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css) (screen and min-width:768px); 예제는 768px 이상일 경우 나눔글꼴 css 로딩 되도록 코딩함
-
Html, CSS 2014‧09‧26
div 엘리먼트 가로, 세로 중앙 배치
div를 브라우저의 정중앙이나 원하는 엘리먼트 정중앙에 위치시키고 싶을 때가 있다.특히 레이어 팝업을 만들어 노출할 때 주로 필요로 하다. 하지만 아쉽게도 이게 정답이다라고 할 방법은 없다. 이유는 어떤 것은 크로스 브라우징이 안되는 Transform을 사용할 때도 있고, 마진으로 억지로 맞추는 경우등 여러가지 방법등이 있다. 그중에 본인이 주로 쓰는 방법이 있다. div 가로 세로 길이가 정의된 경우에 유용하다. <div […]
-
Html, CSS 2014‧09‧04
css - 크롬 position fixed 버그 해결 방법
2017년8월15일 업데이트 : translateZ(0) 여기에서 숫자를 전부 0으로 해놓으면 fixed 정의한 엘리먼트들이 ios에서 scrolltop 과 같이 스크롤이 빠르게 진행되다보면 fixed 레이어가 사라지게 된다. z-index가 안먹힌다. translateZ(여기에) fixed 한 엘리먼트의 z-index 값을 넣어준다. 크롬 브라우저에서 position값을 fixed로 만든 A라는 엘리먼트가 있는데 스크롤하다가 영상 오브젝트에 마우스 오버를 한 후 다시 스크롤을 하게 되면 A라는 엘리먼트 잔상이 영상 오브젝트 […]