CSS 가운데 정렬(margin auto조정)

프로그래머스의 css 강의 시청 후 정리하는 글이다.

https://programmers.co.kr/learn/courses/4521/lessons/14635

프로그래머스

무료 강의라서 유튜브에서도 시청이 가능하다.

https://www.youtube.com/channel/UCvx57s_ZBt5VG4fvlStiq2g

빔캠프 VEAMCAMP

 

가운데 정렬

 

-웹페이지 디자인에서 가장 먼저 해야 할 것은 레이아웃을 설정해주는 것으로 그 중에서도 가운데 정렬이 중요하다.

 

-css 에서는 블록단위로 페이지 일부를 할당 받는다. 따라서 아래와 같이 이미지에 background 색(흰색)과 크기를 조정해도 해당 좌우에 할당된 빈 공간은 해당 블록이 가진다.

→아래 이미지에서 동일 코드를 두 번 붙여넣고 확인했을 때 첫 번째 이미지 옆 빈공간에 이미지가 바로 나타나는 것이 아니라 아랫줄에 나타나는 이유이다.

 

위 쪽 햄버거 이미지의 오른쪽 빈 공간은 이미지에 해당된 블록에 할당된 공간 → block level 요소의 소유

 

블록에 아래 코드 입력

Margin-left: auto;

margin-left: auto; 를 하면 왼쪽의 나머지 빈 공간을 마진 값으로 모두 자동 완성되어 이미지가 오른쪽 정렬 된다 .

블록에 아래 두줄 코드 입력

Margin-left: auto;

Margin-right: auto;

margint-left: auto; 처리 아래에 margin-right: auto; 를 하면 그 나머지 공간을  left  반 , right  반 하여 가운데 정렬이 된다 .

 

margin auto 처리→박스(div)를 가운데 정렬 해주는 가장 보편적인 방법

 

Margin-left: auto; Margin-right: auto; 위, 아래 코드는 같은 결과를 보여준다. margin: 50px auto; → 상, 하단 50 픽셀, 좌우 auto

 

 

내용물 가운데 정렬

 

 

Text-align: center;  

→박스 자체는 영향이 없고 박스 내의 모든 인라인 요소가 text align center (상속이 되는 요소)

 

위와 같이 Box 자체를 text-align center를 하면 인라인 요소가 text align center 되는 것이지 내부 블록이 center가 되는 것이 아님

→해당 블록의 background(배경색)나 border bottom(밑줄)을 center로 정렬 하려면 width 따로 설정해야한다.

해당 요소는 가운데 정렬 되었지만 블록은 아님

→ width 적용

→ width 적용 후 해당 width의 범위 내에서 center 적용, 그러나 글을 왼쪽부터 작성하므로 따로 처리가 없을 시에는 자동으로 왼쪽에 붙어있음

Margin: 40px, auto;  처리로 가운데 정렬

 

→ 단점 : margin 은 글자 크기나 길이가 바뀌면 가운데 정렬이 깨진다. 즉, 유지보수가 어렵다.

→ 가변 길이, 크기 텍스트에 대해서는 유지보수가 쉬운 가운데 정렬을 고민해 보아야 함.