align-items: center;

그리드내에서의 아이템 수직정렬

수직축 : align/ 아이템 : item

align-items: center;

box-sizing: border-box;

콘텐트에 높이 90px

그리드에서 height90px + padding 5px 주면 박스가 커진다. (패딩을주면 박스가깬다)

콘텐트는 90이고 패딩이 5px로 늘어나서 박스자체가 커진다.

box-sizing: border-box; 을 넣으면 박스 90준것이 유지된다

header에서 여백을 가져와야함

메뉴들을 오른쪽으로보내자

텍스트 수직가운데정렬 : line-height

그외 flex인경우 align-items: center;으로 수직가운데 정렬

링크해도 리로드되지않게알아내기

햄버거버튼이 a태그되어있어서 누르면 test가출력후 바로 ㅅ ㅏ라진다 a태그는 링크태그니까 바로 리로드된다

갤럭시 

모니터가 밀도가높아지면서 권장도높아진다.

옛날에는 픽셀이 200개의 전구나마 너비

지금은 밀도가높음, 전구다마로는 작음.

CONTENT ="width= 360" : 화면을 360으로정하겠다. (기준밀도 1로했을때 너비), 실제장치의 너비

div style="width:200px" : 360을 기준으로했을때 200을 의미한다. 물리적인 200px은아니다. 

비율로 표현하는 수치 :dp (밀도가 곱해진것)

밀도가낮은 디바이스로봤을때도 저 크기로 볼 수있다.

밀도가높다 : 전구다마가 작아짐(전구다마=픽셀)

전구다마에달리 원래 디바이스의 크기로 너비를 잡는다.

전구다마를 1로했을때를 표현

기준밀도를 표현해야 단일하게 적용 (화면크기를 기반으로 설정)

모바일용을 따로 만들어야한다.

공지사항영역에 사이드메뉴겹치기 

main영역을 기점으로 breadcrumb에 absolute적용해서 위치잡기

right 오른쪽기점

top:25px 위에서 52떨어지기

디스플레이성능에따라 밀도가높아진다.

화면크기는같아도 나타나는게 제각각일수있다.

앱은 dp를 사용하지않는다.

웹에서는 뷰포트를 사용

flex-basis : 중첩 flex사용시 basis 주의 

flex를 중첩하는 순간 위에있는 flex가 li의 flex-basis를 줬음에도 콘텐트크기로 줄여버린다. 

flex-basis 대신 width로 바꿔준다

페이저 가로로 나열하기 display:flex

마진간격 ul에 한꺼번에 적용 margin: 0 4px;

margin : 위아래 양옆;

margin : 위,오른쪽,아래,왼쪽

공통마진적용속성utils style에 적용

요즘 디자인철학은

콘텐트를 기반으로한다

모방은 창조의 지름길이다. 

많이보고 베껴보기

페이지 가로로 나열

이름을 부여하면

-이름 중복 부담

구조를 쓰면 

-구조가 변경되는 경우

버튼속성의 집중화시킨것을 적용한다 div class ="button"

텍스트,인라인계열에서 범용도구 <span>

두가지 질문

1.util style?? 

2. 색깔이 자주 쓰일색인가 ?

기본색 + 강조색 

강조색을 바꾸고싶다면 ? 

일괄작업 , 반복적수정작업 

색깔의 집중화

색깔을 변수화

공통된 색깔을 사용하기위해 변수화

문서전체에 적용 :root

html태그보다 넓게 감싼다

developer.mozilla.org/en-US/docs/Web/CSS/:root

나중에 한꺼번에 변경 및 유지보수하기 용이해진다.

Pseudo-classes

테이블구분 이미지 넣기

첫번째애한테만 적용제외하기

현재페이지정보 글자 오른쪽정렬

영역을 넘는 콘텐트 처리

높이가 계속커진다.

층을만들어낸다 -> 막는속성

  white-space: nowrap;

제목이 층을 만들어내지않게 하기

 overflow: hidden;

넘치는 글자 가리기

text-overflow: ellipsis 

오버플로우된 글자는 ...점으로 생략된다

테이블의 헤더넣기

