Front-End Developer

누구나 애니메이션 만드는 공식

애니메이션 만드는 공식 one-way 애니메이션을 만드는 공식을 알아보자. one-way 애니메이션이란? A→B처럼 한방향으로 흘러가는 애니메이션 예를들어 아래와 같은 경우가 있겠다. 투명도를 0 → 1 로 만들고싶을 때 margin left 10px → 300px font size가 15px → 30px 모든것은 세가지 기본단계의 원리만 알면 된다. 첫번째 시작스타일 최종스타일 을 CSS로 만들어놓는다. 두번째 자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다 세번째 시작스타일에 transition을 추가한다. 예제 1 모달창이 toggle 될 때 transition 주기 첫번째 단계 시작스타일 만들기 .black-bg { visibility: hidden; opacity: 0; } 최종스타일 만..

함수: 기본중의 기본 정리하기

함수의 기본 함수는 사용을 위해 만들어놓는 것이고, 누군가 호출하지 않으면 아무일도 일어나지 않는다. function add(a,b){ return a + b ; } const result = add(1,2) console.log(result); >3 함수의 이름을 함수를 잘 나타내줘야하고, 인자값은 무슨 타입인지 잘 나타내줘야 한다.(숫자인지? 스트링인지? 배열인지?) 함수와 이름과 인자값은 다 내가 지금 입력하는거다!! 숫자를 인자값으로 받아올때는 보통 a,b라고 쓴다. function myName(firstName, lastName) { return `제 이름은 ${firstName}${lastName} 입니다.`; } let yourName = myName('허', '지현'); console.lo..

preventDefault속성으로 우클릭 제어하기

오른쪽 클릭을 막고싶을 땐 'contextmenu'라는 이벤트가 생길 때 preventDefault속성값을 넣어주면 된다. contextmenu란 일반적으로 유저와의 상호작용에서 생겨나는 메뉴창같은 것을 칭하고, 대표적으로 '오른쪽 클릭' 이 그것이다. https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event Element: contextmenu event - Web APIs | MDN The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse ..

(DOM)click이벤트로 HTML요소 텍스트와 CSS스타일 변경하기

const radioRow = document.querySelector('#cheat0-option1'); const radioRowReverse = document.querySelector('#cheat0-option2'); const radioColumn = document.querySelector('#cheat0-option3'); const radioColumReverse = document.querySelector('#cheat0-option4'); const flexDirection = document.querySelector('.day'); const dayBox = document.querySelector('.cheat0'); radioRow.addEventListener('click', ..

하드코드->forEach->이벤트 위임 [점점 나아지는 코드 맛보기]

버튼이 클릭될 때 마다 해당색깔로 상자의 background color가 변화되게 해보자. 전제조건 버튼을 다시 클릭하면 색깔이 없어져야한다. const colorBox = document.querySelector('.color'); const buttons = document.querySelector('.buttons'); buttons.addEventListener('click', (e) => { if (e.target.className === 'red-button') { colorBox.style.backgroundColor = 'red'; } else if (e.target.className === 'yellow-button') { colorBox.style.backgroundColor = 'ye..

blur와 click을 같이 쓸 때, 내 맘대로 안되는 이유

드롭박스를 만들면서, 꼭 옵션중 하나가 클릭되었을 때 만이 아니라 그냥 바깥공백을 클릭했을 때에도 저 드롭박스가 사라지게 하고싶었다. 그래서 드롭다운 버튼에 blur이벤트를 걸어 버튼이 포커스를 잃을 때에도 드롭박스가 사라지게 코드를 작성했다. 문제 저 드롭박스 안에 각각의 옵션들은 click이벤트가 발생했을 때 그 안에있는 text가 버튼 안에 들어가도록 해놨는데, blur이벤트를 추가한 뒤로는 그게 적용이 되지 않았다. 원인 이벤트가 일어날 때에는 아래의 순서를 가진다. mousedown blur mouseup click 사실 블러를 빼고 생각하면, 마우스가 눌러지는 순간(mousedown)이 그 어떤 이벤트보다 먼저 일어나고, 눌렸다 떼지는 순간(mouseup)이 일어난 뒤에 이 두개를 마무리한 모..