UX·UI - FrontEnd Dev. Story

align 2

[CSS3] display:flex / flexible 레이아웃 / HTML 요소 가운데 정렬하는 방법 7가지

CSS - Display : Flex 1. 인라인 요소를 가운데 오게 하는 방법 - height 값과 line-height 값을 같이 사용하면 중간에 오게 할 수 있습니다. 단, 한 줄일때만 사용할 수 있습니다. - 많이 사용하는 방법은 아니며 활용성이 좋은 방법은 아닙니다. 2. 블록요소를 가운데 오게 하는 방법 - 블록요소 양쪽에 auto 값을 주면 가운데 정렬이 가능합니다. margin: 0 auto; 보통 위 아래는 0을 주고 양쪽은 auto 사용. - auto는 자동값 또는 기본값을 의미합니다. 3. 테이블 구조를 이용하는 방법 - vertical-align: middle 속성을 이용한 가운데 정렬 방법입니다. - display: table을 잘 사용하지 않고 구조가 복잡해지기 때문에 잘 사용하..

프론트엔드/CSS 2019.12.23

[CSS3] flex item의 정렬과 간격 / justify-content / align-content / align-items 속성

1. justify-content CSS justify-content: flex-start [기본값] | flex-end | center | space-between | space-around | space-evenly .flex-item { justify-content: center; } flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’. justify-content 속성은 ‘진행 축’ 정렬과 아이템 사이의 간격을 제어합니다. flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다. 2. align-items CSS alig..

프론트엔드/CSS 2019.12.19
반응형