오늘도도 프로그래밍 관련 포스팅입니다!!
영상을 보면서 정리를 하고 있구요!!!
Grid는 Flexbox 이후에 나온 개념인가 봅니다. layout을 잡기가 아주 쉽다는 말이 있군요!! 여기까지 배우면 HTML layout 마스터가 되지 않을까!! 싶습니다.. 물론 추가 공부는 필요하겠지요..!!
CSS Documents Site!!!
https://developer.mozilla.org/ko/docs/Web/CSS/Reference
Grid 정리 잘된 사이트!!
https://heropy.blog/2019/08/17/css-grid/
Grid(Display 속성!!)
사용된 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item">1<p>Hello Steemian!!!!</p></div>
<div class="item">2<p>Hello KR DEV!!!!!!!!!!!!!!</p></div>
<div class="item">3<p>Hello Steem Coinpan Members!!!!!!! GoGo STEEM!! GoGo BTC/ ETH</p></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
Container 에 적용하는 속성들
grid-template-columns
- column 기준으로 item들을 어떻게 배열을 할 것인지 설정
grid-template-columns:40% 60%: 값이 2개만 주어지면 col 2개 그리고 화면에 가득 채워집니다.
grid-template-columns:40% 40% 20%
grid-template-columns:40% 40% 30%: 합쳐서 100%를 넘어가는 경우 화면 밖으로 튀어 나간다.(화면 전체를 100%으로 판단)grid-template-columns:4fr 6fr;: 위에는 %로 주어졌지만,fr을 이용하여 비율로 설정 가능
grid-template-columns:4fr 6fr 4fr;
grid-gap:1rem: item사이에 간격을 주는 속성(margin 처럼 되진 않고, 아이템 사이만 여백이 들어가네요!)
grid-template-columns:repeat(3, 1fr):grid-template-columns:1fr 1fr 1fr;와 같은 효과를 좀 더 쉽게 사용가능grid-template-columns:100px 1fr;: 첫번째 item은 100px로 고정을 하고 나머지로 비율 조절
grid-auto-rows
- item의 height를 조절하는 기능
grid-auto-rows:100px: item의 높이를 200px로 고정(div 내부에 값들이 범위를 넘어서는 경우 div 밖으로 튀어나감)
grid-auto-rows:minmax(100px, auto): 100px을 기본으로 하되 그 범위를 넘어서는 item은 자동으로 크기를 늘려주는 속성(위의 문제에서 내용물이 튀어나가는 걸 막아줌)
justify-items
- item을 가로기준으로 정렬을 해주는 기능
centeritem들을 가운데 정렬해줍니다.(본인의 구역내에서 가로 기준 가운데 정렬입니다.)
align-items
- item을 세로기준으로 정렬을 해주는 기능
Item에 적용하는 속성들
justify-self
- 본인 item만 따로 가로로 정렬해주는 속성
justify-self: center or start or endcenter/start/end 속성에 따라서 가로 기준 정렬
align-self
- 본인 item만 따로 세로로 정렬해주는 속성
align-self: center or start or endcenter/start/end 속성에 따라서 세로기준 정렬
grid-column
- 균일하지 않은 layout 설정시 주로 사용됨
- 가로기준으로 하나의 칼럼이 시작되는 칸을 기준으로 index가 있다고 보고 1은 COL1이 시작되는 좌측 , 2는 COL1과 COL2 사이, 3은 COL2와 COL3의 사이, 4는 COL3의 우측끝 으로 설정이 됩니다.
| COL1 | COL2 | COL3 |
|---|---|---|
| 1 | 2 | 3 |
- 여기서
grid-column:1/4로 설정을 하면 해당 ITEM이 한줄 전체를 차지하게 되는 것입니다.(1/4에서 1은 시작점 4는 끝점이라고 보시면 됩니다)
.item:nth-child(1){
grid-column:1/4;
}
.item:nth-child(1){
grid-column:1/3;
}
grid-row
- 균일하지 않은 layout 설정시 주로 사용됨
- 세로기준으로 작동하고
grid-column과 동일한 개념으로 작동함
.item:nth-child(4){
grid-row:2/4;
}
- 세로로 병합해준 칼럼이 자동으로 앞으로 넘어온다. 이럴 경우
grid-column으로 시작점을 잡아준다.
.item:nth-child(4){
grid-column:3;
grid-row:2/4;
}
- 값에 따라 다른 영역 침범도 가능합니다.
- 9번 item이 4번 item 절반을 차지하도록 해봅니다.
.item:nth-child(9){
grid-column:3;
grid-row:3/5;
}
여기까지!!! 입니다..
와... 이거.. 저는 좀 예전 스타일만 알고 있어서, 이런거 배치하려면 정말 X빠지게 개고생 했는데, 이제는 이렇게 쉽게 구현이 가능해졌군요.
너무 오래 안했었나 봅니다. 이제는 뭐.... 진짜.... layout 잡는건 너무 쉬울 것 같다는 생각이 드네요..!!!!
start success go! go! go!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 41.87%, steem power : 1809196.30, STU KRW : 1200.
@happyberrysboy staking status : 12340 KRWP
@happyberrysboy limit for KRWP voting service : 12.34 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 39.215 KRWP [55571010 - 96c444baa525372a606263b087d7b8eabec6a7dc]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
CSS 정리 굳굳~! CSS 정리 시리즈 다 읽었음. ㅎㅎ
나중에 요것도 한번 정리를.. 쿨럭...
https://web.dev/learn/css/
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
ㅋㅋㅋㅋㅋㅋㅋ
우리 이정도만 배워도 충분하지 않을까? ㅋㅋㅋㅋ
더이상의 CSS는 퍼블리셔분들이나 디자이너 분들에게 넘기자! ㅋㅋ
오... 근데 이 사이트 짱이네 ㅋㅋㅋ 좋은 사이트 공유해주려고 했구먼!! 땡큐 ㅋㅋ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
CSS 마스터는 프론트엔드 개발자의 숙명이라서... ㅠㅠ
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit