레이아웃 잡기 썸네일형 리스트형 flex 로 레이아웃 정렬하기 css flex로 정렬하기 flex는 메인정렬과 교차정렬 개념이 필요합니다. justify-content는 메인정렬, align-item은 교차정렬을 뜻합니다. display:flex; justify-content: center; align-items: center; 위처럼 작성하면 수평과 수직으로 중앙에 정렬하게 됩니다. display:flex; 를 사용하면 직계자식요소들도 영향을 받게 되는데 flex 대신 inline-flex를 사용하면 직계자식요소들을 감싸는 부모요소가 inline 요소가 됩니다. flex 전에는 display:table;과 table-cell을 사용해서 수평, 수직 정렬을 하기도 했는데요. 아직 ie 7,8,9 에서는 지원하지 않아서 크로스브라우징에 문제되는 부분이 많음에도 불구하.. grid 로 레이아웃 잡기 css grid로 레이아웃 잡기 grid는 반응형 페이지 레이아웃을 잡을때 용이하게 사용되지만 ie 버전 11 이상만 지원하고 이전 버전은 지원하지 않는 단점이 있습니다. 언젠가 최적화 될것이라 믿으면 레이아웃 잡기 끝판왕 grid를 공부해 볼까요?! 참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/grid 테스트 사이트 http://cssgridgarden.com 아래 이미지는 테스트 사이트로 적어놓은 GRID GARDEN ( http://cssgridgarden.com )이라는 사이트인데, GRID GARDEN 사이트에 가면 간단한 게임을 통해서 GRID를 쉽게 익힐 수 있으니 먼저 접속해서 GRID를 경험해보시면 좋을 것 같아요. #garden { di.. 이전 1 다음
