[Flex 4]Flex 4의 CSS
[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.
Flex 4는 Flex 3를 완전히 갈아 엎었다는 느낌이 든다. 기존 컴포넌트에서 없어진 것도 있고 새로 추가 된 것도 상당히 많다. 익숙해지려면 적지 않은 시간투자가 필요할 것 같다.
CSS에 네임스페이스 추가
Flex 4부터 CSS에 네임스페이스가 추가가 되었다. 이러한 구분이 필요한 것은 컴포넌트가 기존 halo 컴포넌트 외에 Spark 컴포넌트가 새로 추가가 되면서 필요해진 것이다. 즉 두개의 컴퍼넌트가 다른 네임스페이스를 사용하고 있기 때문에 CSS도 다른 네임스페이스를 쓰게 하는 것이다. 다음 소스를 보면 이해가 쉽겠다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<mx:DateChooser id="main_calendar" x="20" y="20"/>
<s:Button label="submit" x="220" y="20"/>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button {
color: #FF0000;
}
mx|DateChooser {
color: #0000FF;
}
</fx:Style>
</s:Application>
<fx:Style>내에 @namespace를 정의하고 네임스페이스명|컴포넌트 의 형태로 CSS를 정의할 수 있도록 되었다. 그다지 어려운 사실은 아니다. ^^
이런 구조로 만들어진데에는 Flex 4가 Flash Catalyst와 연동이 되면서 디자이너와 개발자의 협업에 충실해지기 위한 거라고 한다. 예를 들어 Slider의 경우 liveDragging속성이 CSS쪽에서는 제어할 수 없던 반면 이번 Flex 4부터는 할 수 있게 되어 개발자는 코드상에서 디자이너는 CSS쪽에서 접근이 가능해져 협업이 되는 것이다. 디자이너의 경우 CSS를 직접 건드리지 않고 Flash Catalyst를 통해서 작업하기 때문에 CSS에 대해서는 몰라도 되지만 그 결과물은 CSS에 속성이 정의 되어 있음을 확인할 수 있을 것이다. 이러한 점이 개발자와 디자이너간에 협업을 가능하게 한 것이라고 생각한다.
고급 CSS (Advanced CSS)
Flex 3의 CSS에서 Selector는 단지 2개 였다. Class Selectors와 Type Selectors가 그것이다. 하지만 Flex 4부터는 이 Selector 종류가 크게 늘어났다. 이는 더욱 세밀하게 CSS 작업을 할 수 있다는 것을 의미한다. 이제 거의 HTML CSS와 맞먹을 정도인 것 같다. ^^ (CSS는 개인적으로 Flex의 강점중에 하나라고 생각한다. 기존 Flex 3 만으로도 강력한 CSS기능은 나로 하여금 Flex 매력에 푹 빠지게 했다.)
참고로 Class Selector와 Type Selector는 다음과 같다.
Type Selector
같은 종류의 컴포넌트에 적용된다. 다음과 같은 경우 spark.components.Button 및 이를 확장한 컴포넌트에 적용된다.
s|Button { color: #CC0000; }
Class Selector
컴포넌트의 styleName을 지정한 컴포넌트라면 종류에 상관없이 적용이 된다.
.header { background-color: #CCCCCC; }
아래부터는 Flex 4에서 추가된 CSS selector에 대해 예제와 함께 살펴본다.
1. ID Selectors
예전부터 컴포넌트 ID별로 CSS를 줄 수 있으면 좋겠다는 생각을 가졌다. Flex 4에 부터 적용되니 기쁘다. ID별로 CSS를 적용할 수 있기 때문에 같은 계열의 컴포넌트라도 하나의 객체로 생성된 유일한 1개의 컴포넌트에만 CSS를 적용할 수 있게 된다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<s:Button id="btnTest" x="41" y="24" label="ID 적용됨"/>
<s:Button x="128" y="24" label="ID 적용 안됨" />
<fx:Style>
#btnTest{
color: #0000ff;
}
</fx:Style>
</s:Application>
ID가 btnTest로 지정된 것만 Label색이 파란색으로 지정된다. ID를 이용하기 때문에 네임스페이스 구분이 필요없다. 이제 컴포넌트 끼리 CSS 사생활 침해를 금지 시킬 수 있겠구나~ (농담)
2. Multiple class selectors
이는 Class selector가 확장된 개념이다. Class Selector는 중첩해서 사용할 수 있다. 아래 예제를 보면 쉽게 이해할 수 있을 것이다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<mx:Label styleName="class1 class2" text="중첩 Class Selector 사용" x="8" y="40"/>
<fx:Style>
.class1
{
color : #ff0000;
}
.class2
{
fontFamily : "궁서";
}
</fx:Style>
</s:Application>
위 예제에서 Label에 styleName을 설정할 때 class selector를 2개 썼다. class1, class2는 각각 폰트색과 종류를 설정했는데 이 2개의 selector를 사용한 Label은 두개의 class selector에 정의가 적용된다. 결국 Label의 글자색은 빨강, 폰트는 궁서로 보이게 된다.
이렇게 class selector를 중첩이 가능하게 됨에 따라 중복되는 selector가 없도록 깔끔하게 CSS구성을 할 수 있게 되었다.
3. Descendant Selectors
이 selector는 자식/부모 관계에 있는 컴포넌트에 해당한다. Panel위에 Button을 놓았다고 하자. 이때 관계에서 Panel이 부모, Button은 자식이 된다. 특정 부모는 자식에게 어떤 것을 바랄 수 있게 된다. 그래서 사과를 줄수도 있고 바나나도 줄 수 있다. 여기에 특정 부모라는 말이 중요하다. 아무 부모나 자식에게 그렇게 주는 것을 금지한다. 이 관계를 이용한 것이 바로 Descendant selector이다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<s:Panel x="14" y="42" width="250" height="200">
<s:Button x="12" y="12" label="Button"/>
</s:Panel>
<s:Group x="33" y="393" width="200" height="200">
<s:Button x="33" y="29" label="Button"/>
</s:Group>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Panel s|Button{
color: #304F6B;
baseColor: #5387B7;
}
</fx:Style>
</s:Application>
위 코드에서 볼 수 있듯이 Panel에 자식 Button만 CSS를 적용하도록 되어 있기 때문에 Group위에 올라간 Button에는 CSS적용이 안된다.
4. Pseudo selectors
Flex 4에서 상태변화에도 CSS를 적용할 수 있게 되었다. Flex 4에서는 Skin을 ProgrammaticSkin 기반이 아닌 SparkSkin기반으로 MXML형태로 제작할 수 있도록 되어 있다. flex4.swc에 spark.skins.*쪽을 훑어보기 바란다. Button의 경우 ButtonSkin.mxml이 존재하는데 아래와 같이 상태별로 다른 스킨을 줄 수 있도록 되어 있다.
<s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states>
이 상태에 따라서 CSS를 적용할 수 있도록 한것이 바로 Pseudo selector이다. 아래 예제에서 볼 수 있듯이 :를 이용해 컴포넌트의 상태에 따라 CSS를 주는 것을 확인할 수 있다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">
<s:Button label="Test"/>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button:up{
color: #304F6B;
baseColor: #5387B7;
}
s|Button:down
{
baseColor: #917541;
color: #B8A553;
}
s|Button:over
{
baseColor: #B8A553;
color: #6B5630;
}
</fx:Style>
</s:Application>
CSS Selector 사용하기
위에서 설명한 Selector 들은 독립적으로 사용하는 것외에도 다른 Selector와 함께 사용할 수 있다.
Flex 3에서는 아래와 같이 단순한 Type Selector와 범용적으로 사용되는 Class Selector만 사용할 수 있었다.
Button { color:#00FF00; } /* Simple type selector */
.special { color:#FF0000; } /* Universal class selector */
하지만 Flex 4부터는 새로운 Selector와 함께 섞어서 사용할 수 있게 되었다. 아래 CSS 적용 예시를 보자.
Button { color:#00FF00; } /* 단순 type selector */
.special { color:#FF0000; } /* 범용 class selector */
Button.special { color:#FF0000; } /* class selector와 함께 사용된 Type selector */
Button#b13 { color:#0000FF; } /* ID selector와 함께 사용된 Type selector */
#b13 { color:#FF9933; } /* 범용 id selector */
Panel VBox Button { color:#990000; } /* Descendant selector */
Button:up { color:#FF9900; } /* pseudo selector와 함께 사용된 Type selector */
:up { color:#FF9933; } /* 범용 pseudo selector */
위 내용을 좀더 새부적으로 이해하기 위해 예를 하나 들어보겠다.
Panel Button { color:#DD0000; }
위처럼 CSS Selector를 중첩한 경우 경우 다음과 같은 상황에 있는 컴포넌트에 color가 설정된다.
- Panel 위에 Button
- Panel을 확장한 컴포넌트 위에 Button
- Panel또는 Panel을 확장한 컴포넌트 위에 Button을 확장한 CheckBox와 같은 커스텀 Button
정리하며
Flex 4 CSS의 Selector를 외우기 쉽게 하기 위해 아래를 꼭 기억하자.
- local name : type selector - 컴포넌트 종류
- styleName : class selector - 컴포넌트 스타일명
- identity : id selector - 컴포넌트 ID
- state : pseudo selector - 컴포넌트 상태
- display list : descendant selector - 컴포넌트 디스플레이 리스트 부모/자식 관계
참고글
- CSS Advanced Selectors
- New CSS Selectors are supported in the Flex 4 trunk
- Differences between Flex 3 and Flex 4
- 플렉스4 SDK에서 달라진 점은 - (1)
글쓴이 : 지돌스타(http://blog.jidolstar.com/548)
'스타플(starpl.com)' 카테고리의 다른 글
| 스타플 - 내별 찾기 게임 (2) | 2009/10/22 |
|---|---|
| 새로 리뉴얼되는 스타플 타임라인과 키워드에 대한 내 생각 (5) | 2009/09/29 |
| [Flex 4]Flex 4의 CSS (13) | 2009/07/08 |
| [iPhone,iPod]아이폰,아이팟용 애플리케이션을 출시했습니다 - AppConnect (20) | 2009/05/27 |
| [스타플]내 별에 키우는 스타펫 출시! (4) | 2009/05/22 |
| 새로 리뉴얼된 스타플. 우주여행, 새로운 위젯, 알림이 서비스 소개 (0) | 2009/05/15 |
-
2009/07/08 15:37지돌스타의 생각 Tracked from jidolstar's me2DAY
-
2009/07/08 15:59Flex4 SDK beta review Tracked from jjaeko's Note
글 참 좋네요 ㅎㅎㅎ
뭐~ 이정도 ^^;;; ㅋㅋㅋㅋ
좋은정보 감사합니다...
저는 언제쯤 이런글을 적을수있을까요?? ㅋㅋㅋ
그냥 하나 잡고 파시면 됩니다. ^^;;;
항상좋은글 감사합니다.
감사합니다. ^^
오픈 소스로 처음 공개되었을 때부터 계속 봐왔지만,
아직도 아는 것보다 모르는 것이 더 많은 것 같습니다.
부가가치세 신고하는 달이네요.. 에잉 귀찮..
ㅎㅎ 함께 알아가요
찬익님 같은 사람이 파헤쳐주시면 덩달아 저도... ^^
저는 무언가를 새로 익히는게 워낙 느린 편이라, 자칫 잘못된 정보를 올리게 될 것이 걱정이어서, 아직 블로깅을 시작하지 못하고 있습니다. 대신에, 조만간 'Raise the Issue' 형식의 블로그를 열어보려고 계획중입니다. :')
ㅎㅎ 그렇게 생각하시면 전 아마도 블로그 문 닫아야합니다. ㅋㅋㅋ
틀리면서 배우는거죠 ㅋ
제가 틀리는 것보단, 제가 올린 잘못된 정보가 혹여 안좋은 영향을 줄 것이 걱정되네요 ㅎㅎ
그래서 일단 초기에는, 정보 전달보다는, 이슈 제기를 주로 하여, discussion 활성화를 이끌어보려고 합니다.
일단 discussion이 활성화되면, 제가 잘못된 정보를 올려도, 많은 분들이 빠르게 지적해주시겠지요. :')
참 좋은 글입니다.
Flex4에서는 html처럼 된다고 말로는 들었지만 이렇게 정리 된것은 처음 보네요 ㅋ
감사합니다~
감사합니다. ^^