CSS17 Next에 Chakra 설치와 사용법 Next에 차크라 세팅 npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 Next에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 컴포넌트에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' // 1. Import the extendTheme function import { extendTheme } from '@c.. 2022. 7. 31. [220419] 최소기능으로 리액트 시작하기 / 세부설정하기 '최소기능'으로 리액트 초기설정하기 리액트를 시작하기 위해서는 총 4가지가 필요하다 1. react 2. react-dom 3. babel 4. webpack $ npm install react react-dom $ npm install -D webpack webpack-cli $ mkdir dist src webpack.config.js, index.html 생성 src디렉토리 안에 index.jsx 생성 -> 리액트 문법을 위한 파일 index.jsx에 hello world을 입력해서 상태 체크하기 const React = require('react') const ReactDOM = require('react-dom') class App extends React.Component{ state={ va.. 2022. 4. 20. [220322] 자바스크립트로 달력만들기 1. 현재 날짜를 가져오는 함수 new Date() date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. let dateToday = new Date() console.log(dateToday) console.log(typeof(dateToday)) //출력값 //2022-03-22T13:35:12.509Z //object 그 외에도 원하는 시각을 넣어서 객체를 작성할 수 있다. console.log(new Date(2021, 11, 6)); console.log(new Date('2021-12-06T03:24:00')); //결과 //2021-12-05T15:00:00.000Z //2021-12-05T1.. 2022. 3. 23. [220124] input="radiobox" / label / 슬라이드 / 형제 선택자 의도 : 클릭하면 div가 사라졌다가 나타나기 html css : 인접 형제 선택자 + 이용 #header{ width: 500px; height: 180px; background: #eee; padding:20px; box-sizing: border-box; display: flex; justify-content: space-between; } #header > div > input{ display: none; } .container{ width:130px; height: 130px; } input[id*="box"]+label{ display: inline-block; width:15px; height: 15px; background: blue; border-radius: 100%; } input[i.. 2022. 1. 24. [220124] input="checkbox" / label / 아코디언 메뉴 input과 연결되는 label See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen. checkbox를 체크 유무를 표시하는 법 관계 없는 둘을 묶어주는 id 체크박스, 라벨과 다른 컨텐츠를 연결하기 id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기 클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기 클릭하면 접히는 메뉴 만들기 어떻게 구성할지 생각하기 체크박스 여러개 : 아코디언 메뉴 2022. 1. 24. [220115] js를 이용한 class="on" 생성/제거하기 목차 1. 클릭으로 class 생성,제거하기 2. 원하는 위치에 생성하기 자바스크립트 그래서 대체 뭘 어떻게 쓰는건데..하다가 드디어 실사용을 하기 시작. 배우자마자 너무 미쳤다..하고 마음속에서 기립박수쳤다. 이걸 이렇게 쓴다고?? 이런 맛에 프로메테우스가 인간한테 불을 준건가. 박수 짝짝짝 손 터지게 치고 앞으로 세바퀴 굴렀다. 미쳤다. [웹페이지는 html, css, javascript 3개로 구현되고 있는데, 자바스크립트는 html을 조정할수 있다]란 말을 실천해보자. 클릭으로 class="on" 생성하기 See the Pen make_class_on by supermint (@ma_ad_shouri) on CodePen. 클릭함으로써 id가 box1인 div를 숨기는 코드다. 클릭을 함으로써 d.. 2022. 1. 15. [221003] 회원가입창 만들기 / 모달팝업창 실습용도 어제오늘 끙끙대던거 처리ㅎ망ㅇ러ㅣ머이멍ㄴ 쓱 보고 고쳐준 교수님 최고다!!! 코드 읽는 능력 최고다!!! 내가 이해한 label의 용도랑 연결연산자(+)는 맞았음. 문제의 시작 : label이랑 input이랑 떨어져도 된다는것을 생각을 못함. //이 자리에 있던 label을 아래로 밀어넣음 //왜? input 아래만 있으면 되는거고, 나는 X가 있을 위치 고정을 원하니까! X //여기로 밀어넣음! name id e-mail phone CSS의 수정 (기존 css) input[id="close"]:checked+label+#content{ display: none; } (수정본 css) input[id="close"]:checked+#content{ display: none; } 2022. 1. 3. [220102] 홈 만들기 구글링하다가 예쁜 잡지프레임 가지고 비율 3:1 확인하면서 만듬. 전체적으로는 주려다가 여백 공부하듯이 하나하나 넣었다. 그러다보니 코드가 엄청나게 난장판인데 나중에 수정하기로 하자. 우선은 완성한데에 의의를 둔다. 클로닝하니까 확실히 머뭇거림도 많이 줄고 어떻게 넣어야할지 조금씩 감이 온다. 안에 들어간 이미지는 구글 무료 이미지. 수정해야 할것 저 팝업창을 회원가입창으로 바꾸기 시간이 없어서 닫는 버튼을 전체 클릭으로 바꿨는데, X버튼으로 만들기 210114 수정본 수정내용 회원가입창을 닫아야 할때 전에는 전체 화면 중 어디나 클릭하면 닫을 수 있게 했다. -> X버튼을 눌러야만 닫을 수 있게 했다. input+lable이 각각 2개가 있었는데, input 1개에 연결된 label 2개로 줄였다. 마.. 2022. 1. 3. [220101] clone_아임웹 게시판 / table, border-seperate, :not(), text-transform 세상에 새해라니. 무의식적으로 21년이라고 쓰다가 22년이라고 고쳤다. 23이라고 쓰기 시작할때는 회사 업무일로 글을 썼으면 신나겠다. 만약 그렇게 된다면 참치덮밥 먹고싶다. 차가운 레몬사이다랑 해서. 오늘이 클로닝 이미지. (출처 : https://imweb.me/faq?mode=view&category=29&category2=37&idx=71724 ) 세부기능은 몰라요. 게시물이라고 구글링하고 예뻐서 사이트가서 찾아옴. 세부적인 기능과 구매는 아임웹에서 구매하도록 합시다. 1. 큰 구조 짜기 네이버와 다르게 까볼 수 있는 코드도 없고, 내게 주어진건 달랑 저 이미지 한 장이다. 하지만 해볼 만은 하다. 하면 하는거지. 세부적인 이름 정하기. 궁금한건 main에 들어가는 nav와 box1에 들어가는 n.. 2022. 1. 1. [211231] clone_네이버 회원가입폼 / select, option, ::focus footer 정렬 맞춤 팝업메뉴 저 아래 화살표 표시는 어떻게 넣나 코드 보니까 아이콘이 아니었다. 심지어 ul, li도 아니었음. 목록은 option이었고, 화살표는 background로 들어가는 이미지였음. 홀리몰리. 다들 알았는가. background에도 position이 있음을. 나는 방금 알았다. 심지어 사이즈도 조절이 가능하다. #header > h1 > #logo{ display: block; margin: 0 auto; width: 240px; height: 44px; background-image: url('../img/logo_naver.png'); background-repeat: no-repeat; background-size:240px auto; background-position.. 2021. 12. 31. 이전 1 2 다음
