CSS 코딩 실력(Coding Skill)을 향상하는데 학습적인 방식보다 게임적인 요소가 가미되면 효과가 좋지 않을까 싶다. 최근 CSS 코딩 스킬을 게임 방식을 통해 테스트해볼 수 있는 배틀 방식의 CSS Battle 등장해 개발자와 웹퍼블리셔들의 흥미를 유발하고 있다. CSS Battle은 CSS 스킬을 사용하여 최소한의 코드(Code)로 주어진 대상 이미지를 복제하기 위해 HTML/CSS를 작성하는 것을 목표로 한다. 대상 페이지에서 왼쪽의 편집기 영역에서 코딩을 시작하면 된다. 코드 입력을 시작하면 중간의 출력 영역이 코드 렌더링을 실시간으로 보여준다. 결과물이 우측 목표 이미지와 일치한다고 확신하면 제출 버튼을 눌러 점수를 확인하면 된다. 참고로 CSS Battle이기 때문에 코드에서 JavaS..

Design Information/HTML5 and CSS3 2019. 4. 18. 17:03

복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 CSS Grid Layout 생성기 활용 방법을 살펴보자.모든 디자인 영역에서 그리드 시스템은 중요한 역할을 담당하고 있고 웹디자인에 있어서 그 비중은 더 크다고 볼 수 있다. 그리드는 수평과 수직으로 구성된 디자인의 기본 요소라고 할 수 있다.그리드는 디자인 작업에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 갖추는 데 도움이 된다. 또한, CSS CLASS를 활용해서 웹페이지 레이아웃을 구축하는 행과 열을 제어할 수 있고 그것을 토대로 복잡한 중첩 레이아웃도 어렵지 않게 구축할 수 있다. 이글을 통해 소개하는 css-grid-layout-generator는 기존에 선보인 다양한 그리드 생성기와 달리 더 직관적이고 시각적인 인터페이스로..

Design Information/HTML5 and CSS3 2019. 1. 21. 02:55

2018년 4분기가 시작되었고 새로운 한 해인 2019년의 프로젝트를 위한 준비를 서서히 해나가야 하는 시점이다.현시점의 CSS 그리드 레이아웃(grid layout)과 CSS 레이아웃(layout) 전반에 대해 살펴볼 필요가 있다. 레이첼 앤드류의 프레젠테이션 'Your CSS Layout Toolkit for 2019'는 CSS 레이아웃의 핵심 요소를 배우고 지금 계획하거나 내년에 계획 중인 프로젝트에 대해 알아두면 유익한 내용을 담고 있다.레이첼은 실용적인 조언과 테이크어웨이(takeaway) 코드 예제를 통해 지금 활용하고 있는 부분과 앞으로 어떤 변화가 올 것인지를 둘러보고 이러한 기능을 프로젝트에 활용할 수 있기를 바란다고 말한다.총 57장의 슬라이드로 구성된 'Your CSS Layout T..

Design Information/HTML5 and CSS3 2018. 10. 17. 13:28

수많은 웹페이지에 존재하는 기존 링크는 밑줄, 점선, 색상 등등 몇 가지로 사용자의 시선을 끄는 획일적인 형태를 취하고 있다.링크는 해당 페이지에서 대상 페이지나 구매 페이지로 연결하게 되므로 기능적인 측면에서 유용하여 방문자의 클릭을 유발하기 위해 시인성이 높고 두드러지게 하는 것이 좋다.정적인 기본 링크에 마우스 오버 효과를 독특하게 구현하여 동적인 링크를 제공하면 사용자의 시선을 사로잡아 클릭 빈도를 높일 수 있다. 그런 까닭에 웹 개발자는 다양한 방법으로 마우스 오버 효과를 구현하는 방법을 연구해 왔다. 오늘은 CSS 트릭을 이용해 더욱 생동감이 넘치고 눈길을 사로잡을 수 있는 마우스 오버 효과인 호버 상태를 독특하게 표현하는 방법을 알아 본다.SVG 태그 소스를 활용 CSS 'background..

Design Information/HTML5 and CSS3 2018. 10. 10. 15:58

