위젯은 화면의 일정 영역을 관리하는 역할을 담당하는 구성 요소라고 정의된다. 위젯은 앱이 하는 것과 똑같은 방식으로 이벤트에 응답하고, 하위 위젯을 포함하여 계층 구조를 이룰 수도 있으므로 일종의 미니앱이라고 생각할 수 있다. DOM 쿼리 Textual에서 위젯의 UI 스타일은 CSS를 통해서 설정하게 된다. 해석한 CSS 내의 특정한 스타일을 위젯에 적용하기 위해서는 CSS 셀렉터로부터 그에 매칭하는 위젯을 선택할 수 있어야 함을 의미한다. 따라서 Textual에는 웹브라우저와 마찬가지로 DOM 쿼리를 통해 요소를 찾는 기능을 기본적으로 제공한다. query_*로 시작하는 메소드들을 사용하는데, 가장 많이 사용하는 메소드는 query_one… 더 보기 »Textual 강좌 3 – 위젯과 DOM 쿼리
모든 문법 작성은 SCSS 기준으로 작성한다.
중괄호 속에 하위 요소에 대한 스타일을 지정하는 형태로 네스팅한다.
#main p {
color: #00ff00;
width: 79%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
// complied:
#main p {
color: #00ff00;
width: 79%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
블럭 내에서 &를 사용하면, 블럭의 주인 즉 현재 스코프의 부모 요소를 참조하게 된다.
#main {
color: black;
a {
font-weight: bold;
&:hover { // >> a:hover
color: red;
}
}
}
CSS3의 transition 속성은 동적으로 CSS 속성값 (색상, 크기, 투명도 등)을 바꿀 때 플래시나 자바스크립트의 도움없이 자연스러운 애니메이션 효과를 만들 때 사용한다. transition 속성은 다시 property, duration, timing-function, delay의 4가지 세부 속성을 가지며, property에서 지정한 속성의 값이 변경될 때 애니메이션을 통해서 자연스럽게 변경된다. property – 애니메이션이 적용될 속성 (width, height, background-color 등) duration – 애니메이션 지속 시간 (0.4s 는 0.4초를 의미) timing-function – 가속곡선 (liniar | ease | ease-in | ease-out | ease-in-out 등) delay – 애니메이션이 시작되기 전 딜레이 css… 더 보기 »CSS3 Transition 속성