공부기록용

Transition속성을 서서히 변화시키는 속성으로 CSS 프로퍼티의 값이 변화할 때 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 한다.transition: property timing-function duration delay | initial | inheritproperty: transition을 적용시킬 속성을 지정duration: transition의 진행 시간을 지정timing-function: transition의 진행 속도를 지정delay: transition의 시작을 연기📌속성 기입 순서transtion: property duration timing-function delay 속성을 한 번에 정할 수 있다.띄어쓰기로 구분하며, 숫자로 속성 값을 지정하는 숫자가 두 개인 경우 dura..

innerHeight: window 가로 스크롤 막대(있는 경우)의 높이를 포함하여 창의 내부 높이를 픽셀 단위로 반환한다. innerWidth: window 세로 스크롤 막대(있는 경우)의 너비를 포함하여 창의 내부 너비를 픽셀 단위로 반환한다.   ➕ 요소의 크기 값가져오기  clientWidth, clientHeight: padding을 포한한 요소의 크기 높이/너비 값을 가져온다. 스크롤 막대와 테두리를 뺀 창 너비 혹은 높이를 구해야 하는 경우 루트  요소의 clientWidth, clientHeight 속성을 사용한다. console.log(element.clientWidth);console.log(element.clientHeight);offsetWidth, offsetHeight: p..

position: sticky사용시 주의할 것 만들고자 한 header✔️두개의 영역으로 나누어 만들기✔️스크롤하면 second-header가 상단에 고정되는 ui를 만들고 싶었다.   🧐그래서 안에 div로 영역을 두개로 나누고 second-header에 position: sticky를 부여해주었는데 원하는대로 적용이 되지 않고 스크롤시 그대로 밀려나오도라,,! ....../* Default Style*/body { font-family: "Pretendard", sans-serif; height: 100%; background-color: $color-white; color: $color-black;}a { color: $color-black;}.wra..