초보의 질문 text-align:center; 과 margin:0 auto; 뭐가 다른걸까?

이제는 약간 감을 잡게된 text-align:center;와 margin:0 auto;의 차이에 대해 정리해보려고 한다. 

1. text-align

 

블럭요소에 text-align속성을 사용하면 그 안에있는 인라인 요소들이 정렬된다.
1.블럭요소에만 text-align속성을 쓸수있다.
2.블럭요소에 text-align을 쓰면 그 안의 inline요소들이 정렬된다.
3.텍스트뿐아니라 inline요소인 이미지도 가능

속성값: start/end/left/right/center/justify/march-parent
상속여부: 상속된다.

2. margin:0 auto;
블럭요소는 width:100%가 기본속성이다.
width값을 설정하면 width를 뺀 나머지는 margin처리가된다.
margin:0 auto;는 margin을 속기형으로 작성한 것으로, 풀어말하면 위아래 마진은 0, 좌우여백은 자동으로 주라는 의미이다.
따라서 블럭요소에 margin:0 auto;를 쓰면  width값이 있는 블럭요소는 width를 뺀 나머지 여백을 자동으로 나눠서 주기때문에 가운데 정렬이 되는 것이다.

inline 요소에 margin:0 auto;를 주면 인라인요소는 width가 자기크기만큼이고 자동margin이 생성되지 않아서 그 값은 auto로 나누라는 선언은 아무 의미가 없다. 

상속여부:상속안됨


margin:0px auto;라고 쓰다가 깨닳게된것.
margin:0 auto;로 써야하나 margin:0px auto;라고 써야하나 궁금해하다가 웹에서 px단위를 지양해야한다는걸 알게되었다.
px단위를 쓰면 접근성이 떨어진다. 글꼴크기를 16픽셀로 사용하면 브라우저사용자가 기본 글꼴크기를 20px 설정해도 무조건 16px로 보여진다. 사용자가 기본글꼴을 20px로 확장하면 그에따라 모든글꼴이 확장되어야하는데 그렇게 되지않는다.
글꼴크기를 픽셀단위로 설장한다해도 사용자는 브라우저창 크기조절(ctrl+휠, +)를 사용하면 전체요소를 확대할수있지만 브라우저의 기본기능인 기본글꼴크기 조절은 사용할수없게된다.

다음글에서 em/rem에대해 더 알아보려고한다.