개발 공부일기

*영어대사를 입력해주세요 생성(submit)을 눌렀을때 콘솔창에 카운터1 카운터2 누를때마다 숫자가 올라감 const Form = (props) => { const counterState = React.useState(1); const counter = counterState[0]; const setCounter = counterState[1]; console.log("카운터", counter); function handleFormSubmit(event) { event.preventDefault(); console.log("폼 전송됨"); setCounter(counter + 1); } return ( 생성 ); } -이때 자바스크립트 문법으로 빨간글씨를 단축해서 기입 const counterState ..

이벤트 : 이미지에 하트 버튼을 눌렀을때 콘솔창에 찍히기 const MainCard = ({ img }) => { function handleHeartClick() { console.log("하트 눌렀음"); } function handleHeartMouseOver() { console.log("하트 스쳐 지나감"); } return ( 🤍 ); -submit하면 리프레시 되는게 디폴트 const Form = (props) => { function handleFormSubmit(event) { event.preventDefault(); console.log("폼 전송됨"); } return ( 생성 ); }

(강의: 인프런 / 만들면서 배우는 리액트 : 기초 / 진유림 - 유료강의입니다.) *기초 이렇게 연결을 시켜줘야함 작성방법 const app = ( 1번째 고양이 가라사대 2번째 고양이 가라사대 ); 이 app이라는 변수안에 나타낼 아이들을 div로 묶어서 기입해야함 const 여기다가그려 = document.querySelector('#app') ReactDOM.render(app, 여기다가그려); *html body 에 div id="app"을 심어줘야 저 queryselector가 구현 *컴포넌트란 반복되는 요소들을 말하고 꼭 대문자로 시작하며 함수로 만들수있다. -이름을 붙이면 안녕이라고 해주는 함수가 있다고 가정 function sayHello(name){ return '안녕 +' + name..

공부한 강의 : https://www.youtube.com/watch?v=zN9YVbieTSQ /오쌤의 니가스터디 (왕초보에게 적합) https://www.youtube.com/watch?v=KF6t61yuPCY / 코딩앙마 (일반 초보에게 적합) https://www.youtube.com/watch?v=OCCpGh4ujb8 / 드림코딩 엘리 (어느정도 지식이 필요) *완전언어가 아니여도 데이터 출력이 가능한 아이들 alert(); 경고창에 값 표현 document.write(); body 내부에 값 표현 console.log(); 콘솔창에 값 표현 Ex) alert('값'); - alert('안녕하세요'); *태그도 문자열로 쓸수있다 document.write(' ); *키워드는 js가 특별한 의미를 ..

#contents .notice_gal h3{position: absolute; left: 0; top: 0; width: 100px; height: 30px; padding: 5px 10px; background: #ccc; color: #fff; text-align: center; cursor: pointer;} #contents .notice_gal h3.r100{left: 120px;} #contents .notice_gal h3.on{background: peru;} #contents .notice_gal ul{position: absolute; left: 0; top: 40px; display: none;} #contents .notice_gal ul.on{display: block;} .ga..

@charset "utf-8"; *{ margin: 0; padding: 0; list-style: none; font-family: '맑은 고딕'; color: #222328; } body{ width: 1000px; } a{color: #222328; text-decoration: none; } .clearfix{content: ''; clear: both; display: block;} #header{ float: left; position: relative; height: 650px; width: 200px; background: #eee; z-index: 999; } #header h1{position: absolute; left: 0; top: 30px;} #header .gnb{positio..

2뎁스 자체만 내려오면 $('.submenu').hide(); $('.nav > li').mouseover(function(){ $('.submenu').stop().slideDown(); }); $('.nav > li').mouseleave(function(){ $('.submenu').stop().slideUp(); }); 선택한 1차메뉴의 2뎁스만 내려오면 $('.submenu').hide(); $('.nav > li').mouseover(function(){ $(this).children('.submenu').stop().slideDown(); }); $('.nav > li').mouseleave(function(){ $(this).children('.submenu').stop().slideUp ..

1. 좌에서 우로 슬라이드 ---------------html----------------- --------------css-------------------- #imgslide{height: 300px;} .imgs{position: relative; overflow: hidden; height: 300px; width: 1200px; } .imgs > img{width: 100%; position: absolute; transition: all 2s;} ----------------js----------------- start(); var imgs = 2; var now = 0; function start(){ $(".imgs>img").eq(0).siblings().css({"margin-left"..

----------------html---------------------- x 모달 레이어 팝업창 ------------------css----------------------- .modal{position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 100; display: none;} .modal .modal_inner{width: 800px; height: 600px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;} .modal button{wi..

- 2차메뉴 슬라이드 구현 -배너 이미지 3개 왼쪽으로 슬라이드 -html 두개 연결해서 레이어팝업 > html에 따로 doctype이랑 주소 연결해줘야 작동 -2차메뉴 -모달팝업 addclass로 표현 -이미지5개짜리 위쪽으로 슬라이드 -모달팝업 -fade모드로 슬라이드 구현