인사말
오늘은 Flexbox에 대해서 배우고 과제를 했다. Flexbox의 개념을 어느정도 공부하고 과제를 시작했는데 뭔가 많이 어려웠다. 그리고 모르는 것을 찾는 방법을 배웠다
모르는것을 찾는 방법
1.Urclass 에서 확인
2.javascript.info - 모던 자바 스크립트 기본 사이트
3.mdn - 문법책 느낌
4.ecma script - 헌법 느낌
검색하는 방법
How to 를 이용하여 검색한다.
js를 붙인다. - 자바스크립트에 대한 내용을 알아야 하기 때문이다.
< div > 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지하는 것을 확인할 수 있습니다
display: flex 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있습니다
flex-direction : 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다
row 왼 -> 오
columm 위->아래
flex-wrap : 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다.
justify-content : 자식 요소들을 가로 정렬
align-items : 자식 요소들을 세로 정렬
flex 속성에는 세 가지 값을 지정해줄 수 있다
grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.
마무리
오늘은 수업시간이 끝나고도 과제를 계속 했다. flex-wrap을 이용하여 계산기를 만들었는고 또 width를 이용해 비율을 설정하였다. 그렇게 만들었는데 오늘 배운 flex box를 잘 사용하지 않은 것 같아서 과제 시간이 계속 끝나고 따로 공부를 하였다. 뭔가 간단할 것 같은데 굉장히 어려웠고 자꾸 바뀌지 않아 힘들었다.
