eunyo의 it이야기

[CSS] div 가운데 정렬하기 div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다. 텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다. 그러면 세로 가운데 정렬은 어떻게 해야할까요? 여러가지 방법을 알려드리겠습니다. 1. line-height와 text-align line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다. line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다. text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다. [결과화면] [html] 가운데 정렬 [CSS] div..

CSS flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성입니다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있습니다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있습니다. flexbox의 구성 flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있습니다. flexbox 기본 구조 [html] Item1 Item2 Item3 Item4 [css] .container { display: flex; } flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 됩니다..