목록CSS (4)

프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

가상 클래스 선택자(Pseudo-Class Selector) - :active, :focus

:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. :active 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요. HTML 삽입 미리보기할 수 없는 소스 input[type=button]:focus { background-color : blue; } 이와같이 button에 focus인 ..
CSS 2022. 7. 1. 13:04
:nth-child() 사용법

html 문서에서 같은 형태의 요소들이 반복될 때, 이 요소들을 특정 순서에 따라 CSS속성을 다르게 지정하고 싶을 때, nth-child 선택지를 사용할 수 있다. HTML 첫째 둘째 셋째 넷째 다섯째 CSS p:nth-child(2) { color: blueviolet; } ()괄호 안의 숫자는 0부터 시작하는 숫자가 아니고 1부터 시작한다.
CSS 2022. 3. 22. 19:59
animation

animation과 transition의 차이 : animation은 keyframes 추가가 가능하다. *keyframes - 변화가 있는 지점 - 어디든지 다 추가 가능
CSS 2022. 1. 7. 15:08
transform-hover

Transform : CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. hover : 마우스 커서를 올렸을 때 효과 .box:hover { transform: scale(2); } => 2배로 커진다 box:hover { transform: scale(2) skew(10deg); } => 크기 2배, 10도의 각도로 비틀기 * skewX/Y : 30px; X는 가로로 이동 Y는 세로로 이동 .box:hover { transform: scale(2) translate(30px, 10px); } => 크기 2배, translate : 이동 (가로,세로) * translateX/Y : -+30px; X는 가로로 이동 -는 위로 이동 Y는 세로로 이동..
CSS 2022. 1. 2. 20:43
Prev 1 Next