폴리프레임

@apply는 Tailwind CSS 유틸리티 클래스를 재사용 가능한 커스텀 스타일로 그룹화할 때 사용됩니다. 중복 제거: 동일한 유틸리티 클래스를 여러 곳에서 사용할 때 반복되는 코드를 줄일 수 있습니다.가독성 향상: 클래스가 많아지면 코드가 복잡해지기 때문에, @apply를 사용해 코드를 더 깔끔하게 유지할 수 있습니다.재사용성: 자주 사용하는 스타일을 하나의 클래스처럼 관리하여 유지보수성을 높입니다.index.css 또는 globals.css 파일에 작성합니다.Tailwind의 기본 스타일과 충돌할 수 있으므로 클래스 이름을 명확하게 정의 /* index.css */.btn-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;}..

html + css 2024. 11. 28. 07:54

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 props를 사용합니다. 이때  prop-types는 props가 예상된 데이터 타입과 일치하는지 확인하는 데 도움을 줍니다.  즉, prop-types 패키지는 React 컴포넌트의 props 타입을 검증하기 위해 사용됩니다. TypeScript를 사용하지 않는 React 프로젝트에서 유용합니다. 아래 명령으로 별도의 설치가 필요합니다.npm install --save prop-types사용예제 - 일반import React from 'react';import PropTypes from 'prop-types';const MyComponent = ({ name, age, isActive }) => ( {name} Age: ..

JavaScript 2024. 11. 28. 07:42

대부분의 브라우저는 "브라우저의 자동 재생 정책" 으로 인하여, 첫 로드시에는 자동재생이 허용되지 않습니다. 따라서 muted 속성을 true 설정하고, 사용자와 상호 작용해서 play 를 할 수 있습니다. 아래 코드는 background-image로 video를 깔고, 별도의 audio파일을 아이콘을 이용하여 ON/OFF 토글하도록 설정한 코드입니다. background-image 는 overlay 처리를 하고, audio 의 음량을 고정시켜서 배경음악으로 만 사용 합니다.import { useRef, useState } from "react";import bgVideo from "../assets/background/seokang-background.mp4";import MainText from "...

html + css 2024. 11. 26. 15:26

전체 컨테이너를 설정할때 유용하게 사용할 수 있었습니다..container { width: min(1200px, 90%); margin: 0 auto; /* 수평 중앙 정렬 */} 요소의 너비를 화면 크기의 90%와 1200px 중 작은 값으로 설정합니다.예를 들어, 화면 크기가 1000px일 경우 요소의 너비는 900px(90%)이 됩니다. 화면 크기가 1400px일 경우 요소의 너비는 1200px로 고정됩니다.margin의 첫 번째 값 0: 상하 방향 여백을 0으로 설정.두 번째 값 auto: 좌우 여백을 동일하게 설정해 요소를 수평 가운데 정렬. body { display: flex; justify-content: center; /* 수평 중앙 정렬 */ align-items: center..

html + css 2024. 11. 25. 11:28

이미지를 Box D 에만 texture 변수에 담어서 Mapping 하고, 나머지는 new THREE.Color() 처리해봅니다./* eslint-disable */import React, { useRef, useMemo, useState, useEffect } from "react";// import { useNavigate } from "react-router-dom";import { Canvas, useFrame } from "@react-three/fiber";import { Html } from "@react-three/drei";import { gsap } from "gsap"; // 애니메이션을 위해 gsap 사용import * as THREE from "three";import { numb..

three.js 2024. 11. 24. 17:52

데스크 탑에서 Drag 를 이용하여 3D 도형의 회전을 수행했으나, 터치 스크린에서는 touchstart, touchmove, touchend 이벤트를 추가해야합니다. 이를 추가하여 구현합니다.// Blocks.jsx/* eslint-disable */import React, { useRef, useMemo, useState, useEffect } from "react";import { useNavigate } from "react-router-dom";import { Canvas, useFrame } from "@react-three/fiber";import { Html } from "@react-three/drei";import * as THREE from "three";function createM..

three.js 2024. 11. 23. 01:21

배경을 비디오 처리하고, overlay와 3D Geometry 을 위에 구현해 본 코드입니다.// App.jsximport bgVideo from "./assets/seokang-background.mp4";import RenderModel from "./components/RenderModel";import Blocks from "./components/models/Blocks";function App() { return ( {/* */} );}export default App;// Blocks.jsk/* eslint-disable */import React, { useRef, useM..

three.js 2024. 11. 22. 22:37

Three.js 활용시 resize 활용예제window.addEventListener('resize', onWindowResize); function onWindowResize(){   camera.aspect = window.innerWidth / window.innerHeight ;   camera.updateProjectionMatrix();   renderer.setSize( winow.innerWidth, window.innerHeight );}

three.js 2024. 11. 22. 12:48