Front-end (14) 썸네일형 리스트형 Flex Box를 이용한 안정적인 그리드 레이아웃 제작 강사님이 운영중이신 영화관 웹사이트... 메인 요소 안 영화 정보와 사이드바로 구분된 레이아웃이 흥미롭다. 이런 페이지에서 중요한 것은 컨텐츠의 크기 변화, 또는 다양한 디바이스 너비에서도 안정적으로 유지되는 레이아웃의 설계! 천천히 만들어 가 보자. 🐢1. 메인 영역 안에서 영화 정보와 사이드바의 구분우선 flex box의 속성을 이용하여 컨테이너를 168px로 고정된 사이드바와, 나머지 너비를 차지하는 메인 영역으로 나눈다. MAIN Side bar index.html.container { box-shadow: inset 0 0 30px gold; display: flex; gap: 24px; min-height: 848px;.. image 사이의 여백 - 인라인 요소의 vertical-align img와 div, img와 img 사이의 여백은 왜 생기는 걸까?? 이유는 vertical-align의 초기값이 baseline이기 때문인데요, vertical-align은 인라인 요소의 상하 정렬을 위한 속성으로 영어를 쓸 때 baseline 기준으로 알파벳을 정리해줍니다! 이 속성은 span, strong과 더불어 img 등 모든 인라인 요소에 적용되어 있기 때문에 실제 요소의 높이와 baseline 사이에 간격이 여백으로 표시된다고 하네요. 이 여백을 없애는 방법으로는 vertical-align의 값을 bottom으로 주기display를 block으로 바꾸기등이 있습니다. https://www.daleseo.com/css-img-extra-space/ 관련 내용은 위 블로그에서 참고했습니다. Zustand 사용 전역 상태 관리 패키지 1. src/stores/storeButton.jsx 생성 import { create } from "zustand"; const useButtonStore = create((set) => ({ count: 0, selectedButton: null, setSelectedButton: (button) => set({ selectedButton: button }), incrementCount: () => set((state) => ({ count: state.count + 1 })), removeCoutn: () => set({ count: 0 }), })); export default useButtonStore; - 오브젝트 형태의 전역 상태 useButtonStore은 변수와 함.. Axios로 서버에 http 요청 보내기 1. axios를 설치한 후 import한다. npm i axios import axios from "axios"; 2. 버튼에 event handler를 등록하고, 그 안에서 axios로 http 요청을 보낸다. // event handler const handleAdd = async () => { await axios.post("https://react-todo-server-donghwan.koyeb.app/add", { task, }); const result = await axios.get( "https://react-todo-server-donghwan.koyeb.app/get" ); console.log(result); setTodos(result.data); inputRef.current.v.. useRef 사용법 uesRef는 component의 entire lifetime동안 지속되는 object를 생성한다. (component의 unmount까지 유지된다.) 하지만 obejct의 current 속성을 이용해 변수의 값에 접근할 수 있다. useRef로 생성된 object는 state와 다르게 component의 re-render시에도 변하지 않는다. (re-render에 영향을 받지 않는다.) import { useState,useRef } from "react"; export default function MyComponent_19_1(){ const [count,SetCount] = useState(0) const countRef = useRef(0) let countVar = 0 const increme.. 히어로 등장 애니메이션 히어로 소개 페이지에 사용할 이미지에 배경과 히어로 이미지를 겹치게 두어 히어로가 등장하는 효과를 주고 싶었다. css로 애니메이션 적용 시 페이지가 로드되었을 때 애니메이션이 실행되므로 js로 현재 스크롤 위치와 이미지 컨테이너의 scrollY값을 받아 스크롤이 근처에 왔을 때 애니메이션이 실행되도록 하였다. 🧑💻 구현 const heroContainers = document.querySelectorAll(".hero-info-container"); const heroImages = document.querySelectorAll(".hero-image"); const hasAnimationPlayed = new Array(heroContainers.length); hasAnimationPlayed.f.. Hero select 디자인 구현 Marvel 프로젝트의 index의 히어로 선택 박스에 어떤 애니메이션을 넣을까 고민하다 고전 게임에서 자주 보았던 캐릭터 선택 효과를 이용하기로 했다. 💡 구현 방법 이미지 캐릭터와 로고 모두 배경이 투명인 png를 사용하였다. 또한 포토샵의 선택영역 색칠 기능을 이용해 그림자 레이어 이미지를 제작하였다. 코드 1. HTML 모바일과 데스크탑 버전에 다른 애니메이션 효과를 주어야했기 때문에 미디어 쿼리를 이용해서 필요에 mobile과 desktop을 클래스를 가진 컨테이너를 숨겼다. 아이템은 그림자 이미지를 넣을 히어로 박스와 히어로 이미지를 넣을 슬라이드박스로 나누었다. 2. CSS 그림자 박스에 relative, 슬라이드 박스에 absoulte를 준 후 진행 방향에 따라 left, right, to.. getBoundingClientRect element.getBoundingClientRect()로 사용 element의 size와 element와 viewport 사이의 상대적 거리에 대한 값을 저장하고 있는 DOMRect 오브젝트를 반환한다. HTML 삽입 미리보기할 수 없는 소스 - width는 기본적으로 padding과 border-width에 content의 너비를 더한 값이 된다. - box-sizing을 border-box로 하면 content의 자체 너비 (border-box로 계산된 너비)가 된다. 이전 1 2 다음