테이블의 제목열만 왼쪽정렬하기

테이블의 헤더와 바디구분

tbody를 넣지않으면 html이 알아서 table과 tr사이에 tbody를 넣어준다

thead와 tbody를 넣어 구분한다.

마진으로 다른애들이 못쓰고있음 파란색만큼만쓰고있음

width를 100%로 준다.

순번 : 컬럼순서가 바뀌거나 구조가바뀌면 번호를 다 바꿔줘야한다

이름 : 구조가바뀌어도 상관없음,

특화된 종속해서보다

스타일로서의 의미를 살리는 키워드를정하는게낫다

이름하고값이랑안맞아

이름을 값으로썻지만 나중에 값수정할 때 이름도수정해야해

border-collapse: collapse; 셀양쪽벽을 합치는 속성

테이블 셀사이의 보더를 없앴다. (마진이 아니다)

  table-layout: fixed;

fixed를 설정하지않았을 경우 컨텐츠가 길어지면 다음줄로 내려가고, 옆칸의 너비를 뺏어온다. 

main에 padding 넣기 

스타일링 : 방(크기), 가구,가구배치

가구의 종류 : 수평정렬 , 수직정렬

수직정렬은 inline-block이 아니다. static으로 내려가야하기때문에. 밑으로 나열되도록해야한다.

Position

div는 position을 지정하지않으면 기본적으로 static(미리정해진)이 적용된다.

row타입인 수직방향으로 적재된다. 뒤 따르는 태그들이 겹치지않게 끔 수직방향으로 적재된다.

static은 left와 top이 적용안된다.

1. 두번째 div에 position: absolute를 적용하면 ?

• left 와 top을 사용할 수있다.
• 문서좌상단을 기준으로 100,100적용된다.
• 두번째div가 이동하면서 뒤에있던 div4와 div5가 이동했다.
• 너비가 콘텐트너비만큼만 적용.

2. 두번째 div에 width:100%를 적용하면 ?

• 부모의 너비를 그대로 사용
• absolute는 부모로 부터 떨어져나와서 그 여백을 동생이 차지하게된다.

3. 문서좌상단이 기준이고, 스크롤바가 생겨서 올라가면 기준(원점)도 올라가게된다.

4. 보여지는 영역을 기준으로 하고 싶다면 (position : fixed) ?

• 원점을 바꾼다. fixed로 바꾸면 스크롤을 움직여도 화면에서 고정되어 나타난다.
• fixed는 화면에 붙이는것 (화면의 좌상단이 기준)
• 문서가 올라가도 상관없이 보여지는 영역을 기준으로 100,100적용된다.

 5. div2에 position : relative를 적용하면 ?

• 자기위치를 아무도 못쓰게한다.
• relative는 자기위치가 기준이다.
• absolute일떄는 동생이 그위치를 차지했지만, 원래 위치가 보존되어있다.
• 자기공간을 절대 내주지않는다. 자기 안에있는 애들은 자신을 따르게한다.

6. div2에 하위태그를 넣고 div2를 기점으로 위치하고 싶다면 ?  

• div2가 움직이면 같이 따라가도록
• div2를 기점으로 위치하게려면 ?
• absolute ,fixed, relative로는 div2를 원점으로 할 수 없다.
• div 2 : 내 위치를 이제부터 상대적으로 두겠다. 내 안에있는 애들은 다 날따라오게 하겠다
• relative가 옮겨다니면 그 안에있는 애들도 같이 따라 움직이게된다.
• 자식 absolute의 원점이 부모의 relative이다.

7. 부모 div2의 위치를 옮기면 ?

수직목록

수직목록은 인라인블록할 필요 없다.

<a href="">태그의 특징 

• <a href="">태그는 기본적으로 색상이 적용되어있기때문에 감싸고있는 <nav>태그에 폰트색상을 적용하면 안먹힌다.
• 울타리에 하지말고, a태그로 범위를 잡고 적용해야한다. 

현재 페이지에만 반응하도록 클래스명 지정

.aside-main-menu a:hover{ }

마우스를 대면 오렌지마크가 나오게한다.

padding-left가 26이므로 x축도 그의 절반인 12px과 x축 center로 지정

