마진을 위 아래 좌 우 각각 설정할수도 있지만,
마진(margin)으로 네 영역을 모두 동일하게 지정할 수 있다.
margin : "10px 20px 30px 40px"와 같이 쓰면 된다.
맨 처음 값이 상단(위), 다음값이 우측, 세번째 값이 하단, 네번째 값이 좌측이다.
방향으로 네 값이 돌아간다.
그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라고도 사용이 가능하다.
"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이다.
동일한 값으로 4번 반복된다면 "10px" 하나만 쓰면 된다.
즉, "0 auto" 는 상단과 하단은 여백을 주지 말고,
좌측과 우측의 여백을 자동으로(auto) 주라는 것임을 알 수 있다.
이렇게하면, 왼쪽 마진을 오른쪽 마진을 자동으로 나눠서 균등하게 갖게 된다.
이렇게, 가운데 정렬이 된다.
margin : "0 auto"; 이렇게 작성하면 되지만, 이상하다면 그냥 풀어서...
margin-left : auto;
margin-right: auto;
이렇게 작성해줘도 된다. 아니 원래 이렇게 해야 정상이다.
또한, 이것을 사용하려면 당연하지만, 너비가 존재해야 한다.
너비가 있어야 좌 우를 auto로 맞춰서 가운데 정렬이 될 것 아닌가?
너비를 주지 않으면 당연히 가운데 정렬이 적용되지 않는다.
'개발 > HTML' 카테고리의 다른 글
| [HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성. (0) | 2018.12.04 |
|---|---|
| WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요 (0) | 2018.11.17 |
| [HTML] CSS 기초 (0) | 2018.10.18 |
| [HTML] 파비콘(Favicon) 만들고 적용하는 방법 (0) | 2018.10.02 |
| CSS 개념 및 선택자(Selector) 사용하는 방법 (0) | 2018.06.30 |
