공부기록용

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..

🧐mixin을 사용할 때도 함수처럼 인자를 전달해서 include시 사용할 수 있는데 인자에 기본값을 설정하면 사용시 따로 값을 전달하지 않으면 mixin생성시 작성한 인자의 순서에 관계없이 기본값이 적용된다고 한다. 근데 실제로 작성해보는데 계속 순서에 맞게 값이 들어가서 알맞는 값으로 들어가지 못해 제대로 된 적용이 되지 않았다. 난 우ㅐ,,,왜 안되지,,,,,,,,// Variables$color-white: #fff;$color-black: #000;$color-primary: #00BC70;$font-size: 14px;// 텍스트 스타일 믹스@mixin text-style($font-size, $font-weight: 400, $color: $color-black) { font-size: ..

❓script의 권장되는 위치는 하단이라는 것을 처음에 배워서 인식은 하고 있지만 다른 위치에서 사용했을 때 올바르게 사용하는 방법도 알고 싶었다.1. "DOMContentLoaded" 이벤트는 HTML 문서의 모든 DOM 요소가 완전히 로드되고 파싱되었을 때 발생하는 이벤트로 즉, 스타일시트, 이미지 및 하위 프레임 로드가 완료되기 전에 발생시킨다.   ➕defer, async➕ 외부에서 script를 작성하고 head안에서 연결을 해줄 때 사용하는 속성인데, 개인적으로 이 속성들을 사용했을 때 이유는 정확하지 않지만 원하는 순서로 작동하지 않았던 기억들이 많아서 사용하지는 않는 방법이라 좀 더 공부가 되야 할 듯 한 부분이다.2. 제일 하단 요소를 먼저 다 읽은 후 작동되도록 가장 하단에 작..

@extend기존의 스타일을 상속하고자 하는 경우에 사용한다.@extend 선택자; Initial button --> order add chcekout /* style.scss *//* Google Web Font - "Montserrat", sans-serif*/@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap");*{ font-family: "Montserrat", sans-serif;}body{ display: grid; justify-content: center; align-items: center; height: 100vh;}...