background: url("../images/bg-aside-menu-hsp.png") no-repeat center bottom

스타일링 : 방(크기), 가구,가구배치

레이아웃이란 ? 크기와 위치를 잡아주는것

헤더영역에 가구를 배치하면서 absolute를 주로  썼다. 그 이유는

header라는 콘텐트방이 크기가 고정되어있기 때문에 절대위치로 지정해줄 수 있다.

• absolute지정시 원점 ?
• offset영역을 할 영역에 relative를 지정 -> 하위부분에 absolute
• 문서의 기준 : absolute
• 현재위치 : relative
• 화면위치 : fixed

Header item 배치 / 헤더 아이템 위치

헤더영역은 고정이다. 위아래 높이가 달라지지않는다.

logo와 메인메뉴들의 위치가 다르다.

고정위치에 배치방법

position : absolute, relative, fixed

Logo에 position:absolute 적용시 생기는 문제 

창을 줄이면 다른메뉴들은 움직이는데 로고만 고정되어있다.

로고가 파란색의 범위(콘텐트가있어야할 범위)를 벗어나 왼쪽에  쏠려있다.

같은범주안에 로고 넣기

float-content 부모를 기준(파란색)으로 logo의 위치가 left 0, top 23적용된다. 

Position  속성

기본값 static :부모나 조상이 relative가 없으면 전체페이지 좌상단

• relative를 적용하지않았을떄, 문서좌상단이 기준이되어 left , top이 적용된다.
• 1. 부모없이 포지셔닝을 absolute로 하면 문서좌상단이 기준이되고 left, top적용
• 2. 부모없이 포지셔닝을 fixed로 하면 화면이 기준이 되고 left,top적용 
• 3. 어떤박스안에서 위치를 정하고싶으면 박스(부모)를 relative로 지정하고 자식(지정하고싶은아이템)을 absolute로하면 부모를 기준으로 left,top이 적용된다.
• 가까운 relative 포지셔닝되어있는것을 기준으로 원점이 바뀐다.
• 부모가 relative, 자식이 relative면 각자의 원래 위치가 기준이 된다.

static 일때 left와 top을 적용해도 의미가없다.

left와 top에 영향을 미치려면 최소한 absolute / relative / fixed / sticky이어야한다.

기준점이다르다.

• absolute : 부모나 조상이 relative가없으면 전체페이지의 좌측상단의 기준으로 left 0, top 23px 적용
• relative : 원위치, 현재위치의 기준에서 left 0, top 23px이 적용
• fixed : 화면좌상단(화면을 기준) , 화면은 스크롤이안됨,

logo에만 absolute를적용하면 문서의 좌상단을 기준으로 적용되어 float-content밖에 위치하게된다.

float-content를 부모로 만들고(position : relative), logo를 부모기준으로 위치하게한다.

자식들이 모두 relative 포지셔닝된다면 ? 

• 형이 위치를 바꾸어도 동생은 그대로 있고, 부모의 영역만 커진다.
• 영역이 비어있는데 큰 영역이 만들어진다.
• 좌표계산시에도 어렵다.
• relative로 하나씩 값을 지정해줘도 되지만 부모의 크기문제가 발생한다.

헤더아이템을 오른쪽기준으로 정렬시키기.

콘텐트중에 오른쪽기준으로 정렬해야하는 것들이 있다.

Home/로그아웃/회원가입에 동일하게 left,top을 적용해도되지만

콘텐트길이가 길어진다면 ? 왼쪽기준일때 오른쪽으로 늘어난다. 오른쪽벽을만나면 콘텐트가 깨진다. (내려쓰기되거나)

오른쪽으로 기준하면 왼쪽으로 늘어난다. 

aside의 배경 : 그라데이션 + 장식

1.그라데이션 : 콘텐트가 늘어난만큼 반복되어야하는 부분

2.장식 : 반복x

한 영역에 두 개의 박스가 필요하다.

aside와 main을 감싸는 블록을 만들고 그 블록에 배경을 넣고 aside에도 배경(장식)을 넣는다.

body와 aside사이에 <div class="float-content">를 넣었을때 body에 적용된 레이아웃이 깨졌다.

