css (grid, flexbox)

css의 Grid의 핵심 요소는 wrapper(parent)와 items(children)이다. 

wrapper는 실제 눈금.

items는 눈금 안의 내용.

<div class="wrapper">

.wrapper{

       display: grid;

       grid-template-columns: 100px 100px 100px;   -->세 개의 값으 작성 했으므로 세 개의 열을 얻는다

       grid-template-rows: 50px 50px; --> 두 개의 값을 지정했으므로 두행을 얻는다.

}

flexbox

flexbox 레이아웃의 두 가지 주요 구성 요소는 container와 items이다.

주 축은 수평(horizontal)이다.

display:flex;

https://www.vobour.com/-%EB%94%94%EC%9E%90%EC%9D%B8-5%EB%B6%84-%EC%95%88%EC%97%90-flexbox-%EB%B0%B0%EC%9A%B0%EA%B8%B0

[디자인] 5분 안에 Flexbox 배우기

 

display:flex; justify-content: center;

display:flex; justify-content: space-betwwen;

.logout{ margin-left: auto;} (단일 items만 이동 가능)