프론트엔드 4

SCSS 초보자를 위한 실전 예제: Mixin, Include, For문 활용하기

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(..

html,css 2024.12.03

Vue.js / Vue란 무엇인지 / Vue2 와 Vue3 차이

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

Vue 2024.11.05

[자바스크립트] 변수에 저장할 수 있는 데이터의 종류

var 변수 이름 = 데이터; 이 데이터에 들어가는 종류가 8개 정도 됩니다. Number Boolean String Function Class Class Instance undefined null ⭐️ Number 일반적인 숫자 정수와 실수형으로 나뉩니다. ⭐️ String 문자열, 일반적인 글자를 말합니다. 문자열을 사용할 경우에는 "" 안에 넣어줍니다. ⭐️ Bloolean 논리형이라고 합니다. 오직 참,거짓 두 가지 값만 존재합니다. 참, 거짓을 저장해야 하는 경우 사용한다. ⭐️ undefined 변수 선언은 됐지만, 값을 알 수 없는 경우 나옵니다. ⭐️ null 주로 객체를 담은 변수를 초기화할경우 사용합니다. //숫자형 var age = 20; //문자형 var age ="20"; //위의..

Js 2021.12.15

css - 인접선택자, 일반선택자

css를 구성하면서 자주쓰게 됐던 인접선택자와 일반선택자에 대해 정리해볼께요. 형제 선택자에는 두가지 종류가 있습니다. 첫번쨰, 인접 형제 선택자 (adjacent sibling selector) 두번쨰, 일반 형제 선택자 (general sibling selector) 두 선택자의 공통점은 '같은 부모를 가진다'입니다. 차이점을 정리해볼께요. ⭐️ 인접 형제 선택자 작성법 ( '.class'는 임의입니다. ) .class1 + .class2 {속성: 속성값;} 같은 부모를 가진 .class1 바로뒤에 오는 2에게 스타일을 적용한다. ex) p1 + p2 {color:red;} 이 경우에 p1바로 뒤에있는 p2의 color가 red 로 나옵니다. ⭐️ 일반 형제 선택자 작성법 ( '.class'는 임의입..

html,css 2021.11.25
LIST