지식루프

웹에서 가운데 정렬을 할 때, 초보자가 가장 많이 헷갈리는 부분이 바로margin: auto와 text-align: center의 차이입니다.1. margin: auto의 원리 – 블록 요소를 가운데 정렬main { width: 700px; margin: 32px auto;} main 같은 블록 요소는 기본적으로 왼쪽부터 쌓임.그런데 width를 주면 요소가 화면 전체를 차지하지 않고 남는 공간이 생김.margin-left: auto; margin-right: auto;는 남는 공간을 좌우로 균등하게 분배해서, 블록 요소 자체가 화면 가운데로 이동함.👉 즉, 블록 요소 자체를 정렬하는 방법이에요.2. text-align: center의 원리 – 내부 텍스트/인라인 요소 정렬main { text-a..

CSS의 속성 중 margin 은 요소의 외부 여백을 지정한다.   element는 우리가 작성한 컨텐츠라고 보면 된다.  margin 은 속성값을 가진다. - 단위 : px, em, cm 등의 단위가 있다. - auto : 브라우저가 너비를 계산한다- % : 부모 요소의 가로 너비에 대한 비율로 지정한다.  1. 모든 방향에 대해 한 번에 설정하는 방법.element { margin: 20px 15px 10px 5px; }이 방식은 위, 오른쪽, 아래, 왼쪽 순으로 여백을 지정한다.2. 축약형 사용법축약형을 사용하면 1개, 2개 또는 3개의 값을 줄 수 있다.하나의 값: 모든 방향에 동일한 여백을 준다.element { margin: 20px; /* 위, 오른쪽, 아래, 왼쪽 모두 20px */ }두 ..