놀라울 만큼 강력한 기능과 비주얼 요소들을 손쉽게 구성할 수 있는 편의성을 갖춘 웹페이지 빌더 'WP Page Builder'를 소개한다. 누구나 멋진 웹사이트를 만들고 싶어 하지만 비용, 인력, 기능 구현 등 복합적인 문제로 쉽지가 않다. 그런 까닭에 근래에 들어 CMS 플랫폼으로 확장성이 높은 강력한 기능 갖춘 워드프레스를 사용하는 기업과 개인 사용자들이 나날이 늘어나고 있다.워드프레스가 제공하는 기본 기능은 다소 아쉬움이 있을지 모르지만 수많은 플러그인을 활용하면 상상 이상의 강력한 CMS 플랫폼으로 위력을 발휘한다.기본적으로 워드프레스는 게시글 작성하는 부분과 사용자가 원하는 대로 다양하게 구성할 수 있는 페이지 부분이 있다. 또한, 사용하는 테마에 따라 세련된 페이지 템플릿을 제공하기도 하지만 ..

Design Information/HTML5 and CSS3 2018. 9. 14. 17:31

최근 흥미롭고 특이한 텍스트 및 레이아웃 효과를 만들기 위해 'shape-outside' CSS 속성을 사용하는 데모가 부각되고 있다. 참고할 만한 사례로는 Mandy Michael 구현한 예제( https://codepen.io/mandymichael/pen/xzyrGa )를 통해서 살펴 볼 수 있다. CSS Shapes 모듈의 일부인 'shape-outside' 속성을 사용하면 객체의 모양을 중심으로 텍스트를 줄 바꿈 할 수 있다. 아래 CdoePen 링크를 통해 필요한 간단한 코드 구현을 이해하고 다양한 속성 변경을 통해 흥미로운 텍스트 레이아웃을 웹페이지에 구현해 볼 수 있다.참고 링크: http://bit.ly/2N8RejR

Design Information/HTML5 and CSS3 2018. 9. 1. 19:18

CSS 애니메이션은 속성을 이용해 구성요소를 제어하여 동적으로 구현할 수 있게 합니다. CSS 속성을 능숙하게 다룰 줄 안다면 어렵지 않게 구현할 수 있으나 그렇지 않다면 쉬운 일은 아니다.이 글을 통해 소개하는 키 프레임(keyframes) 앱을 이용하면 누구나 손쉽게 CSS 애니메이션을 손쉽게 구현할 수 있다.키 프레임은 브라우저와 편집기 사이를 오가지 않고도 애니메이션을 만들고, 보고, 실행하는 데 도움이 되는 시각적 타임라인을 제공한다. 사용자의 구성 작업이 끝나면 CSS가 제공되며 사용자의 활용 선호도에 따른 구글 크롬 확장 프로그램과 웹 앱 형태로 사용할 수 있게 되어있다. 키 프레임 크롬 확장기능은 UI가 원하는 웹 사이트(로컬 프로젝트 포함) 상단에 바로 삽입되고 애니메이션 하려는 요소를 ..

Design Information/HTML5 and CSS3 2018. 6. 11. 06:24

웹 페이지를 통해 두 가지 상품이나 서비스 이미지를 비교하거나 차이점을 강조해서 보여주고자 할 때, 일반적으로 좌.우 또는 상.하 배치를 통해 보여주거나 페이지 전환을 통해 보여주는 경우가 많다.이런 방법은 레이아웃 유지, 공간 제약, 직관성이 떨어져 효율성이 다소 떨어지는 점이 없지 않았다. 물론 다양한 방법의 diff도구들이 적용되고 있지만 보다 사용자 중심 시각적인 도구는 쉽게 접하기 어려웠다.시각적인 diff도구 TwentyTwenty는 두 이미지의 시각적인 차이를 강조하거나 효과적으로 보여주고자 할 때 유용한 방법이 될 수 있다.두 이미지의 이전과 이후를 한 화면, 특정 레이아웃에서 스와이프를 통해 직관적으로 보여준다. 두 개의 이미지를 쌓아서 동작하며, 슬라이더를 이동하면 CSS clip 속성..

Design Information/HTML5 and CSS3 2018. 5. 23. 07:41