그리드, <ficture> src 속성 background-size속성

picture 태그에 대하여 출처 : https://www.html5rocks.com/ko/tutorials/responsive/picture-element/

Built-in Browser Support for Responsive Images - HTML5 Rocks

picture요소나 src속성을 못쓰는 환경임(우리나라 exploer11 점유율)

.member{

order:-1;

display:flex;

justify-content: flex-end;

}

이거를 몰랐음 (공백문자 x flex박스라서) d:f후 우측으로 몰기

a

padding : 5px 8px;

display:block;

a는 어차피 인라인상자라 padding이안먹어서 블록화

.header{

width:1000px;

margin: 0 auto;

display:grid;

grid-template-columns: repeat(12, 65px);

grid-template-rows:50px 50px;

grid-column-gap: 20px;

}

.logo{

grid-area: 1/ 1/ 3/ 4;

background: aqua;

}

.member{

background:orange;

grid-column: 10 /span 3;

}

.memver li:nth-child(n+2)::before{

content: "|";

}

.search{

background: lime;

grid-column: span 6 /13;

align-self: center;

}

.search fieldset{

background: pink;

}

그리드 몰랐던 부분, 그리드 사용하는 방법 그 자체 grid-templtate-columns등으로 레이아웃 잡고

grid-area로 영역 지정하기, 단 +1 생각하기 

grid-garden풀면서 조금 이해도 높힘