CSS
flexbox
자식 엘리멘트에 말하지 말고 부모 엘리멘트에만 말해야 한다.
- 자식에게 명시하지 않고 부모에게 flex 를 명시해야함
축이 존재한다.
- main axis(주축) --> justify-content 는 주축에 적용
- cross axis(수직) --> align-items 는 교차축에 적용
align-items 설정시 아무일도 일어나지 않는다..
- 부모에게 height 를 줘야한다. cf. 100vh (화면)
justify-content: center/flex-end/flex-start(default)/space-evenly
flex-direction 기본 값은 row이다. 만약 column 으로 주게 되면 주축과 수직축이 바뀌어 justify-content와 align-items 는 바뀌어 줘야한다.
div 의 기본 속성은 block 이다.
span 은 inline 이다.
inline 은 높이가 없다. span tag 에 vertical margin 적용되지 않음
div 를 inline-block 으로 선언하는 것은 좋지 않다. 알 수 없는 간격들이 생기고 레이아웃 조정이 힘듦