9. Other Assorted Useful CSS Properties

92. Opacity & The Alpha Channel

 

 

rgba의 alpha channel을 통해 opacity를 조절할 수 있다.

 

0에 가까울수록 투명하고 1에 가까울수록 불투명하다.

 

아니면 opacity property를 사용해서 조절할 수도 있다.

 

 

app.css

 

div {
    display: inline-block;
    width: 500px;
    height: 260px;
    padding: 120px 0px;
    background-color: black;
    color: white;
    font-size: 100px;
    text-align: center;
}

#alpha {
    background-color: rgba(0, 0, 0, 0.1);
}

#opacity {
    opacity: 0.3;
}

 

result

 

Black color, opacity 0.1 / 0.3

 

 

 

93. The Position Property

 

 

static / relative / absolute / fixed / sticky 등이 있다.

 

position - CSS: Cascading Style Sheets | MDN

 

 

 

94. Transitions

 

 

transition: property name | duration | easing function | delay

 

hover같은 event와 함께 쓰여 변하는 과정을 설정한다.

 

transition - CSS: Cascading Style Sheets | MDN

 

 

 

95. The Power of CSS Transforms

 

 

transform: transform-function

 

block에 rotate, scale, translate, skew 등을 할 수 있다.

 

 

transition - CSS: Cascading Style Sheets | MDN