body > float-content > aside 순

중간에 다리(<div class="float-content">) 가 생긴느낌. 바디자손(aside와 main)에게 적용하려해놓고 바디에게 넣은것.

float-content에 레이아웃을 적용한다 ( float-content안에 aside와 main이 포함)

이미지크기와 float=content크기가 동일해서 center를 뺴도 무관하다.

 repeat-y : 반복을 수직으로한다

Visual의 콘텐트영역에 그림넣기

입력 폼 태그

fieldset을 form에 맞추려면 ?

fieldset내용이 form에서 삐져나온다.

fieldset가 갖고있는 마진과 패딩을 없애준다.

*form을 25px했는데도, 여전히 필드들이 밖으로 나왔었다. -> 개발자도구로 확인하기->fieldset이 패딩과 마진을 가지고있었다.

첫번째 input만 지목하고, 여백을 모두 갖게 하려면 ? 

해당 항목을 지목하고, flex-grow를 적용한다.

돋보기 배경넣고 집중화태그 사용하기

검색이라는 글자를 가리기위해 새로 태그를 쓰지않고 기존 집중화시켰던 태그를 사용한다.

button이라는 클래스명을 만들어 집중화시켰으므로 input태그에 클래스명 "button"을 추가한다. 

텍스트의 수평정렬, 수직정렬

텍스트 수평정렬 text-align : center;

텍스트 수직정렬 line-height : 23px;

커서간격띄우기(검색창) 

text-indent대신 flexbox덕분에 padding-left를 쓸 수 있다.

flex아이템의 너비, 높이 설정

label 은 인라인태그인데, 너비와 높이가 적용됐다. 왜 적용되는걸까?

• flex안에있기때문이다. flex아이템으로서의 너비를 갖고있게된다.
• flex박스는 align-items : stretch 로 기본설정(수직정렬) 부모의 높이를 그대로가진다.→기본설정이라 삭제

flex-basis가 넓이를 나타낸다. width는 범용적으로 쓰이므로 flex-basis가 우선권을 갖게된다. 

* 특정태그 선택시 주의사항

위 태그는 input이면서 first-child 의미이다. input은 맞지다. fieldset의 첫번째자식은 legend이다.

input은 맞지만 첫번째자식이 아니라서 안먹힌다.

ul>li>a에서 <a>만 선택해서 적용하기

모두 동일하게 red컬러적용됨

하지만 나중에 바뀔 수도있고 태그가 많으니까 클래스명으로만 지정하는것으로 바꿈 

background: url("") no-repeat 

콘텐트가리기 overflow: hidden

블록은 오른쪽으로커지기때문에 텍스트를 왼쪽으로 밀어내는게 일반적이다.

text-indent로 밀어내도 보이는 콘텐트를 완전히 가리기 위해 overflow:hidden 처리를한다.

텍스트를 이미지로 대체하기

반복코드 줄이기 : 집중화

class이름에 button을 추가하고 css에서 집중화한다. (반복코드 없애기)

코드 우선순위 적용 !important;

Pseudo-classes

하이퍼링크 초기화

하이퍼링크는 기본적으로 밑줄 및 파란색/보라색이 적용되어 있어 그위에 색상,폰트가 안먹는다.

꾸며주기전에 초기화 작업을 해준다.

display: none;

화면에 가리기

display:flex

수평목록

기본속성인 수평방향으로 적용된다.

padding에 이미지 넣기 (background지정)

배경이미지경로, 반복여부, 가로방향,  세로방향

background: url("") no-repeat 12px center;

이미지가 제일 왼쪽에있으므로 24px중 12px을 적용해서 수평가운데에 적용

