🧡 배운점
0.
grid 사용 이유
flex의 단점을 보안하기 위하여
flex는 1차원 레이아웃을 위하여 grid는 2차원 레이아웃을 위하여
Flexbox(Flexible box)와 CSS Grid의 차이와 장단점
1.
컬럼은 열이고 로우는 행인데 왜 반대로 움직이나? 헷갈렸던 부분
grid-template-columns: 컬럼의 너비를 지정 (가로로 늘어남)
각 가로줄의 높이를 정해주었다고 생각하면 됨.
grid-template-rows: 행의 높이를 지정 (세로로 늘어남)
100 50 300 일때 행을 3개를 만들고 높이가 각각 100 50 300 인거임.
2.
레이아웃을 만들고 색상을 지정할때
background-color
가 아니라
background:red;
레이아웃 안에 글자색상은
color:white;
이렇게 적어야했음
<body>
<div class="grid">grid</div>
<div class="hearder">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">footer</div>
</body>.grid{
display: grid;
grid-template-columns: repeat(3,50px);
grid-template-rows: 100px 200px 500px;
}
.header{
background-color: red;
font-size: 200px;
}게다가
hearder html에 오타있어서 안 나왔음,
오타 유의하기
3.
적용이 안됬었는데 그리드로 설정한 부모태그 바깥에 넣어놓고 왜 안되나 하고 있었음ㅋㅋㅋㅋ
<div class="grid">grid</div>
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">footer</div>
.grid{
display: grid;
grid-template-columns: repeat(4,200px);
grid-template-rows: repeat(4,200px);
grid-template-areas:
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer"
}또한 이렇게 구역을 나누는 방법도 있는데 이대로만 하면 변화없음
grid-template-area로 구역을 나눠주고 싶으면
"" 안에 구역들 적어놓고 layout보여지고 싶은대로! 지정해놓고
각 클라스에 grid-area로 이름 정의해줘야함
예시>
grid-area: header
4.
layout만드는 방법여러가지 중이지만 그 중 두개 배움
1번은 위에 grid-template-area
2번은 자식클라스에 grid-column-start:1 ,grid-column-end:2
첫번째라인 두번째라인 으로 셈
컬럼과 로우가 어디서 시작 어디서 끝 > 그러나 shortcuts사용하면 반복되는 것들 안 해도됨
❤️ 느낀점
두번째 클론코딩 난 최선을 다했다....
음,,,,,, 레이아웃은 어떻게 어떻게 만들었는데
클론 과제하는 디자인의 정확한 간격의 사이즈, 정확한 색깔
어떻게 해야할지 모르겠고
flex써서 글자를 배열하는거 쉽지 않다.
html태그 어떻게 넣어야하는지 그거부터 익숙하지 않아 어려움을 겪었다.
그리고 처음이니까 그리고 최선을 다했으니까
앞으로 계속 반복할꺼니까 우선은
grid를 사용해봤다는 것에 의의를 두기로했다.
앞으로 정확하게 어떻게 간격사이즈랑 색상들 맞추는지 더 알아보면 된다.
또한 클론코딩할 디자인들이 모인 사이트 정보도 줍줍 했으니
공부가 어느정도 되면 원하는 디자인 골라서 반복해서 클론할 예정이다.
.png)