[TID] 17일차 - 2020.03.28

eassy·2020년 3월 28일
0

Today I Done

목록 보기
16/69

⌚️ 시간관리

☀️ 기상시간 - 07:00
🌕 마감시간 - 24:00
❌ 주말이라고 자꾸 쉬고만 싶고,,, 그래서 집중해서 긴시간 공부하진 못했다..

💻 오늘 배운 것

Flex 적용

개구리 옮기는 게임 하면서 배우기..!

  1. justify-content : 요소들을 가로선 상에서 정렬
  • flex-start: 컨테이너의 왼쪽으로 정렬
  • flex-end: 컨테이너의 오른쪽으로 정렬
  • center: 컨테이너의 가운데로 정렬
  • space-between: 요소들 사이에 동일한 간격이 생김
  • space-around: 요소들 주위에 동일한 간격이 생김
  1. align-item : 요소들을 세로선 상에서 정렬 (컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정 )
  • flex-start: 컨테이너의 꼭대기로 정렬
  • flex-end: 컨테이너의 바닥으로 정렬
  • center: 컨테이너의 세로선 상의 가운데로 정렬
  • baseline: 컨테이너의 시작 위치에 정렬
  • stretch: 컨테이너에 맞도록 늘림
  1. flex-direction : 요소들이 정렬해야 할 방향을 지정
  • row: 텍스트의 방향과 동일하게 정렬
  • row-reverse: 텍스트의 반대 방향으로 정렬
  • column: 위에서 아래로 정렬
  • column-reverse: 아래에서 위로 정렬
  1. order : flex 컨테이너에서 flex 아이템을, 기재된 순서를 무시하고 레이아웃에 사용하는 순서를 지정
    -> 요소는 order 속성 값의 오름차순으로 정렬,
    order 속성 값이 지정되어 있는 경우, 소스 코드의 순서대로 배치
    -> {order:순서 번호}
    초기 값은 "0"이며, 속성의 초기 값보다 작은 음수 값 "-1"을 지정하면 가장 먼저 표시됨
  2. align-self : align-item의 속성을 무시하고 flex요소를 세로선상에서 정렬 (요소 정렬법은 같음)
  3. flex-wrap : flex 요소들을 한줄, 또는 여러줄에 걸쳐서 정렬
  • nowrap: 모든 요소들을 한 줄에 정렬
  • wrap: 여러 줄에 걸쳐 정렬
  • wrap-reverse: 여러 줄에 걸쳐 반대로 정렬
  1. flex-flow : flex-direction, flex-wrap을 간략히 압축
  2. align-content : 세로선 상에 여분의 공간이 있을 경우, flex컨테이너 사이의 간격을 조절 (여러 줄들 사이의 간격을 지정)
    -> 한 줄만 있을 경우, 효과는 적용되지 않음
  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
  • center: 여러 줄들을 세로선 상의 가운데에 정렬
  • space-between: 여러 줄들 사이에 동일한 간격을 둠
  • space-around: 여러 줄들 주위에 동일한 간격을 둠
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘림

❓오늘의 나는

  1. 어제 분명 다짐했고, 오늘은 7시 전부터 눈이 떠져서 정신이 말짱했는데.. 왜그렇게 아무것도 하기 싫은건지. 내 몸 컨트롤 하는게 너무너무 어려운 요즘이다. 어떻게 해야 환기가 될지 모르겠다.
  2. 머리를 식힐 겸 한 일이 너무 많았다. 4월이 되기 전에는 정신을 제발 차리고 싶다.
  3. 그래도 어제 올리지 못한 블로그, 커밋을 완료 하였고, 오늘의 블로그도 꾸역꾸역 완성시켰다. 매일 조금이라도 꾸준히 하는 것에 목표를 두자!

❗️내일의 나는

  1. 오전중에 일찍 일어나서 코드 분석좀 하고, 작성을 좀 해보아야겠다. 늦은 밤에는 커밋도 해보아야지
  2. 내일은 정말 마지노선으로 쉬는 시간을 가져야지. 제발!
profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

0개의 댓글