👀시작하기전에
교육과정을 진행하던 중 문득 들었던 생각은 "주도적인 학습은 없다" 였다. 그래서 다양한 활동 및 학습의 과정을 바꿔보기로 했다.
- 간단한 학습내용 + 회고록 + 느낀점 작성하기
TIL아님 주의 - 스터디 만들어서 다른팀원과의 교류 및 추가학습
회고방법론
- KPT 회고
K : 잘 해와서 유지하고 싶은 것
P : 어려움을 느껴서 개선하고 싶은 것
T : 구체적인 시도할 내용 - 4L 회고
Liked : 좋았던 점은 무엇인가?
Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?
Learned : 배운 점은 무엇인가?
Longed for : 앞으로 바라는 것은 무엇인가? - 5F 회고
Facts : 사실
Feeling : 느낀 점, 감정
Finding : 배운 점
Future Action : 앞으로 무엇을 할 것인지?
Feedback : 피드백
종류가 상당히 많은데 이것저것 해보겠다.
왜냐면 난 도토리니까.. 오늘은 KPT로 시작해보겠다.
📖핵심학습
css - flex
실습은 코드팬에서 진행했고 다양한 부분 중 flex에 대해 정리한다.
- flex는 Container와 Item으로 이뤄져있다.
- 주축과 교차축을 활용하여 Item들을 정렬할 수 있다.
- 기본적으로 블럭요소이며
display : inline-flex를 통해 inline요소로 선언할 수 있다.
예시
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container{
border:solid 4px;
display: flex;
}
.container .item{
width:100px;
height:100px;
background-color:skyblue;
font-size:40px
}
위와같은 기본틀을 작성하고 다양한 실습을 진행했다.
flex Container
flex-direction: 수평,수직 배치
justify-content: 주축방향 정렬
align-items: 교차축방향 정렬
위의 속성들에서 핵심적인 내용인 수평, 수직, 교차축, 주축이다.
수평과 수직방향에 따라 교차축과 주축이 변경되며 수평 및 수직으로 외워버리면 의도한 방향으로 결과가 나오지 않을 수 있다.
flex items
order: 값을 부여해 배치순서 조절
flex-grow: 남은 공간 확장 비율
flex-shrink: 아이템 축소 비율
flex-basis: 아이템 초기 크기
flex: 단축속성 (grow , shrink , basis)
align-self: 개별 item에 정렬을 지정하는 속성
전체적인 내용에서 핵심은 container와 items의 속성이 명확하게 나눠진다는 것이고 flexboxfroggy를 통해 학습을 진행했다.
작성하면서 헷갈렸던 부분들이 있지만 다밀었으니 만족 vV 😁
KPT회고
K : Keep
- 강의가 밀리지 않았다.
- 노션 클로닝의 리팩토링(상태관리) 잘 진행되고 있는 것 같다.
- 주도적 학습의 시작
P : Problem
- 노션 클로닝 css부분에서 난항을 겪는중이다.
- 강의내용을 실전에서 다룰 수 있을까
T : Try
- 눈앞에 놓인 ts스터디 + 모딥다 스터디에 대한 정리
- 강의에서 학습한 내용으로 노션클로닝 CSS에 옷입히기를 잘 해봐야 할 것 같다.
🔥느낀점
평소에 CSS에 대한 지식이 전혀 없다는걸 노션클로닝 과제하면서 처음 자각했고 강의를 들으면서 두들겨맞은 느낌이었다. 물론 강의를 들었다고 해서 실전에 100% 적용가능한지는 아직도 의문이지만 노션클로닝 CSS에 시간을 많이써보고 다양한 방향으로 고민하다보면 만족스러운 결과가 다시 나오지 않을까?
