전체 글 (137) react 2022. 5. 20. 14:10 [react]클릭 시 숫자 증가 import React,{useState} from 'react'; import './App.css'; function App() { const [count2, setCount2] = useState(0); // const [현재값 , 변화될 값] = useState(초기값) const inc = () => { setCount2(count2 + 1) } return( state:{count2} 증가 ) } export default App; js 2022. 5. 20. 10:39 [js]제이쿼리 이벤트 연속 등록 여러개 동일한 객체, 동일한 함수 / 다른 이벤트 실행 $("div").on("click mouseenter mouseleave",function(){ $("p").toggleClass("on") }) /* 위와 같은 값 */ $("div").click(function(){ $("p").toggleClass("on") }) $("div").mouseenter(function(){ $("p").toggleClass("on") }) $("div").mouseleave(function(){ $("p").toggleClass("on") }) hover는 안됨 동일한 객체 / 다른 이벤트, 다른 함수 실행 $("div").click(function(){ $("p").text("클릭") }) $("div").mouseen.. react 2022. 5. 19. 11:51 [react]리액트 시작하기 node.js 다운로드 후 설치 react 설치 1. vs 코드에 설치할 폴더 열기 2. 터미널 실행 > npx create-react-app 폴더명 // 현재 열려있는 폴더 생성 희망 시 npx create-react-app . 으로 가능 3. localhost:3000 인터넷창이 뜨면 설치 완료 로컬 주소 : localhost:3000 미리보기 터미널 > npm start 오류 발생 시 npm install 후 npm start * 연결 끊기 터미널 > 컨트롤 c 새로운 프로젝트 생성 터미널 > npx create-react-app 폴더명 ex)npx create-react-app mashup-todolist 참고1 https://www.youtube.com/watch?v=AoMv0SIjZL8&lis.. js 2022. 5. 17. 16:01 [js]서브지앤비 가로100% sub_gnb width 100% $("nav ul li").mouseenter(function(){ let idx = $(this).index(); $(".sub_gnb>li").removeClass("on").eq(idx).addClass("on"); }); $(".sub_gnb").mouseleave(function(){ $(this).find("li").removeClass("on"); }) See the Pen subgnb width100% by sangmok-ye (@sangmok-ye) on CodePen. js 2022. 5. 13. 17:04 [js]addClass 함수로 지정하기 See the Pen add_on클래스 함수 지정 by sangmok-ye (@sangmok-ye) on CodePen. js 2022. 5. 12. 10:00 [js]swiper 스와이퍼 기본 구조 및 속성 See the Pen swiper 기본 by sangmok-ye (@sangmok-ye) on CodePen.// 슬라이드 뷰 갯수 설정 slidesPerView: 1 // 슬라이드 간 여백 설정 spaceBetween: 10 // 반응형 슬라이드 설정 breakpoints: { 0 768: { 768 }, 1024: { 1024 },} // pager 페이저 설정 pagination: { el: ".swiper-pagination", clickable: true, } // 스크롤바 설정 *loop에서는 사용 불가scrollbar:{ el:".swiper-scrollbar", draggable : true} // btn 설정 navigation: { ne.. css 2022. 5. 11. 09:57 [scss]유용해보이는 scss 모음 See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen. See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen. css 2022. 5. 10. 13:48 [scss]기본 문법 정리 SCSS 기본 작성법 - 중괄호를 활용하여 부모자식 관계를 표현하고 & 사용 시 부모태그를 가져옴 // 입력 ul{ width: 100px; li{ height: 100px; &::before{ content: ""; } } &::after{ background: #fe0; } } //출력 ul { width: 100px; } ul li { height: 100px; } ul li::before { content: ""; } ul::after { background: #fe0; } $를 활용한 기본 변수 설정 // 입력 $main_color : #fe0; div{color: $main_color; } // 출력 div{color: #fe0; } @import "파일명"을 통한 파일 불러오기 @import.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 18 다음