•  
  •  
  •  
  •  
 
2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
 
K2 shop Flash Update
Mobis Phoebus site renewal
d&c site renewal
Samsung Thunders site renewal
Kia motors Stage Motion Graphic
MOBIS Carfe E-Catalog
HFR sites open
KGC Season Update
w3c korea
아빠 이렇게 내려가면 되는건가요?
이불 덮고있는 졸망이
행운아 안약 넣자~
난 졸망이라고 함!
아빠..손 따뜻해..
내려오려고 하는 올망이
어허! 어허! 아빠 거기 내 단추~
참 똘똘하게 생긴 졸망이
음…아빠! 아빠가 빠뜨린게 있어~!
 

Html, CSS

Html, Style Sheet

css3 animation 키프레임 멈추기

CSS3로 키프레임 애니메이션을 작동하다가 멈추고 싶을 때가 있다. 대부분 hover나 Class 를 추가하여 멈추는 동작을 넣고 싶을 경우다. 맨 마지막 줄에 -webkit-animation: none 이 있는 이유는 아이폰 ios 사파리에서 paused; 동작이 제대로 작동하지 않는다.  그렇기 때문에 대안으로 만들어진 코드이다.

... 2017/08/01

css – div에 글자 입력 받고 placeholder 넣기

 위 처럼 html을 작성한 후 아래처럼 css를 작성한다.  아래는 샘플

... 2016/10/17

그림문자인 이모지(emoji) 웹에 사용하기

요즘 아이폰, 안드로이드와 같은 스마트 기기에서 이모지(emoji, 원래는 일본 명칭 에모지이지만 영어 발음으로 전해지다 보니 이모지가 됨)를 종종 사용한다. 특히 인스타그램, 페이스북과 같은 소셜 미디어에서 종종 보았을 것이다. 이게 제공되는 유니코드가 있고 그 유니코드에 따라 스마트폰 OS나 소셜 미디어 마다 이미지로 노출하는 ...

... 2016/10/05

iOS에서 가로모드시 글자 크기 변경 막기

ios 모바일웹은 스마트폰을 가로모드(Landscape)로 변경되면 글자가 갑자기 커져버리는 현상이 발생함. 이를 막기 위해서 아래 코드 body에 삽입  

... 2016/09/12

css – 모바일웹 화면 회전시 텍스트 크기가 변경될 때

반응형 웹사이트를 제작하다보면 미디어쿼리를 이용해서 모바일 화면의 폰트 크기를 지정하는 경우가 있다. 그런데 세로로 보는 상태에서 화면을 회전시켜 가로 모드 (Landscape)가 되면 텍스트들이 자동으로 커지는 현상을 발견할 것이다. 픽셀로 정의한 폰트가 아닌 가변적인 치수로 지정할 경우 그러한데 이는 스마트폰의 브라우져가 컨텐츠 정보를 ...

... 2015/01/13

css3 – 아이폰에서 스크롤이 부드럽지 않고 버벅일 때

 위와 같이 써주면 스크롤이 자연스럽게 변하게 된다.

... 2015/01/06

CSS3 – 미디어쿼리 사이즈별로 임포트 방법

 예제는 768px 이상일 경우 나눔글꼴 css 로딩 되도록 코딩함

... 2014/10/24

div 엘리먼트 가로, 세로 중앙 배치

div를 브라우저의 정중앙이나 원하는 엘리먼트 정중앙에 위치시키고 싶을 때가 있다.특히 레이어 팝업을 만들어 노출할 때 주로 필요로 하다. 하지만 아쉽게도 이게 정답이다라고 할 방법은 없다. 이유는 어떤 것은 크로스 브라우징이 안되는 Transform을 사용할 때도 있고, 마진으로 억지로 맞추는 경우등 여러가지 방법등이 있다. 그중에 ...

... 2014/09/26

css – 크롬 position fixed 버그 해결 방법

2017년8월15일 업데이트 : translateZ(0) 여기에서 숫자를 전부 0으로 해놓으면 fixed 정의한 엘리먼트들이 ios에서 scrolltop 과 같이 스크롤이 빠르게 진행되다보면 fixed 레이어가 사라지게 된다. z-index가 안먹힌다. translateZ(여기에)  fixed 한 엘리먼트의 z-index 값을 넣어준다. 크롬 브라우저에서 position값을 fixed로 만든 A라는 엘리먼트가 있는데 스크롤하다가 영상 오브젝트에 ...

... 2014/09/04

CSS – vimeo 영상 높이 값 반응형으로 적용하기

vimeo를 삽입하다보면 iframe을 이용해서 홈페이지에 삽입하게 된다.그런데 이게 아이프레임으로 크기를 잡아버려서 브라우저 창이 조절 될 때 안의 영상은 이상한 비율로 보여질 때가 있다.이는 반응형웹에 적절하지 않은 사항이기 때문에 팁을 하나 얻어왔다.참고로 처음에는 자바스크립트로 엘리먼트를 제어하는 것을 만들어서 사용해 왔으나 순수 ...

... 2014/09/04

css – 텍스트에 그림자와 그라데이션 함께 넣는 코딩

코드 미리 보기 : http://jsfiddle.net/2GgqR/2/ 텍스트에 그림자 효과와 그라데이션 효과를 함께 넣고 싶을 때가 있다.물론 정식으로 코드를 제공하진 않지만 많은 사용자들이 이 효과를 위해 여러가지 방법을 동원한다.그 중에서 가장 효율적인 방법은 아래와 같다. 위 처럼 css를 하고 아래 처럼 html을 넣으면 된다. 다만 위 ...

... 2014/06/11

CSS3 – 이미지 또는 div 회전

회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다.  회전을 멈출 때는 아래 코드를 활용한다. 멈춘 상태에서 회전을 진행하고 싶을 때는 아래 코드를 활용한다.      

... 2014/05/20

반응형웹에서 이미지 높이 auto 값이 ie 8 이하에서 오류 대처

 또는   정보 출처 : http://stackoverflow.com/questions/8610077/height-auto-in-internet-explorer-8-and-below

... 2014/02/10

css3 – 이미지 교체

미디어쿼리를 사용할 때 이미지를 교체할 경우가 있다. # id 자식 요소 중에 img가 있다면 image.png로 이미지를 노출한다. 하지만 이 방법은 아직 추천하지 않는다. 크롬 조차 제대로 작동하지 않을 때도 있고 css3이다보니 제대로 안보여지는 경우가 많다. 알아두면 좋은 정보니까 메모!  위 방법도 있다고 하니 참고!

... 2013/09/11

이미지에 여백이 생길 때 해결 방법들

이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다. 위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.확대해서 보면 아래와 같다.   약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 ...

... 2013/04/04

css로 div 세로로 중앙 정렬시키기

자주 검색하기도 하고, 여러가지 방법이 있긴한데 개인적으로 생각했을 때 가장 무난하고 가장 호환성이 높은 방법을 메모해 놓으려고 한다. 방법은 #contents라는 div를 세로로 중앙 정렬하고 싶을 때 #contents를 감싸는 #contentsWrap이라는 div를 하나 만든다 .  나름 잘되는 것 같다.  

... 2013/01/21
.