[220730] Daily Study Note

 

  Today's Plan  

 

Studying CSS with making project using html, javascript

1) flex

 

Training Coding Test with Python 

 

1) DP

---

Studying CSS with making project using html, javascript

자꾸 flex 사용하며 속성 이름들을 잊어서 이번 기회에 제대로 외우려고 복습합니다.

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

해당 글을 통해 대충 암기는 했는데, 안 까먹기 위해 flex기준으로 동작하는 간단한 웹을 구현했습니다.

 

1. [4e3a495] | 220730 PracticeCSSFlex | Init: add button to change container's display property: flex and block

 2.  [d841112] | 220730 PracticeCSSFlex | Feat: add buttons to chang container's flex-direction property: row and column and row-reverse and column-reverse

- 자잘한 실수

python이랑 javascript의  Switch case문 문법이 헷갈렸다. 기억하자..

 

1)

 

처음에 위와 같이 여러 개의 버튼마다 요소 등록해서 각각 이벤트 등록하려다가

앞으로 4-5개 요소씩 있는 버튼 리스트들이 5-6개 나올 것 같은데 너무 불필요하게 진행될 것 같아 버튼 리스트에 이벤트 등록해서 이벤트 위임으로 처리하기로 결정했다.

 

2)

trouble shooting

위의 기록 위해서 캡처한다고 커밋 이후에 임의로 작업 뒤로 돌렸다. 그리고 마지막 commit으로 다시 돌아오는 데에서 문제가 생겼다.  git reset --hard로 커밋 이후 진행한 작업이 왜 안 지워질까!?

 

HEAD is now at d841112 ...

라고 뜨더니 

\...\...\ (HEAD detached at d841112)

 

HEAD detached..? 아 git 또 이해 안 된다. 역시 확실히 전체 구조를 이해하지 못했나보다.

아래의 설명을 읽었다.{}][

What's a "detached HEAD" in Git? | Learn Version Control with Git (git-tower.com)

What's a "detached HEAD" in Git?

 

<div class="flex-wrap">
            <span class="flex-wrap">flex-wrap</span>
            <button class="flex-wrap-nowrap">nowrap</button>
            <button class="flex-wrap-wrap">wrap</button>
            <button class="flex-wrap-wrap-reverse">wrap-reverse</button>
        </div>

 

 

 

 

4)  [5c6bec6] | 220730 PracticeCSSFlex | Feat: add buttons to change container's flex-wrap property: nowrap and wrap and wrap-reverse

 

flex-wrap으로 컨테이너에 충분한 자리가 없을 때, 줄바꿈으로 내려갈 지 삐져나갈 지를 정할 수 있다.

 

그림으로 확인하기 쉽게끔 컨테이너의 border와 활성화된 버튼의 색 변경 기능을 추가했다.

 

 

: 설명 상 원래는 삐져나와야 하는데, 이상하게 박스들이 지들이 알아서 너비를 줄여버린다.

: 너비와 높이를 % 기준으로 해서 그런 것 같아 픽셀 값으로 변경하였다. 더 직관적인 확인을 위해 버튼 위치와 박스 컨테이너 위치도 조정했다.

: 이 쯤 되니, flex-direction과 flex-wrap의 reverse를 섞었을 때 어떻게 되는 지 궁금했는데,

직접 찍어보니 flex-direction은 가로 줄 내에서 순서가 바뀌고, flex-wrap은 세로 줄들의 순서가 바뀐다.

 

 

4.

개념적으로 알고 넘어갈 사실은 flex-flow 라는 프로퍼티에는 flex-direction의 값과 flex-wrap의 값을 섞어서 한 번에 값을 할당할 수 있다.

 

5. [e9a4009] | 220730 PracticeCSSFlex | Feat: add buttons to change container's justify-content property: flex-start, flex-end, center, space-between, space-around, space-evenly

 

위의 요소들은 꽉 차있어서 비교가 어렵고,

아래 3요소가 있는 열에서 요소 간 간격을 확인해 비교하면 된다.

수평축 방향 정렬

 

 

6.  [71ef9d4] | 220730 PracticeSCSSFlex | Feat: add buttons to change container's align-items property: stretch, flex-start, flex-end, center, baseline

 

아이고.. align-item이 아니라 align-items란다..

 

요소들이 wrap이면 작용 안 한다. nowrap일때만 적용된다.

 

앗. 빼먹은 속성이 있었다. 지금 처음 익힌 거라 역시 바로 머리에 안 들어왔다.

stretch 속성이다. flex는 요소들이 wrap을 안 하면 너비는 알아서 채우지만, 높이는 그대로 유지한다. 그런데 stretch를 하면 높이도 꽉 채운다.

 

 

7. [f47fc70] | 220730 PracticeCSSFlex | Feat: add buttons to change container's align-content property: stretch, flex-start, flex-end, center, space-between, space-between, space-evenly

 

align-item: 요소들이 wrap으로 되어 있을 때의 수직축 방향 정렬, 

요소들이 nowrap일 때는 작용 안 한다.

 

 

 

8. 헷갈리지 말 것

 

 

9.  그리고 내부 요소들에 지정하는 값들

 

flex-basis

 

flex-grow

 

flex-shrink

 

flex

 

align-self

 

order

 

z-index

 

 

---

Training Coding Test with Python 

 

1) DP

여러 개의 하위 프로그램을 해결한 뒤 쌓아올려 전체 프로그램을 수행하는 방식

여러 개의 하위 문제들을 해결 한 뒤 그 결과들을 쌓아올려 최종 해답을 찾는 알고리즘

여러 개의 하위 문제들을 먼저 해결한 뒤 그 결과들을 쌓아올려 주어진 문제를 해결하는 알고리즘

 

2) DP를 푸는 과정

  - 테이블 정의하기

  - 점화식 찾기

  - 초기값 정하기

: DP문제는 작정하고 푸려면 한없이 어려워지지만, 코딩테스트에서 나오는 DP는 일단 점화식만 찾고 나면 초기값을 채워넣은 뒤, 반복문을 돌면서 배열을 채워주면 된다.

: 그러나 수학적 직관력이 없으면 점화식을 이끌어내는 것이 힘들고, 초보 단계에서는 DP문제인지 알아차리는 것도 힘들 수 있다.

: 그래서 오늘은 쉬운 문제를 많이 풀어보며 테이블을 찾고 식을 세우는 연습을 해본다.

: 스스로 할 때도 적당한 난이도의 DP문제들을 많이 풀어보며 식을 머릿 속으로 많이 고민하고 다양한 유형을 학습 및 숙달하는 것이 중요하다. 그래야 DP문제가 나왔을 때 빨리 눈치채고 쓱 해내야 한다.

 

3) 간단한 예제 : 피보나치

 

# 재귀
def fibo(n):
  if n <= 1:
    return 1
  return fibo(n-1) + fibo(n-2)

print(fibo(3))


# 메모제이션
def fibo2(n):
  f = [1, 1]
  if n == 1 or n == 2:
    return
  for i in range(2, n+1):
    f.append(f[i-1] + f[i-2])
  return f[-1]

print(fibo2(3))

 

더 많은 예시 참고: https://richwind.co.kr/3

피보나치(Fibonacci) 수열을 구현하는 7가지 방법 - 파이썬(Python) 피보나치 구현 7선

 

 

4) DP 관련된 문제 풀어보기

 

(1) https://proprotrainee.tistory.com/122

[ BOJ / 파이썬 ] 1463 1로 만들기

 

(2)