ZeroToHunnit Coding

오늘은 이때까지 했던거 다시 복습하고 props라는걸 새로 공부했다. 이거는 몇 번을 다시 봤는데도 확실하게 머리에 들어오지 않아서 몇 번은 공부를 해야겠다. 1. 컴포넌트는 state와 다른 함수에서 쓰기 때문에 컴포넌트 안에서 state를 갖다 쓸 수 없다. 그럴 때 props를 쓰면 된다. 2. 자식 요소에 state를 전송하는 방법 1) 자식 컴포넌트안에 작명={state이름}을 써준다. state이름란에는 함수도 쓸 수 있음 2) 컴포넌트에 파라미터로 아무 이름이나 쓸 수 있지만 보통 props를 쓰기 때문에 파라미터 등록 후 props.작명을 써주면 state를 갖다 쓸 수 있다. 3. props는 부모 요소에서 자식 요소로만 쓸 수 있다. 반대로 자식 요소에서 부모 요소로, 컴포넌트에서 다른..

display: flex와 display: grid는 레이아웃을 다루는데 있어 강력한 도구들입니다. 여러 가지 레이아웃 요구사항에 유연하게 대응할 수 있으며, 두 속성은 각각의 특성에 따라 사용되기도 합니다. 간략하게 정리해보면, flex는 주로 한 방향(주로 수평 또는 수직)으로 아이템을 정렬할 때 사용되며, grid는 그리드(격자)를 사용하여 아이템을 배치할 때 사용됩니다. grid는 2차원 레이아웃을 다룰 수 있어서 보다 복잡한 구조를 만들 수 있습니다. grid의 몇 가지 중요한 속성들을 더 자세히 살펴보면: grid-template-columns와 grid-template-rows: 그리드의 열과 행을 정의합니다. fr 단위를 사용하여 공간을 분할하거나, px 등의 고정값을 사용할 수 있습니다...

리액트 문법 자체가 익숙하지 않고 뭔가 그냥 바닐라 자바스크립트 짤 때랑은 또 다른 느낌이라 적응하는데 시간이 걸릴거같은 느낌이다 어제 했던거 좀 까먹은 느낌이라 다시 복습해야겠다. 오늘은 동적인 ui랑 반복문에 대해서 공부했다. 1. 동적 ui 스스로 만들기 1) html css 미리 완성하기 2) ui의 현재 상태를 state로 저장 3) state에 따라 ui가 어떻게 보일지 작성하기 2. JSX 내에서는 if문 작성이 불가하고 삼항연산자를 사용해야함. 삼항연산자는 (조건식 ? 참 : 거짓)의 문법을 가지고 있다. 3. 바닐라 자바스크립트처럼 html을 조작하는게 아니라 state문으로 조절해야함. 4. array.map() : 중괄호 안에서 for반복문을 쓸 수 없기 때문에 사용하는 map 반복문..

SwiperJs로 이렇게 둥글게 위아래로 스크롤되는 3d 캐러셀을 만들어보았다. HTML 큰 섹션박스에 swiper기본 템플릿을 넣어주었다. CSS .section { overflow: hidden; width: 100vw; height: 100vh; } .swiper { width: 100vw; height: 80vh; overflow: visible; margin-top: 10vh; } .swiper-slide { width: 100%; height: 80%; display: flex; align-items: center; justify-content: center; } .content { width: 900px; height: 500px; border: 6px solid black; } .swipe..

React 처음 까는거부터 난관이긴 했는데 이 때 너무 멘붕이었어서 담에 새로 프로젝트 만들 때 React 까는거 기록해놔야겠음. 요거는 뭐 그냥 공부한거 정리하고 주저리주저리 쓸거임. 1. React깔면 App.js에 function App() {}안에 짜면됨. 2. 그냥 html에서는 class=''로 쓰면 되지만 리액트에선 className=''로 써야함. 3. 변수로 저장해서 {변수명}으로 쓸 수 있음 4. 그냥 변수말고 useState라는 것도 있음. 처음에 useState쓰면 제일 위에 import useState같은거 자동으로 생김. 안생기면 import { useState } from 'react' 넣어줘야함. 5. useState문법은 let [변수명, 변수 다루는 함수명] = useSt..

각 박스에 도달하면 하단 고정 메뉴안에 해당되는 박스의 메뉴가 활성화되고 큰 섹션을 나가면 모든 활성화가 사라지는 ui를 만들어 보았다. HTML box1 box2 box3 box4 box1 box2 box3 box4 섹션안에 박스 네개와 list가 포함된 menu박스를 만들어주었다. CSS .section{ margin-top: 400px; margin-bottom: 400px; background-color: #999; padding: 200px; } .box{ width: 100%; height: 150vh; margin-top: 200px; background-color: black; color: white; font-size: 60px; } .menu{ position: sticky; botto..

화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. HTML 무엇을 사실건가요? 모자 셔츠 free 사이즈를 선택해주세요. 95 100 105 form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다. CSS form{ margin-left: 200px; margin-top: 200px; } #apparel, #hat-size, #shirts-size{ font-size: 40px; padding: 40px; } #hat-size, #shirts-size{ visibility: hidden; opacity: 0; transition: all 0.3s; position: absolute; } .on{ visibility: visible ..

위와 같이 마우스를 갖다 대면 한 글자씩 위쪽으로 파도타기하면서 없어지고 밑에서 한 글자씩 다시 올라오는 애니메이션을 구현했다. HTML 안 녕 하 세 요? 반 갑 습 니 다. 안 녕 하 세 요? 반 갑 습 니 다. 텍스트 박스를 2개 만들어주고 각 글자들을 span태그에 따로따로 담았다. CSS .box { margin-top: 200px; margin-left: 200px; overflow: hidden; cursor: pointer; position: relative; } .text span, .hover-text span{ display: inline-block; transition: all 0.3s; font-size: 60px; } .hover-text{ position: absolute; t..