.main-menu>ul>li>a:hover{

마우스를 대면 색깔변화

display: inline-block;

콘텐트블럭이 너비나 높이를 가질 수 있지만, 다른컨텐트블럭과 같은 라인에 설 수있게해야한다.

컨텐트를 감싸면서 너비,높이를 가질 수 있다. 콘텐트 블록을 감싸줘야한다. 

컨텐트블록의 바깥을 인라인블록으로 감싸줘야한다. 

html,body{
    height: 100%;
    margin:0;
}

a{
    color:initial;
    text-decoration: initial; /*선으로 텍스트를꾸밈*/
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------- */
.d-none{
    display: none;
}


/* --------------------------------------------------------------- */
.float-content{
    /* background-color: black; */
    width:960px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    min-height:inherit;
    opacity: 0.7;
    /* height: inherit; */
}

#root{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 500px 171px 1fr 100px;
    grid-template-areas: 
    "header header header header"
    "visual visual visual visual"
    "body body body body"
    "footer footer footer footer";
}

#header{
    background-color: #ffffff;
    grid-area: header;
}

#visual{
    border-top:3px solid #8CBA34;
    /* background:#313131 url("../images/bg-visual.png") no-repeat center; */
    grid-area: visual;
}

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;  
    grid-template-rows: 1fr;  
    grid-template-areas: ". aside main .";
}

#aside{
    background-color: blue;
    grid-area: aside;
}

#main{
    background-color: blueviolet;
    grid-area: main;
}

#footer{
    background-color: #313131;
    grid-area: footer;
}

/* @media screen and (min-width: 500px){

} */

@media screen and (max-width: 960px){
    
    .float-content{        
        width:100%;
    }
    
    #root{
        
        grid-template-columns: 1fr;        
        grid-template-areas: 
        "header"
        "visual"
        "body"
        "footer";
    }

    #body{        
        grid-template-columns: 1fr;    
        grid-template-areas: "main";
    }
}

/* ------------------------------------------------------------------- */

.main-menu{    
    font-family: "맑은 고딕", "고딕", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    display: inline-block;
}

    .main-menu>ul{
        display: flex;
    }

        .main-menu>ul>li{
            padding-left:24px;
            background: url("../images/bg-main-menu-vsp.png") no-repeat 12px center;
        }
        .main-menu>ul>li:first-child{
            padding-left: 0px;
            background: none;
        }

        .main-menu>ul>li>a:hover{
            color: orange;
        }


.member-menu{    
        font-family: "맑은 고딕", "고딕", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color:#979797;
        display: inline-block;
    }
    .member-menu>ul{
        display: flex;
    }
        .member-menu>ul>li{
            padding-left: 9px;
            background: url("../images/bg-member-menu-sp.png") no-repeat 4.5px center;
        }
        .member-menu>ul>li:first-child{
            padding-left: 0px;
            background: none;
        }

.breadcrumb{
        font-family: "맑은 고딕";
        font-size: 10px;
        font-weight: bold;
        color:#979797;
        display: inline-block;
    }
    .breadcrumb>ol{
        display: flex;
        list-style: none; /*번호속성지움*/
        padding-left: 0;
    }
    .breadcrumb>ol>li{
        padding-left: 10px;
        background: url("../images/icon-path.png") no-repeat 0px center;
    }
    .breadcrumb>ol>li:first-child{
        padding-left: 20px;
        background:url("../images/icon-home.png") no-repeat 0px center;
    }

subgrid를 쓰지않아도 적용가능

header, visual, body, footer로 나눈뒤 body안에서 aside, main으로 나눈다.

PC형에 먼저 맞춘 후 태블릿형 미디어쿼리 적용

html,body{
    height: 100%;
    margin:0;
}

/* --------------------------------------------------------------- */
.float-content{
    width:960px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    min-height:inherit;
    opacity: 0.7;    
    /* height: inherit; */

}

#root{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 70px 171px 1fr 100px;
    grid-template-areas: 
    "header header header header"
    "visual visual visual visual"
    "body body body body"
    "footer footer footer footer";
}

#header{
    background-color: #ffffff;
    grid-area: header;
}

#visual{
    border-top:3px solid #8CBA34;
    background:#313131 url("../images/bg-visual.png") no-repeat center;
    grid-area: visual;
}

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ". aside main .";

}

#aside{
    background-color: blue;
    grid-area: aside;
}

#main{
    background-color: blueviolet;
    grid-area: main;
}

#footer{
    background-color: #313131;
    grid-area: footer;
}
/*pc먼저 스타일링*/
@media screen and (min-width: 500px){/*500이 넘어가면*/

}

