TIL

🧸 감상

그리드와 플렉스박스에 대해 조금이나마 알게 됐다

📙 열품타 10hour
👍🏼 -
👎🏼 -

🚀 목표

• Udemy에서 Javascript 강좌 수강하기 (222/682)
• 매일 커밋 연속 30일 달성하기 (11/30, 3.31 완료)
• 3.24 발견 노션으로 옮기기
• 내일배움카드 신청
• Jump to Python 완료
• CSS 파트 완료, 위키로 복습해보기(완료)
• clone tiger wiki(진행중)

[링크 목록]

CSS Grid Layout Crash Course
Flexbox CSS In 20 Minutes
Clone tiger wiki github

🍊 복습: Html, CSS

nth-first-child() : 0부터 시작한다

Grid

display: grid;
grid-template-columns: 30% 70%;
grid-column-gap: 1em;
grid-row-gap: 1em;
grid-gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(4,1fr 2fr);

grid-auto-rows: 100px;
grid-auto-rows: minmax(100px, auto);

grid-column-start:3;
grid-column-end:5; (마지막 수는 포함하지 않는다)
grid-column-end: span 2;
-> grid-column: 3 / 5;

grid-column: 2/6;
grid-row: span 5;
-> grid-area: 1 / 2 / 6 / 6;

order (z-index같은 것)

grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-columns: repeat(5, 20%);
grid-template-columns: 1fr 5fr;
grid-template-rows: 10px 10px 10px 20px 1fr;
-> grid-template: 1fr 50px/20% 80%;

그리드는 겹칠 수 있다

grid-garden

.box1 {align-self: start;}
.box4 {align-self: end;}
.box4 {justify-self: end;}

.box1 {grid-column: 1/3; grid-row: 1/3;}
.box2 {grid-column: 3; grid-row: 1/3;}
.box3 {grid-column: 2/4; grid-column: 3;}
.box4 {grid-column: 1; grid-column: 2/4;}

사라지는 것 아님, 겹침

flexbox

display:flex, inline-flex

justify-content : main-axis

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.
• steretch

align-items : cross-axis, 컨테이너 안에서 정렬

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

align-self : align-items가 사용하는 값을 인자로 받음, 개별 요소 정렬

• flex-start
• flex-end
• center
• baseline
• stretch

align-content : 여러 줄 사이 간격

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

flex-direction : 순서 정렬

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

flex-wrap: 여러 줄에 걸쳐 정렬

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow: flex-direction+flex-wrap ,
공백 문자를 이용하여 두 속성의 값을 인자로 받음

flex-grow, flex-shirink, flex-basis, flex: 1;

order: 순서값 적용, 스크린리더 사용자들에게 좋지 않음

column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다

flexfroggy (완료, 진짜 도움 많이 됨)

🍊 복습: Clone Wikipedia

grid, flexbox, css에 익숙해지기 위해 시작함

- 따라하려는 것

- 처음 시작

수업 들은 내용을 떠올리며 어떻게든 해보려고 했는데 완전 엉망진창이 돼버림.
grid, flexbox 수업 듣고 flexbox frog, grid garden 게임 하며 익숙해짐

- 수업 다시 듣고 wikipedia css 살펴본 뒤

wikipedia css를 살펴보고 조금씩 따라 함.

구현해낼 스타일을 전체적인 틀에서 보고 시작해야 헤매지 않는다는 것을 알게 됨.
처음 했던 것처럼 search bar 넣고 싶다고 마구잡이로 넣어버리면 안 된다는 것을 배웠다. div로 소중하게 감싸줘야 한다...

- 오늘까지 한 것

작동이 되는 웹페이지도 아니지만 얼추 따라하게 됐다.
flexbox의 위대함을 깨닫고 약간 눈물이 맺혔다.
신나서 내 취향껏 살짝 고치기도 했다.
갤러리나 search form같은 기능들을 이것저것 넣어보고 싶은 생각도 들지만
목차랑 이미지만 조금 수정하고 내일부터 다시 수업 진도 나가기

• 창 크기 줄일 때 search bar도 같이 줄어들게 하고 싶음