[반응형 웹] css media query 활용 기초

웹 화면을 보여주는 장치들이 매우 다양한 시대를 살다보니 화면의 크기나 내용물의 모양도 그만큼 다르게 표시해야 할 필요가  있습니다. 예를 들어 PC 화면에서만 보던 웹을 이제는 스마트폰, 태블릿, TV 등에서 보는 세상이 되니 각각의 기기에서 보기에 최적화된 화면으로 자동으로 변경되어 보이게 하는 것이 사용자 친화적인 웹사이트가 갖춰야 할 기본 사양이 되었습니다. 이렇게 장치에 따라 자동으로 다른 […]

Share the joy
  •  
  •  
  •  
  •  

테이블 셀에 hover 시 열(column)에만 highlight 효과 주기

Document Share the joy    

Share the joy
  •  
  •  
  •  
  •  

CSS3 Transforms 2D

Transform은 CSS3에 새로 추가된 효과이다. 이 효과를 이용하면 요소의 모양 변형, 위치 이동, 크기 변경 등의 효과를 줄 수 있다. 여기서 살펴볼 효과들은 2차원(평면적인) 효과들이다. translate() translate() 요소의 위치를 현재 위치로부터 주어진 가로와 세로 값 만큼 이동시켜준다. 예) -ms-transform : translate(50px,100px); /* MS IE 9 */ -webkit-transform : translate(50px,100px); /* chrome, safari, opera */ transform […]

Share the joy
  •  
  •  
  •  
  •  

CSS3 회전 속성과 javascript를 활용한 아날로그 시계

이 예제는 css3의 변환(transform)효과 속성을 활용하여 이미지의 회전 값에 변화를 줌으로써 아날로그 형태의 시계를 표현하는 것이다. 이 예제를 통해서 자바스크립트에서 시간을 다루고 css 속성을 변경하는 방법에 대해 익혀보자. IE의 경우 이 예제는 버전 9부터 작동한다. 아날로그 시계 코드

clock Share the joy    

Share the joy
  •  
  •  
  •  
  •  

css opacity(불투명도)

opacity는 HTML 구성요소의 불투명도를 지정하는 css 속성이다. 버전 : CSS3를 지원하는 모든 브라우저에서 사용 가능(일부 브라우저 낮은 버전에서는 verder prefix 필요) 용법 : opacity: n; n=0~1(값이 낮을수록 불투명도가 낮아짐, 즉 투명도가 높아짐. 소숫점 사용 가능, 예 0.1=10%) 1. opacity 예제 (기본값 opacity: 1) (opacity: 0.5) 2. opacity 미지원 브라우저에서 사용 * 지원여부 확인 : http://caniuse.com/css-opacity  

  […]

Share the joy
  •  
  •  
  •  
  •