본문 바로가기

레이아웃

레이아웃 잡기 : 다단 멀티컬럼 (multi column) 멀티컬럼으로 레이아웃잡기 해상도가 계속 커지는 환경속에 가독성을 높여주는 레이아웃 스타일이 있어서 가져왔습니다. 멀티 컬럼의 속성으로는 column-count, column-width, column-gap, column-rule-style, column-rule-width, column-rule-color, column-span 등이 있는데 자세한 내용은 하단 예시를 통해서 보여드리겠습니다. 사람이 가지고 있는 일곱 가지 감정인 기쁨(喜)ㆍ성냄(怒)ㆍ근심(憂)ㆍ두려움(懼)ㆍ사랑(愛)ㆍ미움(憎)ㆍ욕심(欲)을 이르는 칠정(七情)은 예술 작품 안에서 자유롭고 다양하게 표현되고 있다. 그중에서도 인간의 어두운 내면세계의 가장 깊숙한 곳에 자리 잡은 두려움, 공포라는 감정은 그로테스크에서 비롯되는데, 파격적이고 ..
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 에서는 지원하지 않아서 크로스브라우징에 문제되는 부분이 많음에도 불구하..