유용한 CSS기능

불투명도와 알파채널

투명도를 적용하고 싶을 때는 rgb에 a(알파)가 더해진 rgba를 검색하여 사용한다.

위치 특성

static : 요소에 static을 부여하면 그 자리에 그대로 박는다.
relative : 요소에 relative를 부여하면 오프셋을 부여할 수 있다.
absolute : 부모의 위치 특성에 따른 상대적 위치 (mdn참조)
fixed : 초기 컨테이닝 블록의 상대적 위치 (mdn참조)
sticky : 스크롤 하면 스티커처럼 따라오는 요소

Transition

.circle{
	width: 300px;
    height: 300px;
    background-color: blue;
}
.circle:hover {
	background-color: cyan;
    border-radios: 50%
}

어떤 요소에 css를 위처럼 적용하면 마우스를 요소에 가져다 대는 순간 모양과 색상이 순식간에 변하게 된다.

.circle{
	width: 300px;
    height: 300px;
    background-color: blue;
}
.circle:hover {
	background-color: cyan;
    border-radios: 50%
    transition: 1s;
}

위처럼 transition을 적용하면 1초동안 스무스하게 변화하게 된다.
(이것은 가장 간단한 예시다. 다양한 사용 예시는 mdn을 참조)

Transforms

요소를 회전, 확대, 축소, 늘리기, 기울이기, 원근 왜곡등을 할 수 있고, 페이지를 가로지르게 할 수도 있다. (포토샵 같은 기능)
3d적인 움직임도 가능하며 기능을 구현하고자 할 때 mdn등의 문서를 참조하여 구현하면 된다.

배경특성

자주쓰이는 것

• 배경 이미지 적용 : 이미지를 꽉 차게 적용하거나, 박스에 맞게 적용하거나, 여러번 반복되게 하는 등 세밀한 설정이 필요하다.

Google Fonts

구글링을 통해 적용법을 알아본다. (직접 다운로드하는 방식이 아닌 url방식을 통해 embeded한다.)