728x90 반응형 전체 글372 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/Javascript) 자바스크립트에서 CSS style 조절하기 CSS style을 자바스크립트를 통해 직접 줄 수 있다 document.querySelector('선택자').style.background = 'black'; // css의 z-index 등은 자바스크립트의 카멜 표기법으로 표현해주면 된다 document.querySelector('선택자').style.zIndex = 9999; 2021. 4. 2. Javascript) 스크롤 이벤트 (위, 아래 방향 감지) var beforePosition = document.documentElement.scrollTop document.addEventListener('scroll', function() { var afterPosition = document.documentElement.scrollTop; if (afterPosition > 50) { if(beforePosition < afterPosition ){ // 스크롤 위로 } else { // 스크롤 아래로 } } else { // 평상 시 } beforePosition = afterPosition; }); 2021. 4. 1. 이전 1 ··· 56 57 58 59 60 61 62 ··· 93 다음 728x90 반응형