-
내가 하는 CSS 가운데 정렬(내용 추가 예정)웹개발/HTML&CSS 2022. 9. 15. 19:55
CSS를 작업하고 있노라면, 항상 파워포인트가 그리워진다.
파워포인트는 대상을 누르고 가운데 정렬만 하면 어느새 화면 정가운데에 정렬되어 있다.
하지만 CSS는 모든 작업을 언어로 해야 한다.
사람과 사람 사이의 소통도 어렵지만 사람과 컴퓨터 사이의 소통도 마찬가지라는 것을 CSS를 통해 깨닫는다.
우선 빈 페이지에 뭐라도 그리기 시작하고 보면
항상 모든 도형들이 왼쪽 위부터 정렬되는 것이 눈에 거슬린다.
이 때문에 곧 가운데 정렬 하는 방법을 찾게 된다.
Flexbox 를 이용한 가운데 정렬
일단 내가 가장 많이 쓰는 가운데 정렬 방법이다.
.container { width: 100%; height: 100%; display: flex; justify-content: center; } .square{ width: 50px; height: 50px; } .red { background-color : red; } .blue{ background-color : blue; } .yellow{ background-color : yellow; }<!DOCTYPE html> <html> <head></head> <body> <div class="container"> <div class="square red"></div> <div class="square yellow"></div> <div class="square blue"></div> </div> </body> </html>flexbox가 가운데 정렬하기는 정말 손쉽다. 컨텐츠를 담는 container를 flexbox로 지정해주고 가운데 정렬을 하면 안에 담은 엘리먼트(위 코드에서는 네모 상자들)들이 자동 정렬된다. 대신 강제적으로 엘리먼트들은 block 요소여도 inline 처럼 한 줄로 정렬이 된다.
margin : auto 를 이용한 가운데 정렬
.container{ width: 300px; margin:auto; } .square{ display : inline-block; margin: auto; width: 50px; height: 50px; } .red { background-color : red; } .blue{ background-color : blue; } .yellow{ background-color : yellow; }똑같은 html에 margin을 이용한 정렬을 이용한 방법이다. 이전 방법과는 다르게 정렬하려는 엘리먼트들을 감싸는 container 박스에 크기를 지정해줬다. 브라우져가 container를 가운데 정렬하기 위한 margin을 계산하려면 width가 미리 지정되어야 하는 것 같다.