Categories for CSS

버튼을 공중으로 띄우기

hover 시 element 을 위로 띄우는 animation 은 여러가지 방식으로 구사될 수 있겠지만, (hover 시 위에 위치한 div 의 height 을 줄이는 방식이 가장 흔하게 사용되죠) 버튼의 경우는 위나 아래 위치한 div 와 상관없이 animate 이 되야 합니다. 그래서 이... [더 읽기]

3색원소

3색원소

1. css 의 border-radius 를 이용 circle 을 만들고, 2. transform 으로 45도 각도로 튼 후, 3. keyframe 에서 rotateY 로 circle 들을 돌려줍니다. * 3개의 circle 들에 모두 같은 각도를 주면 3개가 한꺼번에 같은 방향으로 돌아가니까, 하나는 45도, 다른... [더 읽기]

css 로 리본메뉴 만들기

css 로 리본메뉴 만들기

css 의 pseudo-element 를 이용해서 가로메뉴에 리본달기. 제 홈피에 메뉴를 바꿔보려다가 좀 어울리지 않아서 관뒀습니다만, 유용하게 쓰세요.

3D CSS 도 할수 있어요

E-commerce (온라인 쇼핑몰) 구축시 가장 많은 시간을 소비하게 되는 부분 중 하나가 상품을 어떻게 보여주는 가에 대한 부분 입니다. 상품의 특색을 보여주기 위해서 다양한 기법들이 사용되는데, 대부분 javascript/jQuery 의 힘을 빌리게 되는데요. javascript/jQuery 처럼 다양하고 강력한 성능을 아직 보여주지는 못하지만,... [더 읽기]

block 의 css 성격

  div 는 기본적으로 display:block, a tag 의 경우는 display:inline 으로 표시됩니다. 오늘 어느분의 a tag 에 margin 이나 padding 이 먹지 않는다고 도움을 청해오셔서 이 부분에 대해 설명을 드렸는데, <a> 나 <span> 태그를 block 처럼, 다시말해 div 처럼 표현하려면,... [더 읽기]

CSS 로 세모 만들기

이글에 소개된 삼각형 만들기 기법은 매우 오래된, 지금은 좋지않은 방식입니다. 최신 방식은 아래 링크의 글에서 확인하실 수 있습니다. https://hackya.com/kr/css-로-세모영역만-클릭되게-만들기/ 결과물 결과물 삼각형은 결국 border 중 하나만 보여주고 나머지는 감추는식으로 만들어 지는 것 입니다. 이해되셨나요?

폼, 체크박스 스타일 입히기

제가 항상 써오던 폼 과 체크박스 스타일 솔루션은 JavaScript and JQuery 였습니다. jQuery 라서 크로스브라우징 걱정을 하지 않아도 되니 까다로운 폼과 체크박스 스타일을 할때 많이 편했는데요. 문제는 이 솔루션은 다른 자스 library 와 충돌이 자주 생깁니다. 특히 jQuery 가 아닌... [더 읽기]

IE 11 의 개선된 개발자 툴

IE 11 의 개발자 툴은 기존 IE 개발자 툴과 비교해서 많은 기능들이 개선되고 추가 되었습니다. 일단 UI 가 확 달라졌습니다. 좀더 직관적인 UI 가 일단 눈에 띄는데, 실제 기능이 중요하죠. 지금까지 개인적으로 IE 개발자 툴 사용이 어려웠던 이유는 크롬이나 firebug... [더 읽기]

반응형 애드센스

구글이 오늘 반응형 애드센스를 출시 했습니다. 제가 고민하던 부분이기도 한데, http://hackya.com/blog_kr/구글광고-display-none-을-사용-못하는-경우/ 매우 반가운 소식입니다. 아직 베타 버전이긴 한데, 사용방법은 간단합니다.  애드유닛을 만들때 아래 그림처럼 각 break-point 에 맞춰 미디어쿼리 만 지정해 주면 됩니다.       좀더 구체적으로 설명하자면, 아래처럼... [더 읽기]

아이패드에 적용되는 resolution 넓이

아이패트에 적용되는 resolution 넓이에 대한 혼동이 생기기 쉬운데, 적용되는 넓이는 view port 태그를 어떻게 설정하느냐에 따라 다릅니다. 아무런 view port 태그도 지정하지 않은 경우는 이렇게 계산하면 되고, Portrait: 980×1208 Landscape: 980×661   아래와 같은 view port 태그들로 지정하는 경우는 다... [더 읽기]