'분류 전체보기' 카테고리의 글 목록 (13 Page)

분류 전체보기

CSS - box-sizing 2019.03.04
CSS - GRID 2019.03.04
NODE JS - NODE JS 설치 , NPM 설치 ,PARCEL 설치 2019.03.04
청주 - 부민 세숫대야 냉면&쭈꾸미 (율량동 배달맛집 불향쭈꾸미) 2019.03.03
javascript - foreach 문 , for in 문 , for of문 2019.03.03 1

CSS - box-sizing

2019. 3. 4. 13:12

개요

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

기본값 : content-box

상속 : No

애니메이션 : No

버전 : CSS Level 3

문법

box-sizing: content-box | border-box | initial | inherit

content-box : 콘텐트 영역을 기준으로 크기를 정합니다. // 기본값 박스 width , height 크기가 컨텐츠 기준

border-box : 테두리를 기준으로 크기를 정합니다. // 박스 width , height 크기가 border 까지 포함

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

//content-box 는 기본값이라 안써도되지만 content-box 일경우 width의 크기와height 크기가 content

//border-box 는 border,padding,content의 크기까지 포함하여서 width 와 height 크기가 지정된다

예제

<!doctype html>

<head>

<style>

body {

margin: 0px;

}

div {

margin: 20px;

padding: 20px;

border: 20px solid #dddddd;

width: 500px;

}

.cb {

box-sizing: content-box;

}

bb {

box-sizing: border-box;

}

</style>

</head>

<body>

<p>content-box</p>

</div>

<p>border-box</p>

</div>

</body></html>

둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리를 포함한 크기는 580px입니다.

두번째 박스는 테두리를 포함한 크기가 500px이고, 콘텐트 영역의 크기는 420px입니다.

브라우저 지원

Chrome : 10.0+ (4.0 -webkit-)

Firefox : 29.0+ (2.0 -moz-)

Internet Explorer : 8.0+

Opera : 9.5+

Safari : 5.1+ (3.2 -webkit-)

'디자인 > CSS' 카테고리의 다른 글

CSS - flex (0)	2019.03.05
CSS - 타이포그래피 (0)	2019.03.04
CSS - GRID (0)	2019.03.04
CSS - multi-column (다단) (0)	2019.03.03
CSS - margin 겹침 (0)	2019.03.03

CSS - GRID

2019. 3. 4. 13:06

GRID - FLEXBOX랑 쓰는 방법은 비슷하지만

FLEXBOX의 한계점을 보완한다

justify-content : space-around;

flex-wrap : wrap;

같이 햇을경우 떨어지는것들에 대해서 조정하기가 어렵다.

등등 많은이유가 있지만 grid가 젤 많이쓰이고 다루기가 쉽다.

grid 는 flex 처럼 display : grid 라고 지정하고 시작한다.

l grid-template-columns : 50px | 1fr | 50rem // 자식들간의 세로 간격

l grid-template-row : 50px | 1fr | 50rem // 가로 간격

l grid-gap : 20px // 자식들간의 간격

◎ grid-template-columns 속성

▼ 내용

자식들의 column 의 갯수와 각각의 크기를 지정할수있다.

◎ grid-template-row 속성

▼ 내용

자식들의 row의 수와 각각의 크기를 지정할수 있다.

◎ grid-gap 속성

▼ 내용

자식들의 간격을 지정할수 있다.

    .father{
        display: grid; //grid라 설정해야 쓸 수 있다.
        grid-template-columns: 30px  50px  1fr; 
             //column 은 3개 각각의 크기에 맞게끔 설정
        grid-template-rows: 30px 2fr 1fr;
             //row 은 3개 각각의 크기에 맞게끔 설정
             //fr 은 현재의 크기에 맞춰서 설정 30px : 2 : 1 비율
        grid-gap: 20px; // 각 자식들과의 간격
        height : 100vh; // 현재 부모 컨테이노의 높이는 보이는화면 100%
    }
    .son {
        background-color: blue;
        color: white;
        font-size: 25px;
    }

l grid-auto-columns: 50px || 1fr

l grid-auto-rows : 50px || 1fr n

l grid-auto-flow: row || column // 기본값은 row

◎ grid-auto-columns 속성

