전체 글
-
Vue Component 사용하기(props 전달)front-end/Vue 2024. 4. 3. 16:28
1. MenuList.vue 파일을 하나 생성을 합니다. - vue 자동생성을 이용을 합니다.(안되는 경우 Vetur 설치) {{ menu }} {{ price }} 원 2. name를 설정을 합니다. export default { name: 'MenuList', } 3. app 파일에서 v-for문을 활용해서 들어갈 데이터를 만들어 봅시다. /*아래와 같은 것을 반복문을 사용한것 */ 4. MenuList 파일에서 props 설정을 해봅시다. - 자료형 종류 Array, Object, String, Number - props로 등록한것은 데이터 바인딩으로 자유롭게 사용 가 5. 결과
-
React css reset 코드front-end/React 2024. 4. 2. 16:37
1. 해당 사이트에 접속을 해서 css를 복사한다. 2. reset.css 만든 후 최상단 css에 임포트를 하면 됩니다. CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com /* http://meyerweb.com/eric/tools/css/..
-
React 테일원드 + Module.css 사용법front-end/React 2024. 4. 2. 16:05
1. module.css .test { @apply bg-blue-500 text-white text-2xl; } 2. .jsx 파일 - import styles로 사용할 모듈을 가져옵니다. - className={`${styles.test}`}> 방식을 통해서 필요한 className를 가져옵니다. import React from 'react' import styles from './Test01.module.css'; const Test01 = () => { return ( Test01 ) } export default Test01 3. 2개 이상 스타일 요소를 가져오고 싶다면? - ${styles.className}로 새로운 className를 적습니다. Test01
-
React Tailwind 세팅front-end/React 2024. 4. 2. 15:49
1. 테일원드 모듈 설치 npm install -D tailwindcss postcss autoprefixer 2. 설정파일 생성하기 npx tailwindcss init -p 3. 설정 파일 내용 변경 (tailwind.config.js) /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }; 4. index.css 테일윈드 적용 @tailwind base; @tailwind components; @tailwind utilities;