수니리즘

웹 사이트를 코딩하다 보면 제한적인 폰트의 사용으로 자칫 사이트의 디자인이 밋밋해지는 경우가 많습니다. 때문에 주로 포토샵에서 폰트 작업을 한 뒤에 HTML 문서에 이미지로 삽입하는 경우가 많은데 유지보수 측면에서 글자 하나를 바꾸기 위해 일일이 이미지를 변경해 줘야하는 번거로움이 발생합니다. 이에 이번에는 구글의 웹 폰트 서비스를 이용하여 화면상의 밋밋한 폰트 모양을 다양하게 변경해 보도록 하겠습니다. 먼저 구글의 웹 폰트 사이트에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트에서 원하는 모양의 폰트..

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

이전 게시글에서 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다. 이번 게시글에서는 animation과 @keyframes라는 속성을 통해 사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 설정했던 모션을 호출하는 방식으로 동작합니다. 우선 다음의 기본 사용규칙을 살펴보겠습니다. animation의 경우는 @keyframes의 설정 등 다소 사용방식이 복잡해 보일 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 anim..

CSS3를 처음 접하는 사람들에게 CSS3에서 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 그도 그럴것이 기존의 웹 환경에서 플래시를 사용하지 않고 모션 효과를 주기 위해서는 복잡한 JavaScript의 코드를 일일이 작성해야 했습니다. 그러나 CSS3의 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한 탁월하기 때문입니다. 이번에는 CSS3의 꽃이라고 할 수 있는 transition, 즉 전환 효과에 대해 배워보도록 하겠습니다. transition의 기본 구분은 다음과 같습니다. (1) transition : 속성명 전환시간 가속도 설정 지연시간; ※ transition은 보통 가상 선택자 :ho..

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