[WIL]2023년03월12~18일

막막하다;;
지난 일주일 동안 매일 TIL을 적었는데 WIL을 또 적으면 뭐라고 적지... 음...

내용 중복은 싫으니깐 그냥 지금 머리 속에 떠오르는 것들을 적고, 다음 주 목표를 적어야겠다.

이번 주 목표 달성 점검! 에 대해서는 다음 주 부터 카테고리로 넣어야지! 응 그래그래.

 

1. 개구리 게임으로 배운 아이들

# pond { }

display: flex;

기본값으로 display: block; 으로 되어 있는 것을 flex로 바꾸는 명령어.

display: block; 으로 되어 있으면 각 요소가 가로 영역을 모두 채워서 다음 요소는 줄 바꿈이 된 것처럼 보인다.

display: inline; 으로 되어 있으면 같은 줄에 붙어서 줄줄줄 이어져 나가게 된다.

display: flex; 이건 각 요소가 width 길이만큼 가로 영역을 차지하고, 세로 영역은 컨테이너의 높이 만큼 사용한다.

 

display: flex;
justify-content: flex-start;
justify-content: flex-end;
justify-content: flex-center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

justify-content: <어쩌구>; 코드는 justify-content 라는 속성이 <어쩌구> 인자대로 요소들의 가로 배열을 어떻게 할 건지 정의한다.

스타트: 요소들을 왼쪽 끝에 배치

엔드: 요소들을 오른쪽 끝에 배치

센터: 요소들을 가운데 센터에 배치

스페이스-비트윈: 요소들을 서로 사이를 두고 멀찍이 떨어지도록 배치

스페이스-어라운드: 요소들이 자기만의 주변 공백을 갖은 채로 서로 사회적거리두기 하도록 배치

스페이스-이븐리: 요소들이 각자 주변 공백이 있다면 존중하되 서로 겹치는 공통 거리는 소거시킴.

 

 

display: flex;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;

align-items:<어쩌구>; 코드는 align-items 라는 속성이 <어쩌구> 인자대로 요소들의 세로축 배열을 어떻게 할 건지 정의한다.

스타트: 꼭대기에 배치

엔드: 바닥에 배치

센터: 중간에 배치

베이스라인: 요소를 컨테이너의 시작 위치에 배치

스트레치: 요소를 컨테이너에 맞도록 잡아늘림

 

 

 

display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-direction: 요곤 또 새로운건데, 요소들의 정렬 '방향' 을 지정해주는 명령이다.

로우: 가로로 글 쓰는 방향과 동일. 왼쪽에서 시작해서 오른쪽으로 끝나는.

로우 리버스: 가로로 문장 역방향

컬럼: 세로로 위에서 아래로

컬럼 리버스: 세로로인데 아래에서 시작해 위로.

 

 

**이쯤에서 포인트. flex-direction: 에서 row-reverse나 column-reverse를 쓰면 방향만 바뀌는 게 아니라 flex-start와 flex-end의 의미도 따라서 바뀐다. ㅎㅎ

 

**또 하나 포인트. flex-direction:을 column으로 지정했으면 그때부턴 문장이 세로축으로 꽂히므로 justify-content: 를 조정하면 세로축 중에서 움직이고, align-items:를 조정하면 가로축 중에서 움직이는 걸로 규칙이 바뀐다.

 

 

 

diplay: flex;

.red {
	order: 1   혹은   -1
}

때때로 이렇게 하면 편리하게 빨강이를 딱 잡아서 왼쪽 끝으로 보내거나 오른쪽 끝으로 보낼 수 있음.

요소가 여러개 나열되어 있는 중에, 원하는 하나만 지정해서 좌측 우측으로 빼는 기술.

 

 

 

#pond {
	display: flex;
	align-items: flex-start;
}

.yellow {
	align-self: flex-end;
}

요롷게 하면 가로로 쭉 줄 서 있는 요소들 중에서 노랑이만 바닥으로 내릴 수 있음.

 

 

 

diplay: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

요소들을 한 줄에 꽉꽉채울지 느슨하게 풀어줄지 정하는 게 flex-wrap: 속성이다.

노랩: 한줄에 꽉꽉채움

랩: 여러줄에 걸쳐 풀어줌

랩-리버스: 여러줄에 걸쳐 풀어주되 반대로 정렬함.

 

 

 

diplay: flex;
flex-flow: row wrap;
flex-flow: column wrap;
flex-flow: colmn-reverse wrap-reverse;

뭐 이렇게 헤롱헤롱 어지럽게 쓸 수 있는

flex-flow: 라는 속성도 있다.

이건 flex-direction 이랑 flex-wrap을 같이 쓸 일이 많으니까

두 가지를 한 줄에 다 쓸 수 있도록 만든 하이브리드 속성이다. 편리하라고 만든 것. flex-flow.

위에 예시처럼 앞에 flex-direction 인자들 쓰고 한 칸 띄어쓰기 후 flex-wrap 인자들 쓰면 된다.

 

 

 

display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

요런 align-content: 속성도 있다.

일단 전제 조건은, 여러 줄일 때다. 여러 줄을 갖고 있을 때 그 줄들 사이의 간격을 조절하거나, 꼭대기나 바닥으로 몰아 붙이는 역할이다. align-items랑은 다름. align-items: 속성은 대상이 줄들이 아니라 컨테이너 안의 모든 요소를 조준한다.

 

 

 

다음 주 원대한 목표:

1. 생활코딩 WEB HTML/CSS/JS

세 가지 과목을 모두 풀 수강 하고, 실습까지 마칠 것.

 

2. GIT & 웹개발A-Z : 지급 받은 강의들을 선두에서 완강할 것

 

3. 파이썬에 대해서 계속 진지하게 복습하고 현업개발자 팟캐스트 들으며 스키마 모을 것

 

4. 오전에 꼭 일찍 일어나서 운동 다닐 것. 근손실 절대 안돼!!!

 

 

 

 

만족스럽다.

다음 주엔 정상궤도로 올라올 나의 WIL... 안녕

 

ps. 개구리게임 마지막 단계인 24단계 클리어!!!!!!!!!!!!!!!!!!!!!!!!!!

너무 기뻐;; 내일 다시 풀어도 맞힐 수 있을 진 모르겠지만;;ㅋ