![]()
예제) Flex를 활용한 푸터 위치잡기 Header Footer 흔히 flex를 사용할 때, 위의 예제 코드처럼 margin-top: auto; 를 사용하면 푸터가 바닥에 쉽게 붙일 수 있다. 문제) IE에서는 min-height 값만으로는 적용불가 그런데 ie에서 제대로 적용되지 않는 margin: auto; 값을 제대로 표현해주지 않을 때가 있다. 부모 요소의 높이를 min-height로 잡는 경우에는 적용되지 않는 것을 확인할 수 있다. 해결방법) min-height 보다 작은 값의 height 값을 지정해준다. Header Footer 제일 작은 사이즈의 핸드폰 해상도도 320x568 이기 때문에 height는 임의로 500px을 넣었다. (사실 코드 동작은 height: 0; 만 넣어도 된다.)..
![]()
들어가며 앞으로 CSS에서 가장 기대하고 있는 부분이 바로 레이아웃 컨트롤이다.flex와 같은 CSS가 보편화되면 아마 퍼블리싱이 훨씬 수월해 질 것 같다. *display: flex 의 경우는 IE에서 11을 제외하면 동작하지 않는 문제점이 있다. [참고] https://css-tricks.com/snippets/css/a-guide-to-flexbox/[참고] http://ko.learnlayout.com/flexbox.html 실습#1. NTS 프론트엔드개발팀에서 유투브에 공유한 영상을 보고 간단한 flexible layout을 만들어봤다.정말 간편하고 간결하다. CSS 만으로 dom 위치를 훨씬 유연하게 컨트롤 할 수 있다는 점이 가장 좋다. #2. flex-direction: column || ..
