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

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

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

블로그의 콘텐츠는 주제에 따라 텍스트, 이미지, 멀티미디어 중심의 다양한 형태로 작성된다. 보편적으로 텍스트 형태가 주류를 이루고 있지만, 텍스트 중심의 콘텐츠도 보다 돋보이고, 독자에게 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있다. 텍스트만 있는 콘텐츠라고 해서 가치가 절하되거나 블로그 디자인에 영향을 주는 것은 결코 아니다. 하지만 이왕이면 다홍치마라고 보기좋은 떡이 먹기도 좋은 까닭이다. 관련 이미지가 첨부되면 일단 독자에게 시각적으로 볼거리가 제공하고, 콘텐츠 집중도를 높이며 한걸음 나아가 블로그 디자인에도 좀 더 생기를 띄게 만드는 시너지 효과를 발휘하게 된다. 가급적이면 가로.세로 500~600픽셀(Pixel)을 넘지 않는 다수의 이미지 첨부가 ..

Digital News/Blogging Guide 2009. 1. 3. 08:48