margin: 0 auto;
margin 0 auto; 를 주면
0은 위아래 여백을 주지 않는다는 의미이고 auto는 좌우 여백의 너비를 똑같이 주어
가로 중앙에 배치된다. (ex.왼쪽 너비가 50px이면 오른쪽 너비도 50px)
margin: 0 auto; 적용할 때 주의할 점으로
1. width 크기가 지정되어 있어야 한다.
2. block 요소에만 적용이 된다.
블럭이 아닌 인라인 요소에 적용했다면 display:block;으로 해결을 하거나, 인라인 요소의 부모인 블럭요소에 margin이 아닌 text-align:center; 값을 주어서 해결 가능하다.
section과 article 차이점
Sementic tag
HTML에서 가장 중요한 건 최대한 Sementic tag 를 이용하는 것이다.
말 그래로 의미 있는 tag를 사용하라는 건데, 예를 들어 non sementic tag인 div를 보면 우리는 이 안에 어떤 내용이 들어갔는지 유추할 수 없지만
header main footer 각 태그를 보면 어떤 내용을 담고 있는지 유추할 수 있다.
그래서 코드를 작성할 때 이런 시멘틱한 태그를 고려하지 않고, 무작정 div만 사용하는 것은 최대한 피해야 한다.
그래서 section과 article의 차이는 무엇인가?
article은 독립적인 콘텐츠이다.
예를 들어 블로그 글을 볼 수 있다. 그래서 블로그에는 여러 개의 글이 있지만 그 글들은 연관성이 있든 없든 상관이 없다. 어제는 경제라는 주제에 대해 쓸 수 있고 오늘은 개발에 대한 글을 포스팅하듯 연관성이 있어야 할 필요는 없지만 블로그 글 자체만으로 독립적이며 그 형태가 계속 재사용이 가능할 때 article을 사용한다.
section은 서로 관계있는 문서를 분리할 때 사용한다.
나는 이 예시를 포트폴리오에서 봤다
포트폴리오에서 크게 home, about, skills에 대한 내용을 각각 담고 있지만 그 전체는 하나의 포트폴리오로 모두 관계가 있는 한 페이지다
이럴 때 각 페이지마다 section으로 나눠줄 수 있다.
Ref
https://www.w3schools.com/html/html_layout.asp
https://medium.com/design-code-repository/cutup-2-margin-498fbcaa7e1a