31. CSS 배경 이미지
July 18th, 2011 by 퐁당스
소개 솔직하게 말해보라! 이 과정의 첫 번째 글에서부터, 여러분은 여러분의 사이트를 강렬하고 매력적으로 보이게 만드는 방법을 배우고 싶어 몸이 근질거렸을 것이다. 아마 여러분은 이미 몇 개의 글을 건너 뛰었을지도 모르겠다. 백그라운드 이미지는 여러분의 사이트를 섹시해 보이게 만드는 것이지만, 그것을 만드는 방법이 여러분이 앞에서 이미 배웠던 것에서 크게 벗어나지 않는다는 것을 알게 되면 놀랄지도 모르겠다. 이 [...]
30. CSS 레이아웃 모델 – 박스, 보더, 마진, 패딩
July 9th, 2011 by 퐁당스
소개 얼핏 보면 CSS 레이아웃 모델은 직관적이다. 박스, 보더 그리고 마진은 꽤 간단한 오브젝트들이고, CSS 문법은 그들의 속성을 간단하게 표기할 수 있는 방법을 제공하고 있다. 하지만 브라우저 렌더링 엔진은 CSS 2.1 권고안에 적혀있는 긴 규칙 리스트 뿐만 아니라 브라우저 자체의 규칙도 함께 따른다. 이러한 이유로 고급 기술들이 스타일리스트의 레퍼토리에 더해지기 이전에 우리가 이해해야 할 구체적인 [...]
툴을 이용하여 애니메이션을 만들어보자!
July 7th, 2011 by 용쓰짱
이 강좌는 월간 w.e.b. HOW TO 2011년 06호에 게재되어 있습니다. 인터넷이 대중적으로 보편화 되면서 HTML컨텐츠를 많은 사람들이 만들어 낼 수 있었던 건 위지윅에디터의 힘이 컸었는데 그 중 나모웹에디터, 프론트페이지, 드림위버는 가장 사랑을 받았던 에디터였다. CSS3도 이에 발 맞추어 이미 발 빠르게 대응하는 회사들이 CSS를 기반으로 한 컨텐츠 자동생성용 프로그램 개발에 박차를 가하고 있다. 또한 기존 [...]
플래쉬보다 쉽게 구조화되고 다이내믹한 메뉴 만들기
June 29th, 2011 by 용쓰짱
이 강좌는 월간 w.e.b. HOW TO 2011년 05호에 게재되어 있습니다. 지금까지의 큰 두 가지 메뉴 개발방법은 대표적으로 TABLE로 작성한 후 스크립트를 이용하여 이미지 롤오버, 아웃 방식으로 구현을 하였거나 또 다른 방법은 오브젝트(플래시)형식의 메뉴를 구성해서 처리해왔다. 현재도 많은 사이트들이 구조화 되지 않고 단지 디자인에 중점을 두거나 기존개발 방법을 고수하여 사이트 개발이 되고 있으며 운영중인 사이트도 많은 [...]
29. CSS를 이용한 텍스트 스타일 지정
June 27th, 2011 by 검은태양
소개 Introduction 웹은 “문서” 의 집합이므로, 웹의 형태에 대해 말하면서 사용하는 개념들은 600년의 역사를 가진 인쇄술에서 많이 가져왔습니다. 글씨도 여기에 포함됩니다. 물론 웹은 새로운 매체이고 웹 사이트에서 글씨를 잘 표현하려면 인쇄 디자인과는 아주 많이 다르고 심하게 제한된 기술을 익혀야 합니다. Because the Web is a collection of documents — some dynamic, some static, some functional [...]
28. 상속과 캐스케이딩
June 27th, 2011 by 부침개
이 글은 부침개, 검은태양님 공역입니다. 소개 Introduction 상속과 캐스케이딩1은 CSS의 기본적인 개념입니다. CSS를 사용하려면 이러한 것을 이해해야 합니다. 다행히 이해하기 어려운 것은 아닙니만, 몇가지 상세한 점은 기억하기 조금 어려울지도 모르겠습니다. Inheritance and the cascade are two fundamental concepts in CSS . Everyone who uses CSS needs to understand them. Fortunately, they aren’t very difficult to [...]
27. CSS 기초
June 27th, 2011 by 부침개
What is CSS? HTML이 문서를 구축하고 특정 Element의 기능적 구조적 설명을 브라우저에 하는 동안(예를 들면 링크인가? 표제인가? 등) CSS는 특정 Element의 간격 및 배치에 대한 디자인 표현방법을 브라우저에 지시합니다. HTML이 집을 만들기 위해 필요한 벽돌이나 버팀목 역할을 한다면 CSS는 그것 들을 잘 쌓고 색칠하여 집을 꾸미는 역할을 한다고 말 할 수 있습니다. CSS는 정해진 규칙(룰)에 [...]
CSS3를 이용한 이미지편집/효과주기(2D/3D)
May 7th, 2011 by 용쓰짱
이 강좌는 월간 w.e.b. HOW TO 2011년 04호에 게재되어 있습니다. 불과 몇 해 전까지만 해도 활성화 되지 않았던 모바일 관련 웹이 스마트폰이라는 인프라가 형성되면서 빠르게 발전하는 모습을 보이고 있으며 그 중심에 있는 구조화된 웹표준기술이 이슈가 되는 상황이 되었다. 또한 그에 따른 부가기술의 CSS도 기존버전에서 CSS3로 버전업이 되면서 더욱 영역을 확장해 나가는 모습을 볼 수 있다. [...]
CSS3를 이용해 다양한 타이포그래피(Typography) 만들기
April 7th, 2011 by 용쓰짱
이 강좌는 월간 w.e.b. HOW TO 2011년 03호에 게재되어 있습니다. “타이포그래피”란 예전부터 활판인쇄술을 가리키는 말로 통용되어 쓰여져 왔다. 그러나 디자인이라는 분야가 부각되기 시작하면서 그 의미도 바뀌었으며 그때부터 “타이포그래피”는 활판인쇄술 뿐만 아니라 의미전달의 한 방법으로써 발전했으며 기능적인 부분과 미적인 면에서 보다 효율적으로 활용하는 기술이나 학문이라는 개념으로 바뀌었다. 전통적인 타이포그래피가 읽기 위한 글자보다 보기에 좋고 미적인 개념이 [...]
CSS 선택자(Selector)의 종류 및 간단한 효과주기
March 12th, 2011 by 용쓰짱
이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다. 언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다. 그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 [...]