▼ 내용

위에 grid-template-columns 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 row 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-row 속성

▼ 내용

위에 grid-template-rows 에서 크기를 지정하지 않은 자식 item들에 대헤서

자동으로 크기를 부여한다 column 크기는 설정한 크기를 따라간다.

grid-auto-columns 와 grid-auto-row 중 하나만 사용가능.

◎ grid-auto-flow 속성

▼ 내용

grid-template-columns , grid-template-rows 에서 설정한 갯수 외에 자식 엘리먼트 들은

추가적으로 초과될경우 row에 붙을지 column에 붙을지 설정한다

row에 붙을경우 추가된 엘리먼트들은 row 에 붙고 column일경우 추가된 엘리먼트들은

column에 붙는다.

<html>
<head>
    <style>
    .father{
        display: grid;
        grid-template-columns: 80px  100px;
        grid-template-rows: 30px 50px;
        grid-auto-rows: 100px;
       /* 위에 설정한 갯수를 초과한 엘리먼트들은 위 사진처럼 추가된다 */
        grid-auto-flow: row;
       /* row 는 기본값이고 column 으로 설정할경우 추가엘리먼트들은 열로 추가된다 */
        grid-gap: 20px;
        height : 100vh;
    }
    .son {
        background-color: blue;
        color: white;
        font-size: 25px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
        <div class="son">9</div>
    </div>
</body>
</html>

반응형 단위

l fr : m // px와 같은 단위 fraction의 준말 분수,부분,일부 라는뜻

l repeat : (갯수,단위) // rows , columns 단위로 사용할수있다

l minmax : (최소값,최대값) // item의 크기의 최소값과 최대값을 정할수있다.

l min-content : // 사용할수있는 최소의 단위로 item의 크기를 지정

l max-content : // 사용할수있는 최대의 크기로 item의 크기를 지정

l auto-fit : // fit : 적당한

l auto-fill : // fill : 가득 넣다

◎ 단위 fr

▼ 내용

화면크기에 맞춰서 각각의 엘리먼트들이 설정한 비율에 맞게끔 된다.

        grid-template-rows: 3fr 2fr 1fr;
        grid-template-columns: 1fr 2fr 3fr;

◎ 단위 repeat 함수 repeat:(갯수 , 단위)

▼ 내용

grid-template-row 와 grid-template-columns 의 단위로 사용할수있다.

반복을 정해서 써준다.

grid-template-row 에서 4개의 엘리먼트의 1fr을 써주고싶으면

1fr 1fr 1fr 1fr; 은 비효율적이니 repeat(4,1fr); 이렇게 써서 반복을 몇번할지 정해준다

        grid-template-rows: 1fr 1fr repeat(2,4fr) 1fr;
        grid-template-columns: 1fr 2fr ;

◎ minmax , min-content , max-content

▼ 내용

max-content 를 쓰면 1개의 노드가 가질수 있는 최대의 크기를 가지며 차지한다

min-content 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

minmax (최소값,최대값) 창을 줄일경우 최소값만큼의 크기는 유지하며.

창이 클경우 최대값 만큼의 크기를 가진다

grid 에서 이런 값을 쓰면서 padding 이나 margin 같은걸 따로 설정할필요 없이

알아서 잡아줘서 편하다.

최소값 , 최대값 , 최소값 200px , 1fr

최소값 , 최대값 , 최대값 1fr , 1fr

        display: grid;
        grid-gap: 10px;
        grid-template-rows: repeat(2,1fr);
        grid-template-columns:  min-content max-content minmax(200px,1fr) 1fr;}

◎ auto-fit , auto-fill

▼ 내용

auto-fit 투명 grid를 안만들고 현재 있는 box로 조절한다

auto-fill 를 쓰면 1개의 노드가 가질수 있는 최소의 크기만을 가진다

보통 크기 고정값인 px일 경우엔 큰 의미는 없으며 minmax 를 사용할경우 효과가보인다

grid-template-columns: repeat(auto-fit,minmax(50px,2fr));}
//auto-fit 은 투명 grid를 안만들며 창크기에 맞춰서 박스크기들을 늘리지만
grid-template-columns: repeat(auto-fill,minmax(50px,2fr));}
//auto-fill 은 투명 grid를 만들어 최소의 크기로 최대한 많은 박스들을 넣는다

