기본

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex 사용

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex-direction

축의 방향

flex-direction: row 가 기본.

/* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;

/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;

/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;

/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;

/* 전역 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

justify-content

justify-content: flex-start;  기본값

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 축에서 시작지점 */
justify-content: flex-end;   /* 축에서 끝지점 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* 축을 기준으로 균일하게 정렬 */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

justify-content: space-between; 

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

align-items

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

Flex 속성

flex-grow

flex-grow만을 사용할경우 각 여백에 대한 비율로 조정되기 때문에 의도한바로 너비를 지정하기 어렵다. 

/* <number> values */
flex-grow: 1;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

flex-basis

flex-basis:auto가 기본속성값

flex-basis:0으로 해주게되면 의도하는 정확한 비율대로 나눌수 있어 사용하기에 효율적이다. 

/* <'width'> 지정 */
flex-basis: 0;
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

Flex 축약형으로 사용하기

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

Animation 

엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

Animation 속성

Animation 축약형 예시

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        background: red;
        transform: translate(300px, 0);
    }
    100% {
        transform: translate(400px, 500px);
    }
}
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background: #fff000;
    animation: sample-ani 2s linear forwards 3;
}

개발자도구에서 확인하기

1. animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

2. animation-timing-function 

가속도를 지정해준다. 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

transition때와 마찬가지로 개발자도구에서 제공되는 cubic-bezier 에디터를 사용하여 적용할 수 있다. 

축약 속성 animation를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리하다.

/* Keyword values */
animation-timing-function: ease; /* 애니메이션 중간까지 속도가 올라가고 중간 이후 느려짐 cubic-bezier(0.25, 0.1, 0.25, 1.0) */
animation-timing-function: ease-in; /* 천천히 시작해 끝날때까지 빨라짐 cubic-bezier(0.42, 0, 1.0, 1.0)  */
animation-timing-function: ease-out; /* 빨리 시작해 점점 느려짐 cubic-bezier(0, 0, 0.58, 1.0)  */
animation-timing-function: ease-in-out; /* 천천히 시작했다 빨라지고 다시 느려지며 끝남 cubic-bezier(0.42, 0, 0.58, 1.0) */
animation-timing-function: linear; /* 등속 cubic-bezier(0, 0, 1.0, 1.0) */
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(17); 
animation-timing-function: steps(4, end);

/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

cubic-bezier

+ 베지어 곡선 이란?

컴퓨터 그래픽 등에서 사용되는 매개변수 곡선으로 부드러운 곡선을 만드는데 이용.

폰트 애니메이션 등에 사용.

cubic-bezier는 베지어 곡선을 정의하는 함수로 

4개의 포인트 (P0, P1, P2, P3)로 정의한다.

https://cubic-bezier.com/#.17,.67,.83,.67

3. animation-delay

애니메이션의 시작할 시점을 지정한다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있다.

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

4. animation-iteration-count 

- 몇 번 반복될지 지정한다.

animation-iteration-count: 3;         /* 3번 반복 */
animation-iteration-count: infinite;  /* 무한 반복 */

5. animation-delection

애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정한다..

/* Single animation */
animation-direction: normal;
animation-direction: reverse; 	/* 반대로 재생 */
animation-direction: alternate; /* 출발에서 끝. 끝에서 출발지점으로 번갈아가며 재생 */
animation-direction: alternate-reverse;  /* 출발은 반대부터 시작하여 번갈아가며 재생 */

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

6. animation-fill-mode

 애니메이션의 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다..

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards; /* 끝나는 시점의 위치로 지정*/
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

7. animation-play-state

애니메이션이 실행 중인지 일시 중지되었는지 설정한다.

hover일때 paused를 지정해주면 마우스오버했을대 멈추를 효과를 줄 수 있다.

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

8. animation-name

@keyframes 규칙을 이용

.box {
	animation-name: sample-ani;
}

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        background: red;
        transform: translate(300px, 0);
    }
    100% {
        transform: translate(400px, 500px);
    }
}

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Transition

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공.

