유용한 CSS 속성들

불투명도와 알파 채널

알파채널

#rgba {
    width: 50%;
    height: 50%;
    background-color: rgba(255,255,255,0.7)
}

• 알파채널을 추가한 rgba
• 0~1까지 존재(0 : 투명함, 1 : 투명x)
• 헥스에서는 00~FF(rgba가 더 자주 쓰임)
• 배경색에만 영향을 주고 텍스트에는 영향을 주지 않는다.

불투명도

#opacity {
    width: 50%;
    height: 50%;
    background-color: yellow;
    opacity: 0.3;
}

• 특정 요소에 지정해서 해당 요소나 전체 요소의 투명도를 결정하는 특성
• 0 : 투명함, 1 : 투명하지 않음
• 버튼 등 콘텐츠 또한 영향을 받는다.(전체 요소가 영향을 받음)

위치 속성

• static, relative, absolute 등
• 문서 내에서 요소의 위치를 설정

static

#static #middle {
    position: static;
    top: 100px;
}

• 기본적으로 적용되어 있는 값