l grid-template-areas: "name name name ~~" "name name ~"

◎ grid-template-areas 속성

▼ 내용

위에 grid-template-areas 에서 이름을 할당해주고 " " 로 구역 을 나눠주고나서

자식 엘리먼트들에게 grid-area: "name"; 이렇게 이름 할당을 하면

ares의 설정한 이름에 맞게 구역에 맞게 알아서 배치된다.

배치할떄 gap의 크기까지 같이 들어갈수도 있다. 반응형으로 적용된다.

--P/S 까추가적으로 grid-area : 1/4/5/-1; 이렇게 적을수도있다.

grid-area : rowstart / columnstart / rowend / columnend

--- 또는 grid-area : span 4 / span 3 (row /clumn) 이렇게 사용할수도 있다.

(왼) 개발자도구로 grid의 구역을 잘보여준다 ------------------------------------- (오)일반모습

<style>
    .father{
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 50px;
        grid-template-areas: "header header header"
                             "content content sidebar"
                             "content content sidebar"
                             "footer footer footer";}
        /*" " 로 묶은 것이 1row가 된다 이렇게 묶고 자식엘리먼트에게
         grid-area: name 을 써주면 grid적용이 알아서 적용되며 크기도 맞춰준다*/
    .son {background-color: blue; color: white;font-size: 25px;}
    .a{background-color: red; grid-area: header;}
    .b{background-color: yellow; grid-area: content;}
    .c{background-color: green; grid-area: sidebar;}
    .d{background-color: black; grid-area: footer;}
    .e{background-color: pink;}
    .f{background-color: blue;}
    .g{background-color: purple;}
    .h{background-color: skyblue;}
    .i{background-color: peru;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son a">1</div>
        <div class="son b">2</div>
        <div class="son c">3</div>
        <div class="son d">4</div>
        <div class="son e">5</div>
        <div class="son f">6</div>
        <div class="son g">7</div>
        <div class="son h">8</div>
        <div class="son i">9</div>
    </div>
</body>

정렬

l align-content : start || end || center || space-arround || space-between

l justify-content : start || end || center || space-arround || space-between

l place-content : 는 align-content justify-content 를 한번에 사용할수 있다.

l align-items: start || end || center || stretch (기본값)

l justify-items: start || end || center || stretch (기본값)

l place-items : 는 align-items justify-items 를 한번에 사용할수 있다.

l line-naming 기술 : grid에 모든 line 에는 line 이름을 새길수 있따.

l order 기술 : flex의 order 처럼 순서를 정해줄수있다.

************** flex-start , flex-end 값도 사용되는대 왜 되는지 모르겠다***************

◎ align-content , justify-content , place-content 속성

▼ 내용

flex 의 내용하고 매우 비슷하다

flex에서 자세히 설명하였으니 각각의 값들의 속성을 볼려면

( https://blog.naver.com/dydals56789/221463967438 참조)

align-content 는 vertical (수직정렬) 을 조종할수 있다.

justify-content 는 horizontal (수평정렬) 을 조종할 수 있다.

place-content 는 첫번쨰 argument 는 align-content 두번쨰 argument justify-content 을 조종할 수 있다.

    .father{
        box-sizing: border-box;
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 100px;
        place-content: space-between center;
        height: 100vh;
        grid-template-columns: repeat(5,minmax(50px,100px));
        }
// place-content 로 justifu-content 는 이고 center
// align-content 는 spacebetween  라서 수직은 가운데 수평은 양끝

◎ grid-column , grid-row 속성

▼ 내용

grid-column , grid-row 둘다 부모 content가 아닌 자식 box 에 사용한다.

(flex 의 align-self 랑 비슷해보임)

grid-column 는 {grid-column : 1 / 5 } 이런식으로 표기하며 1번쨰라인부터 5번째라인 전

까지 Column을 표시한다 라는 뜻이다. 한줄로 grid를 다채우고싶으면 end에 -1일 주면된다.

grid-row 는 grid - column 에서 열이 행으로 바뀐것 뿐이지 똑같이 사용한다.

P.S 1 : grid-column : 1 / 5 대신 grid-column-start : 1; grid-column-end: 5; 이렇게 나눌수 있다.

P.S 2 : grid-column-start : 5; grid-column-end: 2; 이렇게사용하여 거꾸로 사용할수도 있다.

P.S 3 : grid-column-start : 5 end 없이 start만 쓸경우 1열만 사용된다.

P.S 4 : grid-column-start 양수는 왼쪾 라인 기준으로 1234 지만 음수는 우측에서부터시작한다.

P.S 5: grid-column : span 5 // span을 쓰면 첫번째부터 5번쨰 박스까지 차지한다. (양수만가능)

.a{ grid-row : 1/5; }
.b{ grid-column-start: 3; grid-column-end: 5;}

◎ line naming 속성

▼ 내용

모든 line 에는 nameing 을 할수있다.

line에 nameing을 하여서 row-grid 나 column-grid 에 사용할수 있다.

<html>
<head>
<style>
    .father{
        box-sizing: border-box;
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: 100px;
        height: 100vh;
        grid-template-columns: [a-line] 1fr [b-line] 2fr [c-line] 1fr [d-line];
        grid-template-rows: [ra-line] 1fr [rb-line] 2fr [rc-line] 3fr [rd-line] 1fr [re-line];
        }
    .son {font-weight: 600px; text-align: center; font-size: 25px;
        display: flex; justify-content: center; align-items: center;
        color: white;}
    .a{background-color: red; grid-column: b-line/d-line;}
    .b{background-color: blue;}
    .c{background-color: green; grid-row: rb-line / re-line;}
    .d{background-color: black;}
    .e{background-color: pink;}
    .f{background-color: yellow;}
    .g{background-color: purple;}
    .h{background-color: skyblue;}
    .i{background-color: peru;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son a">1</div>
        <div class="son b">2</div>
        <div class="son c">3</div>
        <div class="son d">4</div>
        <div class="son e">5</div>
        <div class="son f">6</div>
        <div class="son g">7</div>
        <div class="son h">8</div>
        <div class="son i">9</div>
    </div>
</body>
</html>

◎ grid-auto-flow 속성

▼ 내용

위의 그림처럼 빈칸으로 생긴 grid 를 채우는 속성이다.

grid의 순서를 row로 오름차순할지 column 으로 오름차순할지 정할수있다.

값으로 dense 로 사용할경우 빈칸이 다찬다.

.father{
     grid-auto-flow: dense;
}

◎ justify-self , align-self , place-self 속성

▼ 내용

justify-self 한item에서 content 를 수평 조종

align-self 한item에서 content 를 수직 조종

place-self 한item에서 content 를 수직,수평 사용

    .son:nth-child(4){background-color: black; place-self: center center;}
    .son:nth-child(5){background-color: pink; justify-self: center;}
    .son:nth-child(6){background-color: yellow; align-self: center;}

grid 연습하기!

http://cssgridgarden.com/#ko

https://caniuse.com/

최신기술 css-grid 같은 신기술들이 브라우저에서 어느버전까지 지원하는지를 알려준다.

Can I use... Support tables for HTML5, CSS3, etc

HTML5 accept attribute for file input Attributes for form submission Audio element Audio Tracks Autofocus attribute Canvas (basic support) Canvas blend modes classList (DOMTokenList) Color input type contenteditable attribute (basic support) Custom Elements v0 Custom Elements v1 Custom protocol hand...

caniuse.com

빨간색 : 사용불가

초록색 : 사용가능

노란색 : 부분적으로 지원

'디자인 > CSS' 카테고리의 다른 글

CSS - 타이포그래피 (0)	2019.03.04
CSS - box-sizing (0)	2019.03.04
CSS - multi-column (다단) (0)	2019.03.03
CSS - margin 겹침 (0)	2019.03.03
CSS - 우선순위 cascading(캐스캐이딩) (0)	2019.03.02

NODE JS - NODE JS 설치 , NPM 설치 ,PARCEL 설치

2019. 3. 4. 03:07

◎ 1 .NODE JS 설치

▼ 1. 아래 URL 주소로 NODE JS 접속 해서 각 자기 OS 환경에 맞는 버전 다운

저는 윈도우 10 64비트라 저거 클릭후 다운받음.

node-v10.15.2-x64.z01

node-v10.15.2-x64.zip

파일 다운로드

혹시나 싶어서 분할압축으로 NODE JS 윈도우 10 X64비트용 올려놓음

그후 파일클릭후 실행하고 NEXT 만 누르면 자동으로 다운됨

(PATH설정도 자동 맞춰주는거같음)

◎ 2. NPM 설치

▼ NODE.JS 설치후 CMD에서 아래 명령어를 치면 NPM 설치 작업 완료.

npm install --global --production npm-windows-upgrade

요런 창이뜨더니 계쏙진행되면서

요런창이 뜨면 작업완료

◎ 3. parcel 설치

▼ npm 설치후 vs 코드에서 작업을 수행하였다

1. 터미널에 npm install -g parcel-bundler 입력

npm install -g parcel-bundler

이렇게 작업이 수행된다

작업 완료까지 2분 이렇게 뜨면 작업이 완료된다.

◎ 4. parcel 사용 (서버실행)

▼ parcel 을 사용하기 위하여 pacakage.json을 수정

1. vs 코드 터미널에서 npm init -y 명렁어를 친다.

2. package.json 파일이 생성된다.

3. package.json 파일에서 main 부분을 지우고

4. scripts 부분에 'start : 'parcel index.html' 로 수정

5. 터미널에 npm run start 입력

6. 터미널에 뜬 주소로 들어가면 index.html이 서버로 수행이된다. (제경우는 http://localhost:1234)

npm init -y

npm init -y 입력호 package.json 다운받아짐

package.json 내용 수정

npm run start 터미널 입력

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20
NODE JS - PUG 설치와 사용법 (0)	2019.03.15
Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정 (0)	2019.03.15
NODE JS - babel 란? (babel 설치방법) (0)	2019.03.15
NODE JS - node js , express.js 란? (0)	2019.03.15

청주 - 부민 세숫대야 냉면&쭈꾸미 (율량동 배달맛집 불향쭈꾸미)

2019. 3. 3. 15:44

*****따로 광고신청을 받은게아닌 오로지 제 독단의 맛집 리뷰일 뿐입니다.*****

집에서 와이프가 쭈꾸미를 먹고싶다하여

배달의민족으로 시켜먹은

쭈꾸미 맛집입니다.

사실 별기대 안하고 시킨건대

생각보다 맛잇어서 포스팅을 남깁니다.

일단 맵기조절은 요청사항에 남겨주시면 가능하고요

포스팅 시작하겠습니다.

배달의민족에는 불향쭈꾸미로 등록되있습니다.

쭈꾸미맛집 - 부민 세숫대야 냉면& 쭈꾸미

1.메뉴구성

2. 음식 사진 ( 불향쭈꾸미+수제돈까스 2인세트)

기본메뉴구성 - 공기밥,묵사발,콩나물,무생채

메뉴에는 쭈꾸미 비빔밥이라 되어있는데

쭈꾸미+콩나물+무생채 를 같이줘서 비벼먹으라고

쭈꾸미 비빔밥이라고 하는것 같습니다.

불향쭈꾸미 2인분!

진짜 엄청맛잇었어요

기본적으로 떡국떡이 들어가서 떡도 맛있었지만

양념이 진짜 제입맛에 딲맞았습니다.

맵기조절은 따로 추가요청사항에 써놓으시면

조절해서 가져다주십니다. 저흰 맵게 가져다달라했어요

진짜 지코바? 정도의 맵기로 맛있게 먹었습니다.

쭈꾸미 양도 갠찮았고 양념도 많이 있었습니다.

2인분 시켜서 와이프랑 저가 먹고 조금 남았어요

사실 이게 맛있어서 최완소 아이템!

돈까스

사실 비주얼은 그냥 그저 그렇습니다

엄청 싸구려 돈까스다 라는생각이 강했습니다.

돈까스 추가할경우 가격이 +6000원 되는대

솔직히 6000원의 값어치를 하는지는 모르겠습니다.

비주얼도 그렇고 맛도 맛있다는 느낌은 모르겠지만

돈까스 소스는 나쁘지않앗습니다.

사실 돈까스 소스떄문에 먹은거같아요

하지만 다음에시킨다면 그냥 쭈꾸미 1인분을 + 하겠씁니다.

묵사발

이건 호불호가 갈릴것 같습니다.

저는 엄청 맛있었습니다.

일다 기본 육수는 냉면육수에 가깝고요

거기에 식초,겨자소스 잔뜩 첨가한?

그런 육수 맛이었습니다.

냉면육수 좀 식초랑 겨자 쳐드시는분들은 맛잇을꺼에요

신맛이 좀 강했찌만 맛있었습니다.

기본메뉴이니 괜찬은거 같아요.

콩나물 , 무생채

전 무생채를 좋아하지않아서 무생채는 안먹었습니다.

무생채 리뷰는 패스하고

콩나물은 일단 안익혀서 온거같앗어요

맛이 좀 덜익은 콩나물맛? 그런게 나서

전 콩나물은 좋아하지만 여기 콩나물은 안먹엇습니다.

만약 집에서 배달해 시켜드신다면

후라이팬에 쭈꾸미 무생채 콩나물 프라이팬에

넣고 볶아 먹으면 괜찬을것은 같습니다.

3. 총평

전체적으로 괜찮았씁니다.

제점수는 별 4개입니다 ( 5점만점)

★★★★☆

시골길 쭈꾸미라고 청주 시내에파는

불향 가득한 낙지볶음 파시는곳을 아실겁니다.

거기에 견주어 봤을때

가격대비 여기가 가성비가

괜찮은것 같습니다 (배달기준)

한번먹고 말 곳이 아니라

다음에 또 한번 시켜먹어도 괜찬은 곳입니다.

영업시간 : 오전11:00 ~ 오후 10:00

휴무일 : 연중무휴

배달지역 : 운천동,신봉동,율량동,사천동,주성동,주중동,내덕동,우암동,북문로,수동,영동

전화번호 : 050-4829-4624 ( 배달의 민족으로 시켜서 여기밖에 모름)

상호명 : 부민세숫대야냉면&쭈꾸미

위치 :

럭키볼링센터 맞은편

javascript - foreach 문 , for in 문 , for of문

2019. 3. 3. 03:54

◎ foreach 문

▼ 내용

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원)

배열의 요소들을 반복하여 작업을 수행할수 있습니다.

foreach구문의 인자로 callback함수를 등록할수 있고, 배열의 각 요소들이 반복될 떄 이 callback 함수가 호출됩니다. callback 함수에서 배열요소의 인덱스와 값에 접근할수 있습니다.

배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다.

var arr = ['가','나','다','라'];

arr.forEach(function(item,index,arr2){
    console.log(item,index,arr2[index+1]);
})
//첫번쨰 인수는 배열의 각각의 item
//두번쨰 인수는 배열의 index
//세번째 인수는 배열 그자체

◎ for .... in 반복문

▼ 내용

객체에 사용 할수 있습니다.

객체의 key값과 value 값을 뽑아내는데 유용합니다.

객체의 키값의 갯수만큼 반복하여 첫번쨰키값부터 마지막 키값까지 반복합니다.

var obj = {
    a: '가', 
    b: '나', 
    c: '다'
};

for (var key in obj) {
    console.log(key, obj[key]); // a 가, b 나, c 다
}

◎ for ... of 반복문

▼ 내용

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.

for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다.

(직접 명시 가능)

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

◎ for in 반복문과 for of 반복문의 차이점

▼ 내용

for in 반복문 : 객체의 모든 열거 가능한 속성(property)에 대한 반복

for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {};// Object 프로퍼티에 객체 생성
Array.prototype.arrCustom = function () {}; // array 프로퍼티에 객체 생성

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
//기본 js 내장함수에 프로퍼티를 추가해서 프로퍼티까지 다뽑힌다

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

'프로그래밍 > JavaScript' 카테고리의 다른 글

D3.JS - 날짜 라인 그래프 그리기 (0)	2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등) (0)	2019.04.30
javascript 구동방법이해하기 (0)	2019.03.03
javascript - 콜백함수 확장판 (콜백함수 이해하기) (0)	2019.03.03
javascript - 콜백함수,함수의 선언,클로저 (0)	2019.03.03

PREV 1 ···10 11 12 13 14 15 16 ···24 NEXT

아빠개발자의 노트