수니리즘

흔히 HTML5 혹은 차세대 웹의 핵심으로 반응형 웹을 많이 언급합니다. 그렇다면 과연 반응형 웹이라는 것은 무엇일까요? 아마 한두 번쯤은 웹 서핑을 하다 브라우저를 키우거나 줄였을 때 해당 웹 페이지의 디자인이 실시간으로 변하는 것을 목격한 적이 있으실 것입니다. 이처럼 특정 해상도별로 서로 다른 CSS를 연결하여 상황에 맞는 최적화된 디자인을 제공하는 것이 바로 반응형 웹의 기본 개념이며 이러한 기능을 구현해 주는 것이 바로 지금부터 배울 미디어쿼리입니다. 앞서 언급한 것처럼 미디어쿼리의 중요 기능은 특정 기기의 해상도별로 서로 다른 CSS의 연결인데, 해당 기능의 사용 구문은 다음과 같습니다. (1) @media screen and (min-width : 최소 넓이 폭) and (max-width ..

바로 전 단계에서 transform의 다양한 속성들을 활용하여 평면상에서의 모양을 변형하는 법을 배웠습니다. 이번에는 평면이 아닌 입체적인 공간에서의 요소 변형법을 알아보겠습니다. 기존의 transform 속성들 중 3d로의 변형이 가능한 속성은 translate와 rotate입니다. (1) perspective : 원근감 설정하기 흔히 2d라고 하는 평면공간을 입체적인 3d 공간으로 바꾸는 제일 중요한 요소가 무엇일까요? 기존 x축, y축에 z축을 추가했을 시에 비로소 평면에서 입체적인 공간으로 바뀝니다. 지금부터 우리가 다뤄볼 속성이 바로 이 z축에 해당합니다. 사람의 눈에 더욱 자연스러운 입체공간을 구현하기 위해서는 원근감이라는 요소를 추가해야 하는데 브라우저상에 원근감을 설정해주는 요소가 바로 p..