속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

Transition 속성

1. transition 사용하기

- transition을 사용하면 제공되는 모든요소가 기본으로 사용된다.

transition: 1s 2s;  /* duation, delay */

2. transition-property: all; 모든요소의 transition을 사용하겠다.

transition-property: all /* 모든요소 사용 */

3. transition-duration 재생시간 

transition-duration: 1s;

4. transition-timing-function  가속도

transition-timing-function: ease;    /*기본값*/
transition-timing-function: linear;  /*등속도(동일한속도)*/
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.01, 0.82, 0.54, 1.19);

개발자도구에서 속성값 ease앞에 있는 아이콘을 클릭하여 cubic bezier Editor를 열면

transition 의 동작을 나타내주는 그래프를 볼 수 있고 그래프의 각 x축과 y축에있는 원형을 움직여 효과를 변경해줄 수 있다. 

5. transition-delay: 시작시간

transition-delay: 2s; /* 2초 후에 실행된다*/

width, backround-color, font-size 등 수치로 표현되는 변화값을 transition 줄 수 있다. 

Transform

Transform 속성

1. scale()  :  X 또는 Y축으로 확대/ 축소

transform: scaleX(2);          /* X축으로 비율만큼 확대, 축소 */
transform: scaleY(2);          /* y축으로 비율만큼 확대, 축소 */
transform: scale(2, 2);        /* x축, y축으로 비율만큼 확대, 축소 */

2. rotate()  : 지정 요소 회전

transform: rotateX(15deg);  /* x축 기준으로 15deg 만큼 회전 */
transform: rotateY(15deg);  /* y축 기준으로 15deg 만큼 회전 */
transform: rotate(-15deg);  /* -15deg 만큼 회전 */

3. translate() : 지정 요소 X 또는 Y축으로 이동

transform: translateX(10px);        /* X축으로 이동 */
transform: translateY(10px);        /* Y축으로 이동 */
transform: translate(20px, -10px);  /* X축, Y축으로 이동 */

4. skew() : 지정 요소 X 또는 Y축으로 기울이기

transform: skewX(15deg);          /* x축으로 15deg 만큼 기울이기 */
transform: skewY(15deg);          /* y축으로 15deg 만큼 기울이기 */
transform: skew(15deg, 15deg);    /* x축, y축으로 15deg 만큼 기울이기 */

transform-origin 속성 

지정요소의 기준점 변경하기

transform-origin: right bottom;  // px, 백분율(%), top, left, center, right, bottom

https://validator.w3.org/unicorn/

https://jigsaw.w3.org/css-validator/

https://validator.w3.org/

dl,dt,dd 요소

'용어'와 '그 설명' 으로 구성된 목록을 '정의형 목록 또는 정의 리스트(definition list)' 이라고 한다.

dl 요소 : 정의형 목록 (definition list)

dt 요소 : 용어 (definition term)

dd 요소 : 용어 설명부분 (definition description)

많은 브라우저에서 dd 요소가 들여쓰기가 되어 표시

dl 요소

block 요소이지만 dt,dd 요소 이외의 요소를 포함 할 수 없다.

• dl요소 밑에는 dt,dd를 제외한 다른 유형의 요소가 있어서는 안된다.
•  

dt 요소

inline요소이며 inline요소와 텍스트를 포함 할 수 있다.

• dt 내부에 div태그는 허용불가. (inline요소인 p, span, layber 등은 가능)
• 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 dt 요소는 반드시 dd 요소 앞에 있어야 한다.

dd 요소

block요소이며 inline요소와 텍스트를 포함할 수 있고, block요소를 포함할 수 있다.

• dd 요소 내부에는 div , 기타 요소를 포함할 수 있다.
• dl 요소 내에서만 사용되며 반드시 dt 요소와 짝을 이루어 사용해야 한다.

일반적인 단순한 표형태는 dl태그로

복잡한 데이터 및 그리드 같은 복합형 표일경우엔 table로 구성

