HTML에서 CSS 속성으로 div 중앙정렬(가운데정렬)하는 방법은?
직업학교에서 HTML과 CSS를 배우고 있는데 상당히 재밌습니다. 햇갈렸던 부분, 개념정리가 다소 안 되었던 부분, 어려웠던 부분들을 하나하나 터득해가며 내 것으로 만드는 재미가 쏠쏠하다고나 할까요? 마치 퀘스트를 받고 수행하며 보상을 얻는 기분입니다.
레이아웃 기초 부분을 배우는데 어려웠던 div에 대해서도 하나하나 개념을 적립해 나가고 있습니다. 그리고 중앙정렬에 대해서도 이제 확실히 알았습니다. 기준이 뭐가 되어야 하는지, 왜 이렇게 하면 중앙정렬이 되는지 말이죠.
원리는 간단합니다. div같은 블록요소는 반드시 크기값을 가져야 합니다. h1이나 p태그는 블록요소이고 텍스트를 작성하면 알아서 가로사이즈의 크기가 정해집니다. 그렇기 때문에 중앙정렬인 text-align:center; 를 진행하면 한방에 해결이 됩니다. 최초 div를 하나 생성하면 아무것도 없는 무형의 상태죠. 마치 포토샵에서 방금 만든 레이어 같은 개념입니다. 그렇기에 div를 꾸며주는 것 입니다. 크기를 주고, 여러가지 색상이라던지, 안쪽 여백이나 바깥쪽 여백 등을 만들어 줍니다. 테두리도 만들 수 있습니다. 아무튼 이런 CSS 스타일 요소들로 div를 꾸며주게 되는데 중요한건 반드시 가로사이즈는 존재해야 한다는 것 입니다.
여기 간단하게 div 관련해서 마크업을 했습니다. div 안쪽에 h1 태그를 써서 텍스트를 넣었습니다. h1은 div 박스 안쪽에서 정중앙에 위치해 있습니다. 사실 이건 중요한게 아니고, div의 id 값인 #d1에 대한 스타일 요소들을 살펴보시면 width 값이 존재한다는것을 알 수 있는데 이게 정말 중요한 포인트 입니다. 만약 가로값이 없으면 중앙이라는 개념도 있을 수 없기 때문에 절대로 중앙정렬을 진행할 수 없습니다.
위의 마크업에 대한 결과 입니다. 가로 및 세로 사이즈가 200px인 정사각형의 회색 박스 입니다. 이 div를 중앙정렬을 위해서 다음의 태그 요소를 사용합니다.
margin: 0 auto;
margin 은 바깥쪽 여백이라는 뜻 입니다. 보통 margin 다음에 숫자를 1번, 2번, 3번, 마지막으로 4번까지 입력할 수 있고 단위는 px 이 대부분 입니다. 1번을 넣을때는 위/아래/좌/우 에 대해서 얼마나 벌리느냐에 대한 뜻 입니다. 2번을 넣을 경우가 바로 여기에 적용된 부분인데 위/아래, 그리고 좌/우 를 얼마나 떨어뜨리냐에 대한 정의 입니다. 아래에 관련글을 첨부하겠습니다.
CSS 태그 간격 늘리는 padding 그리고 margin 차이점 그리고 사용 방법
즉 여기에서 0은 위/아래는 절대 확장하지 않는다는 뜻이며, 좌/우 로만 자동(auto)으로 확장한다는 뜻이 됩니다. 그래서 가로 사이즈의 크기가 있어야 이 방법이 적용됩니다. 위의 방법대로 마크업하고 결과를 살펴보겠습니다.
보시는 것 처럼 div가 브라우저의 딱 가운데에 배치가 되었음을 확인할 수 있습니다. 그리고 브라우저의 창을 실시간으로 늘리고 줄여보세요. 사이즈에 맞게 알아서 자동으로 중앙정렬이 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
