웹 디자인에서 웹 페이지 내 다양한 형태의 CSS 레이아웃을 구성하는 것이 고급 웹 개발자 및 웹 디자이너가 아니라면 쉬운 일은 아니다. 하지만 CSS 레이아웃 생성기를 활용하면 누구나 손쉽게 CSS 레이아웃을 직관적으로 빠르게 완성하고 코드를 추출하여 적용할 수 있다. CSS 레이아웃 생성기는 레이아웃 구성 요소의 CSS를 만들기 위한 최적의 도구다. 또한 브라우저에서 구성 요소를 배치하기 위해 CSS에서 가능한 것을 가르치는 학습 도구이기도 하다. 제공되는 옵션을 조정하여 레이아웃을 완성하고 CSS 및 HTML 코드를 실시간으로 확인하고 활용할 수 있다는 것이 장점이다. 인터넷 공간에는 웹 페이지 레이아웃 디자인 관련 다양한 리소스와 자동 생성 툴이 제공되고 있다. 그것들 중 자신의 디자인 작업 스타..

Design Information/Design Resources 2021. 6. 17. 06:47

"지금까지 이런 무료 아이콘(Icon) 시스템 패키지는 없었다. 이것은 아이콘 세트인가, 디자인 소스인가?" 리믹스 아이콘(Remix Icon)은 디자이너와 개발자를 위해 정교하게 제작된 오픈 소스 중립 스타일 시스템 아이콘 세트입니다. 도네이션은 하실 수 있지만 무료로 개인용 및 상업용으로 사용할 수 있습니다. 14개 카테고리 총 1441개 아이콘은 모두 심플하면서 정교하게 제작되어 가독성, 일관성 및 완성도 높은 픽셀(Pixel)의 유전자를 갖고 탄생되었습니다. 각 아이콘은 24x24 그리드(Grid)를 기반으로 한 외곽선(Outline) 및 채우기(Fill) 스타일로 디자인 되었습니다. 웹폰트, 파워포인트, 키노트용 편집 가능한 아이콘도 제공 더욱 놀라운 것은 1441개 개별 아이콘을 SVG 포맷으..

Design Information/Design Resources 2019. 4. 19. 19:54

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

최근 흥미롭고 특이한 텍스트 및 레이아웃 효과를 만들기 위해 '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