2019-12-11 TIL

일일목표

CSS 적용

1. 상품추가
2. 장바구니
3. 마이페이지
4. 개인정보 확인/수정
5. 로그인
6. 회원가입
7. 구매 페이지

Javascript 적용

• 슬라이드 링크
• Header 이미지 링크
• Footer 넣기

CSS

• grid

• flex

  • display: flex속성을 선언하면 해당 요소는 flex container가 되고 자식 요소는 flex item이 된다.
  • flex-direction속성으로 주축의 방향을 결정하며 row는 왼쪽에서 오른쪽, column은 위에서 아래방향으로 흐른다. 속성을 입력하지 않으면 자동으로 row속성이 된다.
  • flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content / 전체적인 정렬이나 흐름에 관한 속성
  • flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order / 자식요소의 크기나 순서에 관련된 속성
• flex box froggy

결과

• 로그인, 회원가입, 상품상세페이지, 상품리스트, 장바구니 CSS 적용

5FS

Facts

• 대부분 페이지에 CSS를 적용했다.
• 코딩도장에서 budget 문제를 풀었다. 문제는 쉬웠는데 TDD방식으로 풀려하니 풀리지 않았고 윤석님께서 도와주셨다.

Feelings

• 문제가 쉬웠다면서 왜 풀지 못했는가? 코드를 치기전 충분히 생각하고 풀이과정을 말로 설명할 수 있었나?

Findings

• TDD방식으로 문제를 풀었는데 논리적으로 접근하지 못했다. 윤석님께서 TDD로 풀어가는 방식을 더 구체적으로 설명해주셨고 이제야 감이 잡히는 것 같다. 스스로 힘으로 문제를 풀지 못해 아쉽지만 TDD를 좀더 명확하게 알게된 것 같아 만족스러운 코딩도장이었다.
• CSS에서 유행하는? 태그와 속성이 있다.(grid, flex 등… table태그는 잘 쓰지 않는다)

Future Action Plan

• 오늘 알게된 TDD방식으로 매일 반복해서 같은 문제를 풀어보자 어느순간 익숙해져있기를..
• CSS의 flex, grid 공부를 더 깊이 해보자

Feedback