728x90 반응형 웹UI46 HTML/CSS) position과 z-index로 겹쳐진 영역의 순서 조정이 안될 때 absolute, relation 등의 3차원의 특징을 갖는 속성 값을 사용하여 z-index로 순서를 조절하고 싶은데 고정되는 경우에 뒤에 위치할 영역에 opacity 값을 주어 순서를 변경할 수 있다 opacity : 투명도를 결정하는 값, 0~1의 값을 가지며 0이면 display: none과 같이 보이지 않지만 영역을 차지함 1은 기본 값, 0에 가까울수록 흐려짐 opacity : .99; ** z-index는 해당 영역이 속해있는 가장 큰 영역의 z-index 값을 상속받는다 -> 자식 노드에 큰 z-index 값을 주거나 !important를 주더라도 상위의 z-index 값을 받게됨 **postion: relative와 absolute가 혼재되어 있다면 relative 쪽의 z-index가 .. 2021. 4. 2. HTML/CSS - animation-fill-mode (애니매이션 실행 후 멈추기) .interview li{ position: relative; left: 0; animation: slider 1s; animation-fill-mode: forwards; /* 애니매이션 실행 후 상태에서 정지 */ } @keyframes slider{ to{ transform: translateX(-100%); }from{ left: 0px; } } 2021. 3. 29. HTML/CSS - position: 속성을 사용하여 가운데 정렬 position: absolute; left: 50%; transform: translateX(-50%);left -> 전체 넓이에 비례해서 50% transform: translateX -> 요소의 크기에 비례해서 -50% 2021. 3. 26. HTML/CSS - html label태그 label 태그 input영역의 이름을 클릭해도 input과 같이 작동하게 할 수 있다 label 태그의 for 속성 값이 같은 값을 같는 id를 찾는다 2021. 3. 26. 이전 1 2 3 4 5 6 ··· 12 다음 728x90 반응형