본문 바로가기
728x90
반응형

HOME🏠310

[React]리액트 'JSX 문법' 사용하기 리액트 'JSX 문법' JSX 기본 구조 HTML과 유사한 구조를 가지면서 JavaScript 코드를 통합 해서 사용할 수 있는 확장 문법이다 리액트에서는 JSX( JavaScript의 확장 문법 ) 을 사용해서 UI를 구조를 선언한다 리액트 파일을 만들면 src 안에 기본적으로 포함되어있는 App.js는 위와 같이 생겼다 리액트에서 레이아웃을 만들기 위해서는 import logo from './logo.svg'; import './App.css'; function App() { return ( //여기에 코드 작성하기! ); } export default App; function App() 안에 있는 return() 문 안에 작성을 해주어야 한다 하지만 변수 같은 경우, return() 밖에 작성 해주.. 2023. 11. 15.
[React]리액트의 핵심 특징 리액트(React)의 핵심 특징 선언적 UI 리액트는 선언적 UI를 지향하는 라이브러리로, 사용자 인터페이스를 어떻게 표현할지에 중점을 둔다 선언적 UI의 핵심 아이디어는 원하는 상태(데이터)를 정의하고, 리액트가 자동으로 UI를 업데이트하도록 하는 것이다 이는 코드를 직관적이고 예측 가능하게 만들어 유지보수와 개발을 용이하게 한다 JSX 문법 JSX는 JavaScript의 확장 문법으로, 리액트에서 UI 구조를 선언하는 데 사용한다 XML과 유사한 문법을 가지며, JavaScript 코드 안에서 UI 요소를 표현할 수 있도록 도와준다 JavaScript 코드 안에서 직관적으로 컴포넌트를 작성할 수 있어, 가독성과 유지보수성이 향상됨 가상 DOM (Virtual DOM) 가상 DOM은 리액트의 성능 최적.. 2023. 11. 15.
구글, 광고 차단 알림 메세지 출력하는 방법 구글, 광고 차단 알림 메세지 출력하는 방법 구글 애드센스 들어가기 https://adsense.google.com/intl/ko_kr/start/ Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. adsense.google.com 개인 정보 보호 및 메시지 클릭 광고 차단 회복 광고 차단 회복 시작하기 메시지 만들기 메세지 만들기를 클릭하면 예시로 만들어진 팝업창과 우측에 [설정], [디자인] 탭으로 되어있다 [설정] 내 사이트 선택하기 사이트를 선택하면 이렇게 광고를 등록해 둔 사이트가 자동으로 나온다 나는 여기에서 사이트.. 2023. 11. 13.
[무료 배포] 2024년 아이패드 굿노트 심플 다이어리 무료 배포(FREE)_2024년 아이패드 굿노트 심플 다이어리 안녕하세요 평소에 굿노트로 다이어리 많이 작성하시나요? 저는 평소에 종이 다이어리로 작성하다가 2년 전부터 굿노트로 다이어리를 작성하기 시작했는데요 굿노트 다이어리를 쓰면서 직접 쓰는 게 타이핑 위주로 작성하거나 iFont를 사용해서 노트를 꾸미는 일이 많아졌어요 (작성할 시간도 없다는 게 현실..) 어찌어찌하다 보니 결국에는 비어있는 부분도 많아지고 속지를 다운로드하여서 사용할 때면 결국 작성하는 부분만 작성하는 저 때문에 쉽게 쉽게 원하는 부분만 담아 갈 수 있도록 작업해서 만들어 보았습니다 제 다이어리는 직접 꾸미고 붙이고 색칠하고를 좋아하시는 분들에게 추천드리고 싶네요 2024년 표지 / 캘린더 표지랑 캘린더는 다음과 같이 구성되어 있.. 2023. 11. 13.
[React]Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기 Error: 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결하기 며칠전에 까지만 해도 문제 없던 부분이였는데 갑자기 문제가 생기면서 해당 에러를 해결하기 위해서 찾아보던 중에 평소에 깃허브 데스크탑으로 코드를 올려두는데 다른 작업공간에서 작업을 해서 올려둔 파일을 사용하려다 보니 push 과정에서 문제가 생긴 것 같다 해당 문제가 생겼을 경우 다음과 같이 해주었다 npm을 업데이트 후(npm update) 시작하기 (npm start) npm update 명령어 입력 업데이트가 완료 되면 npm start 오류가 해결 되고 React App이 정상적으로 실행 된 것을 확인 할 수 있다 react-scripts 설치하기 업데이트를 해주어.. 2023. 11. 13.
[React: Error]no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기 Error: no such file or directory, enoent This is related to npm not being able to find a file. 오류 해결하기 no such file or directory, lstat 'C:\Users\00\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file. 다음과 같은 오류가 발생했을 때 C:\Users\00\AppData\Roaming 이라는 폴더안에 npm이 존재하지 않아서 생기는 오류이다 해당 경로 들어가서 npm이라는 폴더를 하나 생성해 주면 문제가 해결된 것을 확인 할 수 있다 2023. 11. 10.
컴퓨터(로컬:C) 쓰레기 파일(Temp) 지우고 용량 늘리기 컴퓨터(로컬:C) Temp 파일 지우고 용량 늘리기 디스크 정리를 해도 용량이 부족하거나 분명히 지웠는데도 용량이 그대로인 경우가 많다 그럴 때는 \AppData\Local\Temp 안에 있는 디렉토리들을 지워 용량을 줄이는 방법이 있다 이 "AppData\Local\Temp" 디렉토리는 컴퓨터에서 실행 중인 다양한 응용 프로그램 및 프로세스에서 생성된 임시 파일을 저장하는 데 사용된다 다음과 같이 경로를 따라가 준다 C:\Users(사용자)\(자신의 PC 이름)\AppData\Local\Temp 여기까지 들어가면 Temp라는 폴더 안에 많은 파일들이 들어가 있는 것을 확인 할 수있다 여기서 [ CTRL+A ] 전체 선택을 해주고 [ Delete ] 키를 눌러서 데이터를 삭제해주면된다 내 컴퓨터에서는 여.. 2023. 11. 9.
리액트(React) 프로젝트 폴더 분석하기 프로젝트 폴더 분석하기 리액트 프로젝트 폴더 구조에서 'node_modules', 'public', 'src' 디렉토리는 각자 다른 목적으로 구성된다 일반적으로 위와 같은 폴더 구조를 가지고 있고 프로젝트의 복잡성과 요구 사항에 맞추어 디렉토리 구조를 조정할 수 있다 node_modules [node_modules] 디렉토리는 npm(Node Package Manager)을 통해 프로젝트에 필요한 외부 패키지 및 의존성이 자동으로 설치된다 npm(Node Package Manager) 라이브러리 코드 보관함으로 프로젝트에서 사용하는 외부 라이브러리와 의존성이 저장된다 이 디렉토리는 npm에 의해 관리되며, 직접 수정하거나 관리할 필요가 없다 public 정적 자원과 리액트 애플리케이션을 렌더링하는 데 사.. 2023. 11. 9.
리액트(React) 설치 & 개발 환경 설정하기 리액트(React) 설치 개발 환경 설정 [ Node.js 설치하기 ] 구글에서 node js 검색하면 다운받을 수 있는 사이트가 나옵니다 https://nodejs.org/en/download Download | Node.js LTS Recommended For Most Users nodejs.org 사이트로 들어가서 LTS를 다운 받아준다 node.js 가 설치 되어있는지 확인하려면 명령 프롬프트(cmd)에서 확인을 해주어야한다 실행창(window키 + R)을 열어서 cmd를 열어준다 그리고 명령창에 node -v 를 작성해주면 현재 설치 되어있는 node.js 의 버전을 확인 할 수 있다 [ 개발 에디터(vscode) 설치하기 ] Visual Studio Code - Code Editing. Red.. 2023. 11. 9.
PC 아이콘 원하는 이미지로 변경하는 방법 PC 아이콘 원하는 이미지로 변경하는 방법 PC 아이콘을 변경하기 위해서 아래의 사이트에서 이미지를 받아서 왔다 https://www.flaticon.com/kr/ 무료 아이콘 및 스티커 - 수백만 종의 다운로드가 가능한 리소스 귀하의 프로젝트를 위한 무료 아이콘 및 스티커를 다운로드하세요. 디자이너에 의한, 디자이너를 위한 리소스. PNG, SVG, EPS, PSD 및 CSS 포맷 www.flaticon.com 종료하기 버튼을 변경하고 싶어서 다음과 같이 무료 아이콘을 다운 받아왔다 PNG를 아이콘 이미지로 사용하기 위해서는 확장자를 ICO 형식으로 변경을 해주어야한다 https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertio png 파일(들) .. 2023. 11. 9.
작업표시줄에 종료 버튼 생성하기 작업표시줄에 종료 버튼 생성하기 폴더나 바탕화면에서 '오른쪽 마우스 클릭'을 해서 설정창에 새로만들기 -> 바로가기를 만들어 준다 바로가기 버튼을 누르면 아래와 같이 바로가기 만들기 창에서 항목의 위치 입력창에 'shutdown -s -t 0'을 입력해 준다 입력하고 다음 버튼 -> 마침 을 누르면 화면에 [ shutdown.exe ] 아이콘이 생긴것을 볼 수 있다 이제 생성된 아이콘을 눌러서 마우스 우클릭을 하면 [작업 표시줄에 고정]을 눌러주면 작업표시줄에 내가 만든 바로가기 아이콘이 생성된 것을 확인 할 수있다 생성한 버튼을 누르면 빠르게 화면이 종료 되는 것을 확인 할 수 있다 😉 PC 아이콘 변경하기 PC 아이콘 원하는 이미지로 변경하는 방법 PC 아이콘 원하는 이미지로 변경하는 방법 PC 아이.. 2023. 11. 9.
[WEB]동기/비동기처리 와 콜백함수 동기/비동기처리 동기식 처리 자바스크립트는 동기식 처리를 한다. 한번에 코드 한줄씩 차례로 실행 비동기식 처리 방법 실행이 오래 걸리는 함수들을 보통 비동기식으로 처리를 한다 처리하기 위해서는 함수들을 Web API로 이동시켜두고 작업을 완료하면 결과를 출력해준다 Web API 덕분에 작업을 기다리지 않고 빠르게 처리가 가능하다 setTimeout(()=>{},시간) 을 사용해서 1초 후에 timeout1 이 출력되도록 코드를 작성하였다. 다른언어와 다르게 자바스크립트는 기다려주지 않고 해당 줄을 실행하는 동시에 정지 하지않고 실행이 바로 된다. setTimeout()함수는 자바스크립트가 비동기식으로 처리를 하기 때문에 위와 같은결과가 출력된다. 비동기식 처리의 특징은 오래걸리는 작업이 있을 경우, 해당.. 2023. 10. 24.
[WEB] JS-for,forEach 문 사용하기 변수 안에 여러가지 변수를 담아서 출력 해보려고 한다 var size = ["XL", "XXL", "XXXL"]; 다음과 같은 여러 문자가 담겨있는 배열을 출력 해보려고한다 배열을 출력하는 방법은 for 문을 사용해서 배열의 사이즈를 받아서 출력해주는 방법과 for (i = 0; i console.log(element)); forEach()를 사용해도 동일한 값을 출력한다 [ forEach 예시 ] size.forEach(function (e) { $(".form-select").append("" + e + ""); }); size.forEach(function (e) { $(".form-select").append(`${e}`);}); 2023. 9. 22.
[WEB]JS-자바스크립트로 HTML 추가 생성하기 자바스크립트로 HTML 생성하기 여기안에 새로운 HTMl 생성 document.createElement("생성할 태그"); 스크립트를 넣어줄 div 태그를 하나 만들어 준다 생성할 태그 안에 p를 넣어주면 p태그로 생서이 되고 h1을 넣어주면 h1 태그의 형식으로 HTML이 만들어진다 document.querySelector("#container").appendChild(a); innerHTML은 문장을 덮어써서 기존에 있던 텍스트를 지우고 작성된다 insertAdjacentHTML 문자형으로 HTML 추가하기 var 변수 안에 문자열을 통째로 저장하고 insertAdjacentHTML 을 사용해서 HTML을 추가하는 방법과 jQuery에서는 append()를 사용해서 문자열을 추가 해주는 방법이 있다... 2023. 9. 22.
[WEB]JS-이미지 슬라이드 만들기 이미지 슬라이드 만들기 위와 같이 동그라미 버튼을 누르면 다른 이미지가 변하는 슬라이드를 만들어 보려고 한다 사용할 이미지를 폴더 안에 넣어주고 body 태그 안에 이미지를 담아줄 큰그룹 (slide-container) 태그를 만들어주고 그 안에 이미지 태그를 3개를 들어서 넣어주었다 슬라이드를 만들어주기 위해서 세로로 정렬된 이미지를 가로로 정렬 시켜주어야한다 그러기 위해서 CSS 파일을 하나 만들어준다 .slide-container { width: 300vw; } .slide-card-bg { float: left; width: 100vw; } 반응형 웹에서 사용되어지는 크기의 단위 중 하나가 vw(Viewport Width), 그리고 vh (Viewport Height)가 있다 가로 사이즈에 대응하.. 2023. 9. 18.
[WEB]JavaScript - setTimeout / setInterval 사용하기 setTimeout() / setInterval() 사용하기 자바스크립트에서 사용하는 타이머로 사용하는 대표적인 함수에는 seTimeout()와 setInterval() 함수를 사용한다 setTimeOut setTimeout 함수는 코드를 실행 할때 바로 시작하지 않고 기다렸다가 함수를 실행 할 때 사용하는 함수이다. 사용하는 방법은 setTimeout(function(){ // Code here}, 지연시간) 의 형식으로 적어주면 된다. setTimeout(funtion(){}) 이렇게 사용하지 않고 함수를 따로 만들었을 경우, 그 함수의 이름만 적어주면된다. 지연시간은 밀리세컨드 단위로 설정 해야한다. 예를들어 지연시간 1000은 1초, 10000은 10초를 의미한다. 위코드에서는 지연시간을 5000.. 2023. 9. 15.
[WEB]JavaScript 변수(var, let, const) 사용하기 JavaScript 변수(var, let, const) 변수는 값이 변하는 것이 가능한 데이터를 말한다. JavaScript에서 데이터 값을 저장하기 위해서 보통 사용한다 JavaScript에서 사용하는 변수의 종류는 var(ES5), let(JS), const(JS)를 주로 사용한다 var 키워드는 1995~2015까지 모든 자바스크립트 코드에서 사용되었고 let, const 키워드는 2015년에 자바스크립트에 추가 되었다 대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따른다 그래서 ES5 까지는 글로벌 스코프(Global Scope)와 기능 스코프(Function Scope) var를 사용해서 변수를 생성하였다 ES6부터 let그리고 const 블록 스코프(.. 2023. 9. 14.
[WEB] form(폼) 태그 사용하는 방법과 속성 form(폼) 태그 사용하는 방법과 속성 서버로 유저의 정보를 전송하려고 사용한다 사용자 의견이나 정보를 알기 위해 입력 하는 틀을 폼이라고 생각하면된다 폼(form) 태그 속성에는 name, action, method, target 등 다양한 속성들이 있다 form 설명 action 폼 전송할 서버 쪽 스크립트 파일을 지정한다. name 폼을 식별하기 위한 이름을 지정한다 accept-charset 폼 전송에 사용할 문자 인코딩을 지정한다 taget:action action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다 method 폼을 서버에 전송할 http 메소드를 정한다. form을 구성하는 태그 요소 , 태그 태그는 폼(form)태그 안에 관련 있는 요소들을 그룹화 할.. 2023. 9. 14.
[WEB]jQuery 응용 -Animation 만들기 Animation을 만들기 전에 어떤 디자인을 할지 미리 생각을 하고 시작 스타일과 최종 스타일에 대한 CSS 를 만들어 준다 그런다음 원하는 방식으로 Transition을 추가해서 동작을 구현해준다 jQuery 이용해서 Animation 만들기 jQuery에서 제공하는 다양한 라이브러리가 존재한다 jQuery 입문 | 이펙트(effect) 효과 개발 지식 공유 www.devkuma.com 애니메이션 효과 $(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]); 더보기 backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidt.. 2023. 9. 12.
[WEB]jQuery(라이브러리)설치&기본 함수 jQuery(라이브러리)설치 jQuery 를 사용하면 $ 은 쿼리 셀렉터를 의미 addEventListener = on 함수명을 짧게 사용 가능하다 https://releases.jquery.com/ jQuery CDN jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac releases.jquery.com .. 2023. 9. 12.
[WEB]HTML태그, class 속성 - Space(공백)으로 여러클래스 만들기 Space(공백)으로 여러클래스 만들기 HTML을 사용하다보면 많은 클래스들을 만드는데 그럴때마다 클래스를 하나하나 만들어 줄 수도 있지만 class 속성안에서 space(공백)을 하나 띄워주는 방법으로도 또 다른 클래스를 만들어 줄 수 있다 An item A second item A third item A fourth item And a fifth one 예를 들어서 오른쪽 상단에있는 메뉴 버튼을 누르면 관련된 메뉴 리스트가 아래에 나오는 것을 구현하고 싶은데 .js를 사용해서 이것을 구현 해보려고 한다 Navbar An item A second item A third item A fourth item And a fifth one .list-group { width: 100%; display: none.. 2023. 9. 12.
[WEB]JS, Funtion 만들기-동적 UI 만들기 JS, Funtion 만들기-동적 UI 만들기 동적 UI 란? 블로그가 있을 때 새로운 글을 올리기 위해서 추가 버튼을 눌러서 글을 작성하고완료버튼을 눌렀을 때 없었던 글 목록이 생기는 기능과 같다고 생각하면 된다 이미 만들어져 있는 것이 아닌 없었는데 동작을 통해서 새로 생기는 것을 동적생성 이라고도 부른다 추가 버튼을 누르면 메세지 박스가 생성되는 버튼을 js를 사용해서 만들기 위해서 다음과 같이 HTML/CSS 디자인을 먼저 해준다 더보기 hello! close 추가 body { margin: 10; } div { box-sizing: border-box; } .alert-box-bg { background-color: tan; padding: 20px; border-radius: 5px; disp.. 2023. 9. 11.
WEB-참고 자료 모음 Web 온라인 참고 자료 사이트 https://www.w3schools.com/ W3Schools Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, reference.. 2023. 9. 11.
[WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기 Javascript를 이용해서 html 글 내용 변경하기 Javascript 를 사용하는 곳과 방법은 다양하다 html 조작, 서버와 통신 , 클릭-타이핑 감지 , 비동기 처리 , 자료 다루기 등이 가능하게 해준다 html에서 javascript를 사용하기 위해서 html 을 하나를 만들어 작성해준다 안녕하세요! document.getElementById()를 사용해서 아이디의 이름을 가져오는 셀렉터이고 innerHTML 속성은 HTML안에있는 id 값을 변경 해주는 코드이다 이렇게 자바스크립트를 작성하는 방법을 알고 Java Script를 사용해서 다양한 동작을 만들수 있다 폰트 사이즈 변경하는 방법 font size : 20px 안녕! 폰트의 사이즈를 변경하기 위해서는 다음과 같은 코드로 변경해주어야.. 2023. 9. 11.
실업인정 절차 제도 및 절차 개관 실업급여 실업급여 제도, 실업 인정 절차 이해 경영상 해고 등 부득이한 사유로 이직시 적극적 재취업활동 구직활동 지원금(구직급여) 실업인정 실업인정 대상 기간중에 실업상태였는지 여부와 재취업활동 여부 확인하고 구직급여 지급 여부를 결정 1~4주 단위로 실업 인정 받아야 구직 금여 지금 인정 받지 못하면 구직 급여 소멸 고용보험 수급 자격증 확인 사항 실업 인정 담당자 이름 소정 급여 일수 1/2 시점 = 조기 재취업 수당 기간을 알고 있으면 됨 구직 번호 구직 신청서 작성 후 제출 미 제출시 실업급여 지급 x 구직 등록 정보 비공개 원칙 알선을 원할 경우 공개 전환(구직 활동 모니터링됨 ) 소정 급여 일수 만료일(실업급여를 받을 수 있는 기간) 소정 급여 일수(사람마다 다른데 수급기간.. 2023. 9. 11.
[WEB]HTML, @keyframes 로 animaiton 만들기 HTML, @keyframes 로 animaiton 만들기 @keyframes 애니메이션 명 { 0% { 애니메이션 시작 } 50% { 애니메이션 시작하고 50% } 100% {애니메이션 끝! } } @keyframes move_title { 0% { transform: translateX(0px); } 30% { transform: translateX(-50px); } 60% { transform: translateX(50px); } 100% { transform: translateX(0px); } } 0~100% 완료 될 때 까지의 동작을 수치 상으로 만들어 주면 된다 .menu-text-title:hover { animation-name: move_title; animation-duration: 2.. 2023. 9. 6.
[WEB]HTML, transform사용하기 transform 사용하기 transform:roate(회전정도 값 deg) transform: rotate(180deg); transform: traslateX(이동 값) / traslateY(이동 값) / traslateZ(이동 값) transform: translateX(10px); transform: translateY(10px); transform: translateZ(10px); translate(X,Y,Z)를 하면 값이 동시에 적용되지 않는다 값을 동시에 적용받아 위치를 이동하고 싶은 경우에는 transform: translate3d(X이동값, Y 이동값, Z이동값) 을 사용해서 이동 시켜야한다 transform: translate3d(60px, 10px, 30px); transform: s.. 2023. 9. 6.
[HTML]HTML 안에 Video, Audio 적용하는 방법 HTML, Video 적용하는 방법 html 파일을 하나 만들어주고 를 넣어준다 넣어주면 화면에 영상이 뜨는 것을 확인 할 수 있다 video만 작성하면 재생을 할 수가 없는데 재생을 하는 방법은 video 태그안에 속성 값을 넣어주어야한다 video 태그안에 속성 값 controls 재생 바를 보여줌 autoplay 자동으로 재생 - 재생이 안되는 경우 뒤에 muted를 넣어준다 loop 영상을 반복 재생 poster="경로" 시작전 썸네일 이미지를 지정해준다 preload="auto" 페이지가 로드 될 때, 전체 파일을 같이 로드 해줌 preload="metadata" 페이지가 로드 될 때, 파일의 메타데이터만 로드 해줌 preload="none" 페이지가 로드 될 때, 파일을 불러오지 않는다 (미리.. 2023. 9. 6.
[HTML]SASS, @use 문법 SASS, @use 문법 CSS를 사용하다 보면 계속 사용하는 파일들을 복사 붙여넣기 하기 귀찮을 때,다른 파일에 있는 내용을 가져오고 싶을 때사용하는 방법 새로운 .scss 파일을 하나 만들어준다 그리고 파일 안에 기본적으로 적용할 파일들을 넣어준다 작성해준 파일을 불러오는 방법은 @use'파일경로' 의 형태로 작성을 해준다 CSS 파일을 확인하면 상단에 'defalut'에 작성한 내용이 들어가 있는 것을 확인 할 수 있다 @minxin. $변수도 가져와서 재활용 할 수 있다 다른 파일 안에 있는 @mixin 을 사용하기 위해서는 @include mixin이름 앞에 파일명을 적어주면된다 2023. 9. 6.
[HTML]Sass, @Mixin 사용하기 @Mixin()사용하기 @Mixin은 함수와 같은 기능을 한다 사용 하는 방법은 @expend와 비슷하지만 %임시변수가 아닌 @mixin font_void() { width: 200px; height: 200px; padding: 20px; } .box-green { @include box_size(); } .box-blue { @include box_size(); } .box-red { @include box_size(); } @mixin 함수명(){} 함수를 불러오는 방법은 @include 함수명(); 을 사용해서 불러온다 위와 같이 코드를 작성하면 @expend를 사용하는 것과 같은데 @mixin() 을 사용하면 코드를 가변적으로 만들수 있다 박스의 크기가 동일하게 나와버린다 각각의 사이즈를 다르게.. 2023. 9. 5.
728x90
반응형

티스토리툴바