ES6 새로운 연산자
+=, -=, *=, /= 변수의 값을 업데이트할 때, 변수를 지속적으로 기재하는 번거로움을 줄이도록 ES6부터 도입된 표현식이다. let i = 1; […]
+=, -=, *=, /= 변수의 값을 업데이트할 때, 변수를 지속적으로 기재하는 번거로움을 줄이도록 ES6부터 도입된 표현식이다. let i = 1; […]
`${}` ES6부터 도입된 문자 표기 문법. 백틱과 ${} 사인을 이용해 문자열과 변수를 자유롭게 사용할 수 있다. 파이썬에서 fstring 같은 느낌. const
CSS Counter ol > li 를 나만의 디자인으로 만들고 싶을 경우에 CSS 의 counter 와 before 가상선택자를 이용할 수 있다.
window.scrollY 뷰포트 최상단에서부터 현재 스크롤까지의 거리를 구하고 이용하기 // 현재 스크롤까지의 거리를 정수로 구하기 const currentY = Math.round(window.scrollY); function scrollEvent()
function A(B) 클릭한 element 의 id 값을 쉽게 찾기 <body> <!– button 클릭 시 beHappy1 를 실행하기 –> <button onclick="beHappy1()"
nextElementSibling 특정 element 의 바로 다음 형제 노드를 찾는 속성 // 1. [ 기준 element ] 찾기 const olderBro =
parseFloat() string 에서 문자를 제거한 후 number 로 변환하는 함수 중 하나 // parseFloat(대상); let default = '100%'; default =
style.property 대상의 CSS를 수정하는 JS 함수 // 대상.style.property = "value" element.style.display = "flex";
addEventListener 대상에 대한 event 를 기준으로 function 을 실행하는 함수 // 대상.addEventListener("이벤트", "function 이름") heyKi.addEventListener("click", beHappy);
1. 기본 순서 말풍선 컨테이너 만들기 말풍선 안에 p 만들고 스타일링하기 Image Sprite 사용해 말꼬리 붙이기 hover 상태일 때만 보이도록
1. a 페이지 이동만 시켜줄 경우 사용하기 링크로 사용할 때는 underline 을 제거하지 말기 text-underline-offset 또는 text-decoration-color 을 통해 customize