728x90 반응형 웹UI/HTML_CSS26 HTML/CSS) 조금은 많이 어려운..html과 css 1px box-sizing을 border-box로 가져가더라도 해당 섹션에서 가장 큰 영역에 border로 선을 그린 후 하위 영역을 선택한다면 선의 굵기 만큼의 margin이 잡힌다 슬라이드 배너를 위해 onmouseover 속성을 해당 섹션 최상위 영역에 주면서 해결..ㅠ 와 이거 또걸렸다.. 이번에는 그냥 onclick 시에만 border: none; 을 주는 방법으로 해결.......ㅜ 작업은 상단의 좌측 영역 -> 하단의 우측 순서로 코드와 마찬가지로 영역은 좌->우 , 위->아래 순서로 쌓인다 작업을 차곡차곡 하면 뒤에 신경 쓸 일이 적다 3차원의 함정 ** css를 적용할수록 html이 무너진다면 3차원 속성을 갖는 영역 위주로 살피면 됨 밸런스 게임 css의 3차원 속성을 마음껏 쓰려면 h.. 2021. 4. 2. 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. 이전 1 2 3 4 5 ··· 7 다음 728x90 반응형