set(activeTabAtom, tab);= tab에 따른 activetabAtom을 변경한다. // UI 관련 작업 (handle 붙임)handleAddProductAtom // 폼 보여주기handleDeleteProductAtom // 삭제 후 알림 등// 데이터 작업 (handle 없음)addProductAtom // 실제 추가deleteProductAtom // 실제 삭제= 결국 onclick/onSubmit 처럼 버튼 같은 곳에서 사용되는 함수는 handle를 붙이고 데이터가 조작되는 함수에는 붙이지 않는다.= toggle /reset 에는 예외 처리가 될 수 도 있다.

animation-name : 좌우왔다갔다; animation-duration : 1s; animation-timing-function : linear; /*베지어 주기*/ animation-delay : 1s; /*시작 전 딜레이*/ animation-iteration-count : 3; /*몇회 반복할것인가*/ animation-play-state : paused; /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/ animation-fill-mode: forwards; /*애니메이션 끝난 후에 원상복구 하지말고 정지*/}​ %와 transform을 잘 사용한다면 여러가지 애니메이션을 사용할수 있다. 해당 애니메이션을 적용하고 싶을 땐  좌우로 하는 애니메이션@keyframe..

텍스트가 너무 길때 ...처리하는 방법을 알아보자. text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical 원하는 곳의 class에 해당 css 넣어 주면 끝난다.wekit-line-clamp를 3으로 변경하면 세번째 줄 이상은 ...처리가 된다    vh 사용할때 모바일에서 오류가 날 경우 해결방안 vh 사용할때 모바일에서 오류가 날 경우 해결방안모바일에서는 상단의  url과 하단의 뒤로가기 앞으로가기가 스크롤에 따라 나타나기도 없어지기도 한다...

tap 만들기1. 제이쿼리 cdn 가져와서 사용하기$(document).ready(function() { function setupTab(tabMenuSelector, tabContentSelector) { // 초기 설정: 첫 번째 탭만 보이도록 설정 $(tabContentSelector).hide(); $(tabContentSelector).first().show(); // 탭 메뉴 클릭 이벤트 등록 $(tabMenuSelector + " li").click(function() { $(tabMenuSelector + " li").removeClass("on"); $(this).ad..

이제 javascript로 해당 data이름을 통해 가져와서 컨트롤 할 수 있다.      자바스크립트 탭만들기 html 코드에 data 값넣어서 제어하기 html 코드에 data 값넣어서 제어하기이제 javascript로 해당 data이름을 통해 가져와서 컨트롤 할 수 있다.ineedurhelp.tistory.com

npm create vite@lastest오늘은 react 2번째 공부입니다. react를 시작하기 전에 설치부터 해야겠죠? react 설치방법을 알려 드리도록 하겠습니다. 제가 설치하는 방법은 vite를 사용해서 설치합니다.    vite 공식문서 바로가기react 공식문서 바로가기 왜 react 앱이라고 하는가?react 설치 방법은?react 폴더별 설명   왜 react앱이라고 하는가?웹 브라우저에서 동작하는 애플리케이션 같아서 그렇게 부르고 있습니다. react 설치 방법은?- 아무 폴더 생성- vs code에서 해당 폴더 열기로 열어주기- 새 터미널 열기- *vite와 함께 react 설치해 주기 *vite:차세대 프런트엔드 개발자 툴*기타 도구 설치 및 설정하는 것이 입문자에게 어렵기 때문에..

안녕하세요. react를 하고자 하는 개발자입니다. 제가 배운 것을 토대로 가르쳐 드리도록 하겠습니다. react 공식문서에 더 욱 정확하게 적혀 있으니 함께 읽으시면 좋을 것 같습니다.react 공식문서 바로가기 react 다운로드하기 react란?- META 즉 페이스북에서 개발한 오픈소스입니다. 커다란 웹 서비스 *UI를 개발하기 위해 만들어진 기술입니다.- react가 사용된 애플리케이션: 넷플릭스, 페이스북, 인스타, 노션 등 *UI : 사용자 인터페이스 즉, 브라우저에서 눈에 보이는 것들을 말합니다. 왜 react를 많이 사용할까?컴포넌트 기반으로 UI 사용가능화면 업데이트 구현이 용이하다.화면 업데이트가 빠르게 처리된다. react 컴포넌트? - 한 화면을 네모 박스로 구분하여 각 박스를 컴..

모바일에서는 상단의  url과 하단의 뒤로가기 앞으로가기가 스크롤에 따라 나타나기도 없어지기도 한다. 이때 vh를 사용하면 가려지는 오류가 발생하기도 한다. 이를 수정하기 위해 아래 코드를 넣어주면 잘작동한다.   .box{ height:100vh; height: -webkit-fill-available; height: -moz-available; /* for Firefox */ height: fill-available; /* standard */}.

table tr->가로 td ->세로 위의 코드를 브라우저에서 보면 아래 처럼 나온다. 저사이의 빈공간을 지우고 싶다면 table에 css 속성 border-collapse: collapse를 주면 사라짐!!! +++추가로 알면 좋은것 퉁퉁이 퉁퉁이 퉁퉁이 비실이 비실이 비실이 td 대신 th를 쓰면 글자가 두꺼워진다. css로도 할수 있지만 잘 활용하면 귀찮은 것을 한번 줄일 수 있다. thead//tbody는 이해하기 쉽게 구분해 주는거라고 생각하면 된다. 표의 제목 부분을 thead라고 생각하면 됨 html의 기초 html의 기초 html의 기초, html의 다양한 태그들, html이란? 정의 프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어입니다. 웹개발의 가장 기초가 되는 언어입니다...

반응형적용하기 가져가서 쓰시오. 브라우저가 1200px 이상일 때 적용되는 css @media screen and (max-width: 1200px){ 브라우저가 1200px 이하일 때 적용되는 css } @media screen and (max-width: 768px){ 브라우저가 768px 이하일 때 적용되는 css } 그냥 이거 가져가서 사용하면 반응형 너도 할 수 있어! @media 밖에 쓴 코드는 브라우저 전체화면일 때 적용되는 css들이다. 브라우저 좌우 아무곳이나 잡고 줄였을 때 브라우저가 1200px이 된다면 첫번째 @media 안의 코드들이 작동된다. 같은 코드라고 해도 아래에 있는 것이 작동되기 때문에 큰 @media px이 위에 작은게 아래에 있어야 작동된다. ++만약 style.cs..