[UI/UX]패스트캠퍼스 챌린지 43일차 - css grid
몰랐는데 어제 42일차였는데 41일차로 써놔서
후다다닥 바꿔 적었당 ㅇㅅㅇ
그러므로 오늘은 43일차..!
미션이 1주일 밖에 남지 않았다는 것은 정말 충격적이다,,,
생각보다 하루하루 잘 쓰고 있는 나 자신에게 칭찬을 건네버리기~
오늘은 그리드에 대해서 배웠다.
그리드 하니까 웹디자인 하는 느낌이였다 ㅋㅋㅋㅋ
한번 코딩으로 웹페이지 만들어보고 싶단 생각이 처음으로 들었다!
글이 갈수록 짧아지긴 하지만,,
피그마 강의를 짧게짧게 듣고있다.
사실 피그마로 오늘은 미션일기 써야지! 하는데
적다보면 피그마는 쓸게 없다..ㅎㅅㅎ.....
코딩은 뭔가 쓰면서 하는 맛이 있는데 말입니다,,하하하하
GRID
그리드
열과 행으로 이루어져 그리드를 만든다.
-x축에 해당하는 column, y축에 해당하는 row(행)
-grid-template-columns : 열에 해당하는 것에 수치를 둬서 100px씩 띄워쓰기 가능
-grid-template-rows : 행의 갯수만큼 수치에 맞게 띄워쓰기 가능
-grid-gap : 각각의 행과 열 사이사이에 수치에 맞게 띄워쓴다 (=거터,gutter)
-span : 확장, 2개의 열만큼 span의 수치만큼 확장해서 이동한다.
*해당하는 부분을 지우고싶으면 html에서 지우면 된다.
* '$'는 미리보기
html
<div class="container">
<div class="item">힣하히하하힣</div>
<div class="item">으아아아앙앙</div>
<div class="item">호호호ㅗ호호</div>
<div class="item">기다란 네모 span을 추가했지요</div>
<div class="item">케케케케켘</div>
<div class="item">지지링징징징</div>
<div class="item">주어저머저엄</div>
<div class="item">라라라랄라</div>
</div>
css
.container{
height:400px;
background-color:brown;
display:grid;
grid-template-columns:500px 250px 600px;
grid-template-rows : 50px 90px 150px;
grid-gap:10px;
color:white;
}
.container .item{
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.container .item:nth-child(4){
grid-column:span 2;
background-color:darkred;
}
html
정신병자 처럼 보이는 나의 html..ㅋㅋㅋㅋㅋ
내 오늘 회사에서 일산더미처럼 팽개쳐던져줘서 기분이 안좋아요 :)
(그래서 일단 6시에 도망침)
나는 항상 다른 색상과 크기를 넣는 요상한 버릇이 있어
선생님이 만든거에서 숫자를 다 바꿔놨다 ㅎㅎ
그리고 span적용된거 구분좀 하고싶어서 span이 적용된 자식4에는 색깔을 다르게 줬다.
darkred도 있나? 하고 그냥 써봤는데 있어서 매우 놀라웠다는..!
결과물 짜란
다크레드 생각보다 이쁜디?!
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.