CSS 포지션(position) 속성

태그들의 위치를 결정하는 CSS

정적, 상대적, 고정, 절대 또는 고정을 지정

• static
• relative
• absolute
• fixed
• sticky

position속성을 설정 한 후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

static (기본값)

- 일단 모든 태그들은 처음에 position: static (정적으로 배치) 상태. (기본적으로 static이라 따로 써주지 않아도 됨.)

- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

- static을 사용하면 top,right, bottom, left를 설정해도 적용되지 않는다.

relative

태그의 위치를 변경하고 싶을때 position: relative를 사용

이후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

기존에 자리를 잡던 위치를 기준으로 위치를 잡는다. (상대적인 위치)

방향으로 주어진 px만큼 이동.

absolute

가장 가까운 위치에 있는 조상과 관련해 배치됨.

문서 전체를 기준으로 위치를 잡는다. (절대적인 위치)

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면 ,

absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임.

 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨.

• 절대위치 요소에 조상이 배치되어 있지 않으면 문서 전체기준에 움직인다.

fixed

특정위치에 고정되어있게 하는 position.

스크롤을 내려도 항상 같은 위치에 유지

sticky

with 요소 position: sticky는 사용자의 스크롤 위치를 기반으로 배치됨

뷰포트에서 지정된 오프셋 위치가 충족될 때 까지 상대적 위치에 배치 된 다음 위치에 고정됨.

참고 : Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다 (아래 예 참조). 또한 중 하나 이상 지정해야합니다 top, right, bottom또는 left끈적 위치가 작동 할 수 있습니다.

전체기준이 아닌 부모를 기준으로 위치를 잡고 싶을 때

부모가 relative이고 자식이 absolute라고 생각한다.

하위 class를 감싸고 있는 상위 class에 relative를 적용하고

하위class에 absolute로 적용하면 , 해당 하위 class가 absolute임에도 불구하고 문서 전체가 아닌 relative속성을 가진 부모(상위) class를 기준으로 위치를 선정하여 부모위치를 기준으로 위치를 잡게된다.

absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다.

겹치는 요소

요소가 배치되면 다른 요소와 겹칠 수 있다.

z-index 속성으로 요소의 스택 순서를 지정할 수 있다. (요소는 다른 요소의 앞에 또는 뒤에 있어야한다.)

요소는 양수 또는 음수 스택 순서를 가질 수 있다.

더 큰 스택 순서를 갖는 요소는 항상 스택 순서가 낮은 요소 앞에 위치!

참고 : 두 개의 배치 된 요소가 z-index 지정 없이 겹치면 HTML 코드의 마지막에 배치 된 요소가 맨 위에 표시됩니다.

CSS - float 속성

CSS 속성(property) float 은 웹 페이지의 배치 및 레이아웃에 사용된다.

한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정

float은 block 레이아웃이기 때문에, 경우에따라 display 계산 값을 수정한다.

주의: JavaScript에서 이 속성을 element.style 객체의 멤버로서 참조한다면,  cssFloat으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 styleFloat으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.

값

• left

  left는 요소가 자신을 포함하고 블록의 좌측에 부동해야 함
  

   

• right

  right는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드

   

• none

  기본값 . 요소가 부동하지 않아야 함을 나타내는 키워드  (텍스트에서 나타나는 위치에 표시)

   

• inline-start

   요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다.

  즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽

   

• inline-end

  요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드

  즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

형식구문

left | right | none | inline-start | inline-end

float 위치 지정

요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

float 지우기

 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 clear 속성을 추가하는 것

h2.secondHeading { clear: both; }

그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(block formatting context) 내에 다른 요소가 없을 때만 동작합니다. 우리 h2 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, clear 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.

아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 p 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 hidden 혹은 auto 로 p의 overflow 속성을 설정할 수 있습니다:

p.withRedBoxes { overflow: hidden; height: auto; }

주의: overflow 를 scroll 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 height 를 auto 로 설정하고 있습니다.

clearfix 해킹

