태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

NodeJs 설치하기

설치하기 전 읽어보기

  • npm에 대하여 (참고문서: https://docs.npmjs.com/getting-started/what-is-npm)
    • npm은 javascript 개발자들에 의해 공유와 재사용을 쉽게할 수 있도록 만든 패키지 매니저 프로그램입니다.
    • npm의 주요기능 (참고: https://velopert.com/241)
      • NPMSearch에서 탐색 가능한 node.js 패키지/모듈 저장소
      • Node.js 패키지 설치 및 버전/호환성 관리를 할 수 있는 커맨트라인기반 유틸리티

  • Yarn에 대하여 (참고문서: http://www.eloquentwebapp.com/yarn-new-package-manager-javascript/)
    • npm 이라고 하는 기존에 널리 사용되고 있는 javascript 패키지 매니져의 단점과 기타 안정성과 속도를 개선한 패키지 매니져입니다.
    • 페이스북, Exponent, Google 과 Tlide의 엔지니어 그룹이 함께 협력하여 만들었으며 npm보다 빠르고 안정적이고 안전하다고 합니다.

Node JS 설치 (Windows 환경 기준)

  • 설치 파일 다운로드: https://nodejs.org/en/download/
    • 설치 버전은 안정화버전(v6.10.3 LTS)을 다운받는 것으로 추천합니다.
    • 설치 파일 다운로드 후 마법사에 따라 설치를 진행하면 됩니다.
    • 설치 옵션에 전역 환경설정을 하도록 체크하세요.
  • 설치 확인 방법
    • Command 프로그램을 실행하여 npm 명령어 실행
      • Usage: npm <command> … 등의 메시지가 나오면 설치 완료

Yarn 설치 (Windows 환경 기준)

  • 설치파일 다운로드: https://yarnpkg.com/en/docs/install
    • 설치파일을 다운로드하여 설치마법사를 이용하여 쉽게 설치 가능합니다.
  • 설치 확인 방법
    • Command 프로그램 실행 후 "yarn" 명령어를 실행하여 아래의 메시지가 나오면 설치 완료
      • 처음 설치하였다면 각종 패키지 파일을 자동으로 다운받습니다.


about {LESS} CSS

시작하기

  • 역사

    • 2009년 Alexis Sellier가 만들었으며 Ruby로 처음 작성되었고 그 이후에 javaScript로 대체되었습니다.

  • 지원하는 언어

    • LESS는 아래의 프로그래밍언어에 사용할 수 있으며, 각 언어들마다 다양한 Open Source 프로젝트로서 LESS를 지원하고 있습니다.

    • 참고 ( http://lesscss.org/about/#ports )
      1. Java
      2. .Net
      3. PHP
      4. Python
      5. Ruby
      6. Go
  • 그래서 LESS는

    • Open Source
    • CSS로 컴파일되고 클라이언트 혹은 서버에 실행될 수 있는 동적 스타일 시트 언어입니다.
    • 브라우저가 LESS.js를 통해 실시간 컴파일

LESS 설치

  • 설치 전 준비

    • NPM을 이해하고 설치해야 합니다.
  • 설치하기

    • 다음의 명령을 이용하여 시스템 전역으로 설치하거나
      • npm install less -g
    • 프로젝트에서만 사용할 수 있도록 설치할 수 있습니다.
      • npm i less --save-dev

    사용하기

  • 설치가 끝나고 바로 HTML 혹은 CSS에서 LESS(*.less)로 작성된 파일을 읽어서 사용할 수 있을까요? 그렇지 않습니다.
  • LESS로 작성된 파일은 css로 변환하는 과정이 필요합니다.
  • 이 문서에서는 node에서 설치된 less 도구로 변환하는 방법을 소개합니다.
  • less로 작성된 코드가 있는 곳으로 이동하여 Terminal 에서 명령어를 아래와 같이 입력합니다. lessc 라는 컴파일러를 사용합니다.

    예 (style.less)

    • lessc style.less > style.css

    • 결과 (style.css)

  • 이렇게 생성된 css를 프로젝트에서 불러오기하여 사용할 수 있습니다.
  •  주의사항

  • 작성된 less 코드에서 변수 선언 시 공백을 주의하세요.
  • 위의 방법외에 직접 less(*.less)를 파일(웹 페이지를 의미)에서 직접 불러오고 사용할 수 있으나, 별도의 less.js 파일이 필요하며, 성능이 느린 단점이 있어 권장하지 않습니다. 따라서 관련된 정보는 이 문서에서는 안내하지 않습니다.

    • <link rel="stylesheet/less" type="text/css" href="style.less> <script src="less-1.3.1.min.js" type="text/javascript"></script>

    • 우리가 LESS로 할 수 있는 것 (+특징)

      코드 작성

      LESS는 변수를 정의할 수 있으며 변수의 정의는 (@)로 변수의 할당은 (;)로 수행됩니다.

    • LESS는 변환이 되는 동안 CSS문서로 출력이 됩니다.

    • 변수를 정의하고 할당할 수 있다는 것은 그 역할을 재사용할 수 있다는 뜻이 될 수 있습니다.

    • 변수 혹은 코드의 재사용은 LESS의 큰 장점 중 하나입니다. (-기본 코드 참고)

    • 기본 코드


    • @pale-green-color : #4D926F ; #header { color : @pale-green-color ; } h2 { color : @pale-green-color ; }



    • #header { color : #4D926F ; } h2 { color : #4D926F ; }


    • MixIn

      MixIn(믹스인)이라고 명명하고 있는 이 것은 마치 정의된 클래스를 Function과 같이 사용할 수 있음을 의미합니다.

      예:


    • .mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; } .rounded-corners ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @radius ; -moz- border-radius : @radius ; border-radius : @radius ; } #header { .rounded-corners; } #footer { .rounded-corners (10px 25px 35px 0px) ; }


    • 결과:


    • .caller { width: 100%; height: 200px; } #header { -webkit-border-radius: 5px 10px 8px 2px; -moz-border-radius: 5px 10px 8px 2px; border-radius: 5px 10px 8px 2px; } #footer { -webkit-border-radius: 10px 25px 35px 0px; -moz-border-radius: 10px 25px 35px 0px; border-radius: 10px 25px 35px 0px; }


    • 따라서 위와 같이 정의된 변수를 function처럼 사용할 수 있고 function에서 가져온 변수를 현재의 영역에 대입할 수 있습니다. (재사용할 수 있죠)
    • 단순히 값만 지정할 수 있는 것이 아니며, 계산식을 대입하여 사용할 수도 있습니다.

      예:


    • .average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }


    • 결과:


    • div { padding: 33px; }


    • 중요한 부분 중 한가지는 호출자 범위 내에서 지정된 변수는 외부의 전역변수보다 우선시 됩니다. (이전의 CSS와 동일한 수준)
    • 연산

      위의 Mix In 예제에서도 나왔지만 연산기능이 있습니다.


    • .sum(@a, @b) { @summary: @a + @b; } div { .summer { .sum(5, 5); left: @summary; } }


    • 결과:


    • div.summer { left: 10; }


    • 중첩

      CSS의 관계식보다 보다 편리하게 표현 및 이해할 수 있습니다.

      CSS의 경우 div 하위의 모든 <button />과 <a /> Element를 포현할 경우


    • div > button { ... } div > a { ... }


    • LESS의 경우 보다 쉽게 표현할 수 있습니다.


    • div { button { font-size: 10px; color: blue; } a { size: 5px; } }


    • Mixin Guards

    • 앞서 언급한 Mixin 기능에서 한걸음 더 나아간 기능이며, 조건식을 포함할 수 있습니다.
    • 예를 들어 어떤 Element의 배경색이 50%이하일 때 특정 클래스의 값을 변경하는 등의 조건으로 javascript를 이용하지 않더라도 LESS 내에서 처리할 수 있습니다.

      예 (정의하기)


    • .mixin (@a) when (lightness(@a) >= 50%) { // lightness가 50% 이상일 때 background-color: black; // 배경색을 black으로 지정하고 } .mixin (@a) when (lightness(@a) < 50%) { // lightness가 50% 이하일 때 background-color: white; // 배경색을 white로 지정해라 } .mixin (@a) { color: @a; }


    • 예(사용하기)


    • .class1 { .mixin(#ddd) } .class2 { .mixin(#555) }


    • 결과 (CSS로 컴파일)


    • .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }


    • 사용할 수 있는 연산자

    • >, >=, =, =<, <, true

    • 이외에는 모두 false 입니다.
    • 이외 상세한 내용은 여기에서 확인할 수 있습니다.

    • http://lesscss.org/features/#mixin-guards-feature
    • 반복문(loop)

      반복문을 사용하여 클래스(들)를 생성할 수 있습니다. 좋은 예제로 테이블의 컬럼 수에 따라 컬럼별 색상을 다르게 주거나 혹은 row의 색상을 다르게 줄 수 있습니다.


    • .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }


    • 결과


    • .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }


    • 상위 셀렉터

      & 를 이용하여 상위 셀렉터를 묵시적 지정할 수 있습니다. 


    • a { color: blue; &:hover { color: green; } } .button { &-ok { background-image: url("ok.png"); } &-cancel { background-image: url("cancel.png"); } &-custom { background-image: url("custom.png"); } }


    • 결과


    • a { color: blue; } a:hover { color: green; } .button-ok { background-image: url("ok.png"); } .button-cancel { background-image: url("cancel.png"); } .button-custom { background-image: url("custom.png"); }


    • & 는 모든 부모를 나타냅니다. 즉 바로 위의 부모 셀렉터만 의미하는 것이 아닌 나열된 모든 부모 셀렉터를 의미합니다.


    • .grand { .parent { & > & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } } }


    • 결과


    • .grand .parent > .grand .parent { color: red; } .grand .parent .grand .parent { color: green; } .grand .parent.grand .parent { color: blue; } .grand .parent, .grand .parentish { color: cyan; }


    • 위의 예제에서 &가 1개 표현될 때 상위의 모든 부모들이 나열되는 것을 확인할 수 있습니다.
    • 이외의 Selecoor의 순서를 변경하는 방법은 이곳을 참고하세요 ( http://lesscss.org/features/#parent-selectors-feature )
    • Functions

    • LESS에서 제공하는 다양한 Function에 대한 설명입니다.
    • 아래의 사이트에서 제공하는 Function을 확인하고 사용할 수 있습니다.
    • Misc, String, List, Math, Type, Color의 카테고리에 관련된 Function들이 준비되어 있습니다.


http://lesscss.org/functions/


Tag // css, less

PHP-include 와 require 의 차이점

 

출처:

require: http://php.net/manual/en/function.require.php
include: http://php.net/manual/en/function.include.php

 

 

  • require
    • 원문: require is identical to include except upon failure it will also produce a fatal E_COMPILE_ERROR level error. In other words, it will halt the script whereas include only emits a warning (E_WARNING) which allows the script to continue.
    • require 는 에러가 발생될 때 E_COMPILE_ERROR 수준으로 오류가 생성됩니다. 즉, 스크립트에러가 발생하게 되면 계속 컴파일을 하는 include 와 달리 오류를 발생하며 더 이상 페이지를 로드하지 않게 됩니다.
    • C#에서 #include 와 같습니다.
  • include
    • 원문:
    • The include statement includes and evaluates the specified file.

      The documentation below also applies to require.

      Files are included based on the file path given or, if none is given, the include_path specified. If the file isn't found in the include_path, include will finally check in the calling script's own directory and the current working directory before failing. The include construct will emit a warning if it cannot find a file; this is different behavior from require, which will emit a fatal error.

      If a path is defined — whether absolute (starting with a drive letter or \ on Windows, or / on Unix/Linux systems) or relative to the current directory (starting with . or ..) — theinclude_path will be ignored altogether. For example, if a filename begins with ../, the parser will look in the parent directory to find the requested file.

      For more information on how PHP handles including files and the include path, see the documentation for include_path.

      When a file is included, the code it contains inherits the variable scope of the line on which the include occurs. Any variables available at that line in the calling file will be available within the called file, from that point forward. However, all functions and classes defined in the included file have the global scope.

    • include 는 외부 파일을 불러올 때 사용합니다. 페이지에서 로드할 때마다 새롭게 갱신(로드)하여 페이지에서 컴파일되어 보여지게 되는데, 스크립트의 에러가 발생하더라도 중지되지 않고 나머지 내용을 페이지에 출력합니다.
    • 일반적인 페이지 출력을 위해서 사용되며, include 문장을 만날 때 호출이 됩니다.

'Languages > others' 카테고리의 다른 글

PHP-include 와 require 의 차이점  (0) 2013.10.29
|  1  |  2  |  3  |  4  |  ···  |  79  |