Fall in IT.

안녕하세요. 오늘은 태그를 가운데 수평 가운데 정렬하는 방법에 대해서 알아보겠습니다. 태그 수평(horizontal) 가운데 정렬하는 방법parent div 와 child div 의 position이 기본(static) 또는 relative일 경우 (아래 코드 참조) - sample code) Document .parent { border: 4px solid tomato; width: 700px; height: 700px; } .child { border: 2px solid gold; width: 200px; height: 200px; margin: 0 auto; } 결과child의 div position이 absolute 일 경우 - sample code ) Document .parent { posit..

안녕하세요. 오늘은 rem과 em에 대해서 간단하게 알아보도록 하겠습니다. em이란?길이가 유연한 가변 단위. media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.상위 엘리먼트의 폰트 사이즈를 기준으로 적용되는 방식 (정확히는, 실제 사용된 요소의 폰트 크기와 직접 연관 된다고 합니다.) - 자세한 내용 rem이란?길이가 유연한 가변 단위.media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.최상위 엘리먼트(html)의 폰트 사이즈를 기준으로 적용되는 방식 px로 사이즈를 지정할 경우?절대값으로 사용되는 단위. 뷰포트의 크기에 상관없이 고정된 값으로 렌더링 됩니다. rem을 사용하는 경우요소에 크기가 절대 ..

안녕하세요. 오늘은 자바스크립트에서 부분 문자열을 비교하는 방법에 대해서 알아보겠습니다. 부분 문자열 비교하는 법indexOf 를 사용합니다. 결과값이 -1이 아닐 경우 찾는 문자열이 존재합니다.indexOf는 str2가 일치하는 문자열의 str의 시작 index를 리턴합니다.ex) 부분문자열이 존재할 경우 var str = "cordova-diagnostic-plugin"; var str2 = "cordova"; console.log(str.indexOf(str2)); // 결과값 0 ex2) 부분문자열이 존재하지 않을 경우 var str = "cordova-diagnostic-plugin"; var str2 = "ppppp"; console.log(str.indexOf(str2)); // 결과값 -1..

안녕하세요. 오늘은 Typescript의 기초 문법들을 알아보도록 하겠습니다. ES6(ECMAScript6)란?ECMAScript는 자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준이다.ECMAScript는 브라우저에 사용되는 자바스크립트 부분만 표준으로 정의한다. Typescript란?Javascript superset 이며, 간단히 타입이 있는 자바스크립트라고 말할 수 있습니다. Typescript 설치 (npm(node package module)이 설치되어 있다는 가정하에 설명합니다. Nodejs 설치시 함께 설치됩니다.)$ npm install -g typescript설치한 typescript 버전 확인 $ tsc -v ts파일을 js파일로 컴파일tsc 파일명.ts $ tsc mai..

안녕하세요. 오늘은 Flex를 사용하여 웹페이지의 레이아웃 잡는 방법에 대해서 알아보겠습니다. flex란?flex는 웹페이지를 만들때 layout을 쉽게 만들 수 있도록 도와주는 CSS 속성 입니다. 일반적인 웹페이지 구성 모두 div로 나누지 않고, 위에 그림과 같이 시멘틱태그를 사용하는 이유는?시멘틱태그를 사용하면 웹페이지의 태그 구조를 쉽게 파악할 수 있습니다.검색 엔진에 걸릴 확률이 높아 집니다. 시멘틱태그(semantic tag)란?특정한 태그에 의미를 부여한 것.header는 제목, section은 본문 등.. (생활코딩 참조) flex 기본 속성flex를 사용하기 위해서는 display : flex 속성을 부여해야 합니다.flex-direction 을 사용해서 정렬방향을 설정 합니다.flex..

안녕하세요. 오늘은 웹페이지를 만들때, 기본적으로 시작하는 레이아웃 잡는 방법에 대해서 알아보겠습니다. 웹사이트 레이아웃 잡기상단 header 영역을 잡습니다.중간에 contents 영역을 잡습니다.하단에 footer 영역을 잡습니다.필요하다면 contents 영역을 또 세부적으로 나눕니다. - aside, section 영역이라고 부릅니다. 이렇게 세부적으로 나뉘고, 나뉘고 나뉘면 웹사이트가 완성됩니다. 웹사이트 별거없지요.. ^^ 아래 영상을보고 따라해보세요~ 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 자바스크립트에서 Date 포맷 변경할때 유용한 Moment.js의 사용법에 대해서 알아보겠습니다. (당연히 nodejs에서도 사용가능합니다. ^^) Moment.js란? 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다.또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다.Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다. Moment.js 공식 홈페이지https://momentjs.com/ Moment.js 설치홈페이지에서 직접 다운받을 수 있으며, npm과 같은 패키지매니저를 사용하여 설치 할 수 있습니다. Moment.js 사용법다운받은 js파일은 ..

안녕하세요. 오늘은 자바스크립트에서 비동기 프로그래밍을 더욱 편리하게 할 수 있도록 도와주는 Promise 기술에 대해서 알아보겠습니다. 비동기 프로그래밍이란?비동기 프로그래밍이란, 쉽게 예를들어보면 3가지 일을 해야한다고 할 경우에, 한가지 일을 하면서 다른일도 동시에 하는 것을 의미합니다. (동시처리)동기적 프로그래밍이란 그 반대로, 한가지일을 차례차례 하는 것을 의미합니다. (1번 일 먼저 처리 > 2번 일 처리 > 3번 일을 처리)생활코딩 영상에 쉽고, 간단하게 설명되어 있습니다. ^^ - https://opentutorials.org/course/2136/11884 Promise란?Promise는 자바스크립트에서 콜백 로직을 편하게 사용할 수 있도록, 간편화한 것을 말합니다. - 전통적인 콜백 ..

안녕하세요. 오늘은 SASS에 대해 알아보겠습니다. SASS란?CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다. SASS홈페이지http://sass-lang.com/ SASS 설치방법윈도우에서 설치 방법 - http://rubyinstaller.org/에 방문해서 ruby를 설치한다. - 윈도우키+R키를 누르고 cmd를 입..

안녕하세요. 오늘은 MAC에서 npm으로 광역모듈 설치시, 해당 모듈을 찾지 못하는 에러에 대해서 알아보고 해결해보도록 하겠습니다. 에러상황npm으로 광역모듈 설치후 임포트하여 사용하려고 할때 해당 모듈을 찾지 못한다는 에러 발생에러원인npm으로 설치한 모듈의 설치경로(디폴트) - /usr/local/lib/node_modules node.js의 프로젝트 상에서 모듈을 찾는 경로(디폴트) - /usr/local/lib/node 해결방법node.js의 프로젝트가 모듈을 찾는 경로에 npm의 설치경로를 심볼릭링크로 걸어주면 됩니다. - $ ln -s /usr/local/lib/node_modules node 모두 즐거운 코딩하세요~