이레

⭐️ flex 속성이란?flex는 Flexbox 레이아웃에서 요소가 부모 컨테이너 안에서 공간을 차지하는 방법을 지정하는 단축 속성입니다.flex는 다음 세 가지 속성을 조합한 것입니다:flex-grow: 요소가 남는 공간을 얼마나 많이 차지할지 결정flex-shrink: 컨테이너가 작아질 때 요소가 얼마나 줄어들지 결정flex-basis: 요소의 기본 크기를 설정flex: 로 구성되며, 값이 생략된 경우 기본값은 아래와 같습니다:flex: 0 1 auto; ⭐️ flex 속성의 구성 요소(1) flex-grow: 남는 공간 차지flex-grow는 컨테이너에 남는 공간이 있을 때, 요소가 그 공간을 얼마나 차지할지 결정합니다..container { display: flex; gap: 10px;}...

SCSS에서 mixin, include, 그리고 for문은 코드 재사용성과 유지 보수를 높이는 데 유용합니다. ⭐️ @mixin은 반복적으로 사용할 CSS 코드를 정의하는 데 사용됩니다.//구문@mixin 이름(매개변수들) { 스타일들;}//예시@mixin button-style($color, $size) { background-color: $color; font-size: $size; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer;} ⭐️ @include는 정의된 mixin을 실제로 적용할 때 사용합니다.//구문@include 이름(인수들);//예시.my-button { @include button-style(..

조건부 렌더링 (v-if)태그에 v-if를 같이 사용하며 표현식이 true 값을 반환할 때만 렌더링 됩니다. ⭐️ 예)    - 예를 들어, 이 요소는 특정 탭이 활성화될 때만 보이도록 설정되었습니다.   - `v-if` 디렉티브는 특정 조건에 따라 HTML 요소를 화면에 표시할지 여부를 결정하는 데 사용됩니다.   - 여기서는 `v-if="tabAct == 0"`으로 설정해서 `tabAct`라는 변수의 값이 0일 때만 `div.tab-content` 요소가 렌더링됩니다. ⭐️ 특징v-if는 필요할 때만 요소를 생성합니다. 조건이 true일 때만 DOM에 요소가 추가되고, false일 때는 DOM에서 완전히 제거됩니다.  ⭐️ v-show와의 차이점  v-show는 조건에 따라 요소를 숨기거나 표시만 하..

Vue.js란?Vue.js는 웹페이지를 더 쉽게 만들 수 있게 도와주는 JavaScript 프레임워크입니다.HTML을 다루는 데 익숙한 사람들이 빠르게 시작할 수 있고, 반응형 UI와 **동적인 싱글 페이지 애플리케이션(SPA)**을 만들기에 맞는 도구입니다. Vue2와 Vue3의 차이점Vue는 더 편리하고 빠르게 웹앱을 개발할 수 있도록 꾸준히 발전해왔는데, Vue2에서 Vue3로 오면서 몇 가지 큰 변화가 있습니다.성능 향상: Vue3는 더 빨라졌고, 메모리도 덜 사용해요. 웹페이지가 좀 더 빨리 뜨고, 앱도 더 효율적으로 작동합니다.새로운 작성 방식: Composition API라는 걸 추가해서 코드 작성 방식이 더 유연해졌어요. 이 방식은 코드 재사용이 쉬워서 큰 프로젝트에 특히 좋아요.TypeS..

화면 작업을 하다 보면 select를 커스텀해야 하는 경우가 많습니다. css로는 한계가 있을때 nice-select 플러그인을 사용했습니다. 1. 소스파일 다운로드 jQuery Nice Select Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'. jqueryniceselect.hernansartor..

Router.js 에서 설정한 path로 이동하는 방법 ⭐️ Link 태그 html에서 a 태그와 같은 기능을 하는 태그입니다. 클릭했을 때 바로 이동하는 기능을 구현할 때 사용합니다. ⭐️ useNavigete useNavigete를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 합니다. 라이브러리 설치 후 해당 라이브러리를 import 시켜준 후 사용합니다. import { useNavigate } from "react-router-dom"; //예시입니다 const Mypage = () => { const navigate = useNavigate(); return ( . . . . navigate('/home')} /> ) } Link 태그와 다른점은 useNavige..

setInterval() 을 이용해 카운트다운 타이머를 만들어 봅니다. 조건) ⭐️ 시간, 분, 초 를 입력할 수 있어야 합니다. ⭐️ start, stop, reset 버튼이 있어야 합니다. ⭐️ 각 버튼이 맞게 동작해야합니다. ⭐️ 카운트다운이 시작되면 시간 수정이 불가능합니다. ( 정지하거나 리셋하면 수정 가능) 목표는 기능이 잘 돌아가게끔 하는 거라 형태와 스타일은 간단히 작성합니다. : : START STOP RESET .wrap {padding-top:100px;} .timer {display:flex;align-items:center;justify-content:center;} input {width:150px;height:150px;background-color:#4c6ef5;border-..

react router로 페이지 이동 작업을 하다 에러가 났습니다. react-router-dom v6부터는 Switch 대신 Routes를, Route 안에 component 대신 element를 사용합니다. + 자식으로는 만 가능합니다. 그래서 위와 같이 작성하면 자꾸 에러가 발생합니다.. 과 가 있어서 에러 발생.. :( 위처럼 element로 사용해줘야 작동합니다.

리액트 슬라이드 라이브러리에 여러 가지가 있는데 제일 간단하고 쓰기 편하다는 react-sldie를 사용해 봤습니다. ⭐️ 라이브러리 설치 npm install react-slick --save npm install slick-carousel --save npm을 이용해 라이브러리를 설치해 줍니다. 해당 라이브러리가 잘 설치되었다면 package.json 에 이렇게 들어가있습니다. ⭐️ 사용법 slide를 import 해줍니다. import React from "react"; import Slider from "react-slick"; // slide import const MainSlider = () => { const settings = { dots: true, Infinite: true, speed..

맥에서 h2 설치 및 실행하는 방법입니다. 1, h2 다운로드 http://www.h2database.com/html/download.html Downloads Downloads Version 2.2.220 (2023-07-04) Windows Installer (SHA1 checksum: 7b98de1c5c741d793f77c4993ac527dc33b91a4b) Platform-Independent Zip (SHA1 checksum: 5cb2f9c43af14b56feab8ab4717f872a0dde83b8) Version 2.1.214 (2022-06-13) Windows Installer (SHA1 check www.h2database.com 저는 platform-independent zip 파일로 ..