* 스크롤 이벤트 스크롤 이벤트는 마우스 휠을 스크롤할때 발생하는 이벤트이다. 해당 이벤트를 사용하면 웹페이지에서 유용한 효과나 애니메이션을 보여줄 수 있다. * 가로 스크롤링 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 index.html 파일을 위와 같이 작성한다. 리스트 아이템이 20개가 있다. body{ background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg); } .container{ display: flex; width: 80%; height: 200px; margin: ..

* 사용자 입력 이벤트 처리하기 index.html 파일을 위와 같이 작성하자! 사용자 입력을 처리하기 위한 input 요소와 배경색상을 변경하기 위한 div 요소를 정의한다. body{ margin: 0; padding: 0; background: #0e1111; } .color-box{ background-color: #0e1111; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } #color-input{ all: unset; width: 300px; height: 50px; border: 2px solid lightgreen; padding: 10px; border-radius: 15px; color: lightgreen; fo..

이벤트 처리하기 참고문서 이벤트 입문 - Web 개발 학습하기 | MDN 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주 developer.mozilla.org * 이벤트의 개념 이벤트는 특정 사건이나 행동을 의미한다. 브라우저에서의 이벤트는 사용자가 버튼을 클릭한다든지 입력창에 뭔가를 입력하는 등의 사건을 가리킨다. * 이벤트핸들러 함수 사용자가 버튼을 클릭한더던지 입력창에 뭔가를 입력했을때 이를 처리하는 로직을 이벤트 핸들러 함수라고 한다. * 이벤트핸들러와 이벤트루프 (비동기 처리) 이벤트핸들러 함수는 자바스크립트 엔진에 의하여 이벤트루프에..

이벤트 처리 참고문서 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org * 기본적인 개념 open 일반적인 HTML 문서에서 이벤트핸들러 함수를 등록할때는 위와 같이 작성한다. (인라인 이벤트등록 방식) open 리액트에서는 이벤트 이름에 카멜케이스를 사용한다. 그리고 JSX 문법을 이용하여 문자열이 아닌 함수로 등록한다. * 이벤트핸들러 함수의 this import './App.css'; import React, { Component } from 'react'; class App extends Component { showAlert() { console.log(this) alert('this is alert..

header sidebar contents footer body { padding: 0; margin: 0; text-align: center; } #container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: tomato; } #header, #sidebar, #contents, #footer { background: skyblue; margin-bottom: 5px; } #header { height: 50px; } #body { display: flex; flex-grow: 1; } #sidebar { width: 400px; flex-shrink: 0; margin-right: 5px; } #co..

* 기본 구조 만들기 컨텐츠 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #entire { width: 100%; height: 100vh; } #contents { background: tan; height: 120vh; text-align: center; line-height: 200vh; font-size: 2rem; } #container { width: 100%; height: 70px; background: tomato; text-align: center; position: fixed; bottom: 0; z-index: 1; font-size: 0; /* inline-block의 기본 마진값 제거*/ } .item { width: 33.2%; he..

* 위쪽에 중앙정렬하기 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; line-height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-width: 800px)..

아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 아이템 6 아이템 7 아이템 8 아이템 9 아이템 10 body { padding: 0; margin: 0; } #container { width: 40%; margin: 0 auto; background: tomato; text-align: center; } .item { width: 30%; height: 300px; background: skyblue; margin: 1%; display: inline-block; } @media screen and (max-width: 1100px) { #container { width: 80%; } .item { width: 30%; margin: 1%; } } @media screen and (max-wid..

* 칼렘 레이아웃 예시 포토1 포토2 포토3 포토4 포토5 포토6 포토7 포토8 포토9 포토10 포토11 포토12 포토13 포토14 포토15 포토16 포토17 포토18 포토19 포토20 포토21 포토21 포토23 포토24 포토25 포토26 포토27 포토28 포토29 포토30 body { padding: 0; margin: 0; } #photo-box { width: 60%; columns: 4; margin: 50px auto; } .photo { width: 100%; height: 300px; margin-bottom: 10px; background: tomato; display: inline-block; /* 컬럼 짤림 방지*/ } .photo img { width: 100%; height: 100..

리액트 훅 참고문서 1 Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 훅 참고문서 2 Hook 개요 – React A JavaScript library for building user interfaces ko.reactjs.org * 리액트 훅의 개념 리액트 버전 16.8 부터 새로 추가된 기능이다. 기존의 함수형 컴포넌트는 props 만 전달받아 렌더링할 뿐 state 를 사용하여 상태값을 변경할 수 없었다. 또한, 라이프사이클 메서드도 사용하지 못하였다. 함수형 컴포넌트에서도 이를 가능하게 하는 것이 바로 리액트 훅이다. * 리액트 훅을 사용하는 이유 상태관련 로직을 독립적으로 분리하기 위함이다..