CSS 썸네일형 리스트형 [CSS] div 안의 div를 가운데 배치하기, 수평&수직, position 이번에는 position을 이용하여 수평 가운데, 수직 가운데 배치를 하는 방법을 알아보겠습니다. 먼저 이전 글에서 말씀드렸던 width & margin:auto 를 이용한 코드를 보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 잠시 margin:auto는 삭제하겠습니다. 그리고 position 속성을 부모요소( .container )와 정렬될 요소( .item )요소에 넣으면 아래의 코드가 됩니다. .container { background-color: yell.. 더보기 [CSS] div 안의 div를 가운데 정렬하기, 수평&수직, display:flex 이 전 글에서 width와 margin:auto를 이용해 div 안의 div를 수평정렬하는 방법을 알아봤습니다. 그 코드를 다시 한번 살펴보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 그 결과는 아래와 같습니다. 이 방법은 수직 정렬에는 사용할 수 없습니다. display:flex 를 이용하여 수평 가운데 정렬을 하는 방법을 알아보겠습니다. ----- CSS 코드 ----- .container { background-color: yellow; display: f.. 더보기 [CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto 위의 코드와 같이 div가 중첩되어 있을 경우 안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다. 이 때 필요한 CSS 코드는 width와 margin: auto 입니다. 우선 div 요소에 CSS에서 사용할 이름을 부여하고, 화면에 보이도록 배경색을 설정해보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; } 이 상태로 웹페이지에서 확인하면 화면에 아무것도 나오지 않습니다. div태그는 block요소이고, block요소의 상하 높이는 최대한 작아지려는 경향이 있기 때문입니다. div.. 더보기 이전 1 다음
