css

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 속성은 동적으로 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 속성