Rev. 2.73

Web Designer Wall의 Nick La씨는 CSS3를 사용함에 있어서 기본적으로 이해해야 하는 항목들에 대하여 정리하고 새롭게 추가된 text-shadow, box-shadow 그리고 border-radius 속성들에 대한 사용법을 자세히 설명했습니다.

RGBA

색상 값으로 RGB 컬러와 투명도를 의미하는 A를 입력할 수 있습니다. (0 = 투명, 1 = 불투명)

rgba.gif

RBGA는 색상을 필요로 하는 모든 CSS 속성들 즉, 글꼴, 보더, 배경, 그림자 색상 등에 적용될 수 있습니다.

rgba2.gif

Text Shadow

텍스트에 그림자가 비치는 효과는 x-offset, y-offset, blur, 그리고 색상 순으로 구성됩니다.

text-shadow.gif

x-offset에 입력된 값 만큼 그림자가 왼쪽에 위치하고 y-offset에 위치한 값 만큼 그림자가 아래에 위치합니다. 그림자 색상에도 RGBA 값을 사용할 수있다는 사실을 잊지 마세요.

text-shadow-example2.gif

또 다른 방법으로는 쉼표(,)로 구분하여 여러개의 그림자를 지정할 수도 있습니다. 다음 예제는 글씨가 움푹 패인듯한 효과를 만들어 낸 것입니다.(1px 상단 및 하단 1px)

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

text-shadow-example3.gif

Border Radius

보더의 둥글기는 기존의 padding 또는 margin 속성의 사용법과 유사합니다. (예: border-radius: 20px) 이 속성은 브라우저 마다 설정하는 방법이 다릅니다. webkit 앤진을 사용하는 사파리, 크롬 브라우저에서는 "-webkit-"을 속성의 이름 앞에 작성해야하고 파이어폭스는 "-moz-"를 작성해야 합니다.(최근 크롬과 오페라 브라우저에서는 더이상 "-webkit-"같은 구분자를 사용하지 않아도 인식하기 시작했습니다.)

border-radius.gif

각 모서리마다 다른 값을 지정할 수도 있습니다. 이 방법은 브라우저마다 속성 이름이 통일되지 않았기 때문에 추천하지 않습니다.

border-radius-corners.gif

Box Shadow

상자에도 그림자 효과를 부여할 수 있습니다. "x-offset, y-offset, blur, 색상" 순으로 텍스트 그림자 속성을 지정하는 방법과 동일합니다.

box-shadow.gif

다시 말하지만, 한개의 요소에 한개 이상의 그림자 효과를 적용할 수 있습니다. 다음 예제는 3가지 그림자 효과를 하나의 요소 선언한 것입니다.

box-shadow2.gif

조금 아쉽지만 background 속성의 그라디언트 사용방법이 누락되었군요. 이것도 대박인데...

Comments

Zen Coding은 HTML과 CSS 코드를 효율적으로 작성할 수 있게하는 소스 편집기용 플러그인입니다. Aptana, TextMate, Coda 그리고 Espresso 등에 설치할 수 있으며 DOM Selector 문법으로 HTML을 손쉽게 작성할 수 있습니다. 위 동영상은 Zen Coding을 이용한 코딩 방법을 소개하고 있습니다.

Aptana에 적용하는 방법은 매우 간단합니다. 우선 Aptana용 Zen Coding을 다운로드합니다. 그리고 Aptana에서 새 프로젝트를 추가하고 "scripts"라는 폴더를 생성한 다음 다운로드한 압축파일을 풀어놓으면 설치가 완료됩니다. Aptana의 "Scripts" 메뉴에 "Zen Coding"항목이 보이면 정상적으로 설치된 것입니다. 기본으로 단축키가 Alt + E키로 바인딩되어 있는데 윈도 버전에서는 작동하지 않습니다. "scripts" 폴더의 "Expand Abbreviation.js"파일을 열고 주석 안의 "M1+E"를 "M1+M3+E"로 수정합니다. M1은 Alt, M3는 Ctrl키를 의미합니다. 이제 새로운 HTML파일을 생성하고 "html:4t"라고 작성한 후 Ctrl + Alt + E키를 눌러보세요. "scripts"폴더는 기존 프로젝트의 하위 폴더로 이동해도 무방합니다.

HTML Selectors 문서에서 명령어들을 숙지할 수 있으며 PDF로 만들어진 치트시트도 제공하고 있습니다. Zen Coding이 출시된 것은 벌써 알고 있었지만 지금에서야 사용해 보았네요. 생각보다 유용하게 사용할 수 있을 것 같더군요. 익숙해지면 코딩 퍼포먼스를 완전히 차별화 할 수 있겠습니다.

Comments

people.jpg

CodeMirror는 각종 컴퓨터 프로그램 코드를 웹상에서 쾌적한 환경으로 편집할 수 있도록 구축하는데 도움주는 자바스크립트 라이브러리입니다. 전문 코드 편집기에 상응하는 문법 강조 및 코드 편집기능들을 제공합니다. 특히 다중 편집 모드를 지원하여 HTML + CSS + JavaScript 또는 HTML + PHP처럼 여러 언어를 복합적으로 편집할 때에도 문법을 강조할 수 있습니다. 사용할 수 있는 언어로는 JavaScript, XML/HTML, CSS, SPARQL, PHP, Python, Lua, Ruby, SQL 이 있으며, 크로스-브라우저를 지원합니다. 구글의 API 놀이터어스 KML 셈플러, 파이어버그 플러그인인 FireRainbow 등에서 CodeMirror를 이용한 편집기를 제공하거나 문법 강조기능을 활용하고 있습니다. 보다 자세한 사용법은 API 문서를 참조하세요.

var editor = CodeMirror.fromTextArea('code', {
  height: "350px",
  parserfile: [
    "parsexml.js", "parsecss.js", "tokenizejavascript.js",
    "parsejavascript.js", "parsehtmlmixed.js"
  ],
  stylesheet: [
    "css/xmlcolors.css", "css/jscolors.css", "css/csscolors.css"
  ],
  path: "js/"
});

Comments