일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- git 협업셋팅
- JS prompt
- JS localStorage
- JS 화살표함수
- JS clearInterval
- JS 숫자
- JS 형변환
- JS classList
- js 변수
- JS 연산
- JS appendChild
- JS typeof연산자
- JS 스코프
- JS value속성
- JS preventDefault
- JS form
- JS 함수
- CSS기초
- JS 데이터타입
- CSS속성정리
- JS form action
- JS redirection
- JS append
- JS setTimeout
- JS 기초
- JS 타이머기능
- JS null undefined
- JS setInterval
- HTML기초
- JS 삼항연산
공부기록용
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;}...