요소가 포함 된 요소보다 크고 떠 다니는 경우 해당 요소가 컨테이너 외부에서 "오버플로"됩니다.

그런 다음 overflow: auto;이 요소를 포함하여이 문제를 해결할 수 있습니다.

예

.clearfix { overflow: auto; }

overflow: auto당신이 당신의 마진과 패딩 (다른 사람이 스크롤바를 볼 수 있습니다)의 제어를 유지할 수 있습니다로 clearfix 긴으로 잘 작동합니다. 그러나 새롭고 현대적인 clearfix 해킹 은 사용하는 것이 더 안전하며 다음 코드가 대부분의 웹 페이지에 사용됩니다 .

예

.clearfix::after { content: ""; clear: both; display: table; }

참고 링크 - https://developer.mozilla.org/ko/docs/Web/CSS/float

Ajax (Asynchronous Javascript And XML) - 에이잭스

서버에 요청을 하고있어 응답을 받게 되면 성공이나 실패 등에 따라 함수가 실행하게 되는데 그 함수가 먼저 실행되는 것이 아니라 서버의 응답을 받은 후 실행되는 것.

자바스크립트를 통해서 서버에 데이터를 요청한다.

HTML form태그가 아니라 자바스크립트를 통해서!

Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 

함께 사용하는 기술의 묶음을 지칭하는 용어로 여러가지 기술집합을 의미한다.

웹 클라이언트 측에서 Reload 없이 비동기적으로 콘텐츠를 변경하기 위해 사용하는 모든 기술을 지칭한다.

서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 간다거나

새로고침을 할 필요가 없이 부분부분만 로딩한다.

Ajax 장점

1.      페이지 이동없이 (부분부분만 로딩) 고속으로 화면을 전환할 수 있다.

2.      수신하는 데이터 양을 줄일 수 있다.

3.      클라이언트에게 처리를 위임할 수 있다.

Ajax단점

1.      페이지 이동 없는 통신으로 인한 보안성의 문제가 있다.

2.      스크립트로 작성되므로 디버깅이 용이하지 않다..

3.      Ajax 요청을 남발하여 사용하게 되면 역으로 서버에 부하가 늘 수 있어서 필요한 

   부분에서만 적절히 사용하는 것이 효율적이다.

* Submit이란?

동기방식으로 DOM(HTML)을 그릴 때 쓴다.

메인화면이 생기고 View가 DOM을 그리는 상황이 Submit이다.

전체페이지 절반이상을 바꿔야한 상황에서는 Submit을 사용한다.

Node.js 실습환경 구축

프로젝트 폴더생성

윈도우 바탕화면 또는 사용자 계정폴더 아래에 설치

방법1. 바탕화면 > [brackets_nodejs] 폴더생성 > [Node.js]하위폴더생성

방법2. 로컬디스트(C:) > 사용자(또는 User) > 본인계정폴더 

> [brackets_nodejs] 폴더생성 > 하위폴더에 [Node.js]하위폴더생성

[Brackets 확장기능]

NodeJs Integration 설치

위의 확장기능을 이용하여 브라켓내에서 Node를 바로 실행시킬 수 있다.

!테스트해보기!

Brackets 실행

파일>폴더열기 메뉴

생성해뒀던 [brackets_nodejs] 하위폴더 [Nodejs] 폴더지정

[파일만들기] - (파일명) test1.js 파일생성

자바스크립트 간단한 코드입력

console.log('Hello'};

명령프롬포트(CMD)에서 실행하기

해당 폴더로 cmd 쉽게 접근방법

파일탐색기>brackets_nodejs>Nodejs 

메뉴아래 폴더위치부분 클릭 - 폴더위치 파란색영역으로 변화됩니다.

한번 더 클릭 - cmd 입력 후 엔터

해당폴더내의 명령프롬프트(CMD)창이 바로 실행됩니다.

명령프롬프트에서 js파일 실행시키기

node test1.js  엔터

'Hello'가  정상출력이된다면 제대로 세팅완료!