@media screen and (max-width: 960px){/*800보다 작아지면*/
.float-content{
    width:100%;
}
#root{ /*덮어쓰기할것만 넣기*/
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    grid-template-areas: 
    "header"
    "visual"
    "body"
    "footer";
    }

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    }

#main{
        background-color: blueviolet;
        grid-area: main;
    }
}

그리드 아이템 정렬 속성

inline 수평 축 정렬(좌우방향)

• justify-items: center; (수평축 가운데, 모눈종이 내부) 
• justify-content: center; (수평축 가운데, 모눈종이 자체)

block 수직축 정렬(위아래방향)

• align-items: start; (수직축 가운데, 모눈종이 내부)
• align-content:center;(수직축 가운데, 모눈종이 자체)

패키징정렬은 content

아이템 정렬은 items

항목별 정렬은 self

justify-items : center;

justify-items : end;

justify-items : stretch;

justify-items: center; (수평축 가운데)

align-items: start; (수직축 위)

justify-items: center; (수평축 가운데)

align-items: center; (수직축 가운데)

justify-items: center; (수평축 가운데, 모눈종이 내부) 

justify-content: center; (수평축 가운데, 모눈종이 자체)

align-items: start; (수직축 위, 모눈종이 내부)

justify-items: center; (수평축 가운데, 모눈종이 내부) 

justify-content: center; (수평축 가운데, 모눈종이 자체)

align-items: start; (수직축 가운데, 모눈종이 내부)

align-content:center;(수직축 가운데, 모눈종이 자체)

부모의 여백에 따라서 그리드정렬이 바뀐다.

여백이 얼만큼 있느냐에 따라, 그리드 박스의 크기에 따라 정렬이 결정된다.

  grid-template-areas: 

areas에 따라 하나의 영역이 되어 적용된다. 

minmax(min, max);

min보다 크거나 같고, max보다 작거나 같다. 하나는 고정시킬것.

repeat(auto-fill, minmax(100px,auto));

고정크기의 개수는 미정, 너비가 허락되는 한 모두 트랙을 만든다. 상자가 여백을 다 채운다.

grid-template-columns:repeat(auto-fill, 100px);

너비가 허락되는 한 모두 트랙이 만들어진다.

grid-template-columns: max-content;

콘텐트크기에 영향

repeat(auto-fill, minmax(100px,auto));

고정크기의 개수는 미정, 너비가 허락되는 한 모두 트랙을 만든다. 상자가 여백을 다 채운다.

<div>태그 (아이템)을 활성화시켜야 적용된다. 

아이템에 따라서 적용된다. 아이템이 없으면 아예 적용 안된다. 

auto fill : 아이템과 상관없이 자동으로 트랙을 채운다(여백이 없어진다,여백에 선긋기)

auto fit : 아이템에 영향받음, 아이템에 맞춰서 그리드를 그린다.

간단한 버전: 속성은 똑같다. 아이템이 없으면 적용이 안된다.

grid-template-columns:repeat(auto-fill, 100px);

여백까지 꽉채워진다.

grid-template-columns:repeat(auto-fit, 100px);

아이템의 크기만큼 갯수가 정해지며, 고정크기가 적용된다.

 grid-template-columns: max-content;

콘텐트크기에 영향

grid-template-columns: min-content;

스페이스바단위로 끊어짐

grid-template-columns: minmax(500px, 700px);

500보다 작아지면 그대로이다. (웹브라우저를 축소시키면 스크롤바가 생긴다)

gap: 양쪽적용가능 / gap : 10px; / gap : 20px 10px;

row-gap:

column-gap:

grid-auto-flow : 기본값은 row

grid-template-areas & grid-auto-columns :1fr; 

area에 채워진만큼 자동으로채워진다. 

갯수는 div에맞춰지고 컬럼격차는 css에 맞춰진다. 

네이밍은 안되었지만 아이템에 맞게 배치된다. (네이밍은 열3, 행2)

grid-auto-columns : 크기넣기 ; 

grid-auto-columns : 100px ;  모두 동일적용됨. 각각은 불가