세모튜브

유튜브 강좌 : youtu.be/nJD_rrGOJMY - resource폴더 만들어 이미지 가져오기 - wxss import해서 사용하기 사용법 : @import "경로/파일.wxss"; /* common.wxss */ /* block */ .block { display: block; } /* flex */ .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .dir-col { flex-direction: column; } /* background-color */ .bg-red { background-color: red; } .bg-green { background-color: g..

유튜브 강좌 : youtu.be/5JZCNbjRgIQ - View Containers view 미니프로그램의 모든 구성 요소는 view를 기반으로 합니다. view는 HTML 요소와 비슷한 속성을 가지고 있습니다. /* componets.wxss */ page { background-color: ghostwhite; font-size: 14px; } .bg-red { background-color: red; } .bg-green { background-color: green; } .bg-blue { background-color: blue; } .flex { display: flex; } .flex-1 { flex: 1; } .dir-col { flex-direction: column; } .paddin..

유튜브 강좌 : youtu.be/6h_7w3shGGs flex === flexbox (레이아웃) 위챗 미니프로그램은 flexbox 레이아웃을 이용하여 컴포넌트를 배치합니다. flexbox는 화면에 적합한 너비와 높이의 레이아웃을보다 쉽게 설정하여 사용할수 있습니다. 부모 요소를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소들을 Flex Item(플렉스 아이템)이라고 부릅니다. container가 flex의 영향을 받는 노란색 공간이고 설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것입니다. Flex의 속성은 아래 2가지로 구분해서 알아보겠습니다. - 컨테이너에 적용하는 속성 - 아이템에 적용하는 속성 경계 속성 : margin, padding, border 위 이미지와..

유튜브 강좌 : youtu.be/_ktOptKv-JE - WXSS WXSS (WeiXin Style Sheets)는 WXML 구성 요소 스타일을 설명하기위한 매우 유사한 CSS 스타일 언어입니다. CSS의 기능을 대부분 갖추고 있으며, WeChat적합하도록 CSS를 확장. WXML 구성 요소를 표시하는 방법을 결정. wxss 사용법 Selector { Property:Value; Property:Value; ... } - Selector 종류 및 사용법 Selector 예시 해석 .class .my-class class="my-class"인 모든 components #id #my-id id="my-id"인 모든 components element view 모든 "view" components element..

유튜브 강좌 : youtu.be/q6p8hHEYilA - WXML 웹 개발을 하기위해서는 일반적으로 HTML을 사용하여 레이아웃을 만들고 CSS를 사용하여 스타일을 정의합니다. WeChat Mini Program은 WXML 및 WXSS을 제공합니다. WXML(WeiXin Markup Language)은 HTML과 유사한 태그언어로, 구성요소와 소스시스템을 결합하여 페이지를 빌드 할 수 있습니다. WXSS (WeiXin Style Sheets)는 WXML 구성 요소 스타일을 설명하기위한 매우 유사한 CSS 스타일 언어입니다. js소스에서 wxml에 데이타 가져오기 //wxml.js Page({ data: { message : 'Hello World', }, onLoad: function (options) ..

- Math 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체. Math.E : 오일러의 상수이며 자연로그의 밑.약 2.718. Math.LN2 : 2의 자연로그.약 0.693. Math.LN10 : 10의 자연로그.약 2.303. Math.LOG2E : 밑이 2인 로그 E.약 1.443. Math.LOG10E : 밑이 10인 로그 E.약 0.434. Math.PI : 원의 둘레와 지름의 비율.약 3.14159. Math.SQRT1_2 : ½의 제곱근.약 0.707. Math.SQRT2 : 2의 제곱근.약 1.414. console.log(Math.E); //2.718281828459045 console.log(Math.LN2); //0.6931471805599453 console.log(Ma..

유튜브 강좌 : youtu.be/qbncWPR8yMQ ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어. ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다. - 함수 function 어떠한 작업을 할 수 있도록 설계된 블록. 함수의 형태 : 일반함수, ES5, ES6 일반함수 function myFunc1(param1, param2) { // 일반함수 return param1 + param2; }; ES5 var myFunc2 = function (param1, param2) { // ES5 return param1 + param2; }; ES6..

유튜브 강좌 : youtu.be/qbncWPR8yMQ - 연산자 산술 연산자 + : 덧셈 - : 뺄셈 * : 곱셈 ** : 지수연산(ES2016) / : 나눗셈 % : 나머지 ++ : 증가 -- : 감소 피연산자 뒤에 붙여(예: x++) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다. var x = 3; var y = x++; // y = 3, x = 4 console.log(y); console.log(x); 피연산자 앞에 붙여(예: ++x) 접두사로 사용한 경우 증가한 후의 값을 반환합니다. var a = 2; var b = ++a; // a = 3, b = 3 console.log(a); console.log(b); 할당 연산자 = : x = y : x = y += : x += y : x = ..

유튜브 강좌 : youtu.be/-bBsnpC3Gtk - 주석처리 주석 2가지 방식 한줄씩 처리 => // 사용 문단 처리 => /* ...문단내용 ... */ 단축키 Alt + c //한줄 주석처리 /* 여기서부터 문단 주석이 시작됩니다. 가자 어디로 들로 산으로 여기가 문단 주석의 끝입니다. */ - 콘솔명령 console.log("콘솔에 log를 출력합니다."); console.info('콘솔에 info를 출력합니다.'); console.warn("콘솔에 warnning을 출력합니다."); console.error("콘솔에 error를 출력합니다."); - 변수(variable) 변수 선언 규칙 숫자로 시작할수 없습니다. 특수문자를 사용할수 없습니다.(단, $,_는 가능) 대소문자 구분합니다. (A..

유튜브 강좌 : youtu.be/FGnI5kezdO0 - 위챗 미니프로그램 프로젝트는 Applet과 여러 Pages로 구성되어진다. Applet의 주요 구성은 3개의 파일로 구성되며 프로젝트의 루트 디렉토리에 존재해야 합니다. Applet 필수여부 app.js 예 Applet 자바스크립트 app.json 예 미니프로그램 공통 설정 app.wxss 아니오 미니프로그램 공통 스타일 시트 Page의 주요 구성은 4개의 파일로 구성되며 사용자 정의에 따라 디렉토리에 존재한다. Page 필수여부 페이지명.js 예 Page 자바스크립트 페이지명.json 아니오 Page 설정 페이지명.wxml 예 Page 뷰 페이지명.wxss 아니오 Page 스타일 시트 - 위챗 미니프로그램 프로젝트의 LifeCycle은 다음과 같..