콘텐츠로 건너뛰기
Home » css

css

Textual 강좌 3 – 위젯과 DOM 쿼리

위젯은 화면의 일정 영역을 관리하는 역할을 담당하는 구성 요소라고 정의된다. 위젯은 앱이 하는 것과 똑같은 방식으로 이벤트에 응답하고, 하위 위젯을 포함하여 계층 구조를 이룰 수도 있으므로 일종의 미니앱이라고 생각할 수 있다. DOM 쿼리 Textual에서 위젯의 UI 스타일은 CSS를 통해서 설정하게 된다. 해석한 CSS 내의 특정한 스타일을 위젯에 적용하기 위해서는 CSS 셀렉터로부터 그에 매칭하는 위젯을 선택할 수 있어야 함을 의미한다. 따라서 Textual에는 웹브라우저와 마찬가지로 DOM 쿼리를 통해 요소를 찾는 기능을 기본적으로 제공한다. query_*로 시작하는 메소드들을 사용하는데, 가장 많이 사용하는 메소드는 query_one… 더 보기 »Textual 강좌 3 – 위젯과 DOM 쿼리

SASS 간단정리

SASS

문법

모든 문법 작성은 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;
        }
    }
}

더 보기 »SASS 간단정리

CSS3 Transition 속성

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 속성