[개발공부] HTML/CSS 독학하기 (5)

Basic layout

Basic Layout 이라 함은 box 가 stack on another 인 상테를 말한다. 그저 박스가 쌓여있는 layout을 말하는데 지금까지 우리가 배운 것들을 활용하면 basic layout 의 webpage 를 만들 수 있다. 강의25에서도 실습을 한다. 크게 새로운 내용은 없고 몇가지만 추가해서 적겠다.

 

Auto

만약 main 박스를 중간에 고정 시키고 싶을 때 어떻게 해야할까? 텍스트에 하던 것처럼 text-align: center; 같은게 있을까? 그렇지 않다. 박스를 위해선 margin 을 사용해야 한다. 결론부터 말하자면 다음 코드가 박스를 중간에 고정시켜줄 것이다.

 

main {
    margin: 0 auto;
}

 

위의 코드가 의미하는 바는 left, right margin 을 auto 로 세팅한 것이다. auto는 가능한 최대한의 마진을 준다. 그래서 margin-left: auto 는 최대한 오른쪽으로 붙는 것이고 margin-right: auto 는 최대한 왼쪽으로 붙는 것이다. 그리고 그 두 개가 같이 있을 때는 webpage 의 한가운데에 있을 때이니 이와 같은 방법으로 box 를 중앙에 고정시킬 수 있다.

 

Bonus: 웹페이지의 테두리가 채워지지 않는 이유?!

정확히 언제 블로그에 기록했는지 기억나지는 않는데, 언젠가 한 번 왜 parent width 의 100%로 width 가 설정된다고 했는데 테두리에 조금의 여백이 있나 질문을 한 적이 있다. 그리고 오늘 그 해답을 들었는데 이야기는 시간을 거슬러 CSS 가 존재하지 않던 시절로 올라간다.

 

CSS 없이 HTML 로만 작성된 페이지를 본 적이 있는가? 그 페이지를 보면 텍스트들이 edge 에서 조금씩 떨어진 것을 볼 수 있을 것이다. 만약 그게 없으면 텍스트가 왼쪽 edge 에 붙어 있을 것이고 미관상 좋지 않을 뿐더러 가독성도 떨어진다. 그래서 그 때 어느정도의 margin 을 기본적으로 설정을 해놓았고 그 전통이 지금까지 내려오고 있는 것이다.

 

요즘 같이 HTML 스타일을 꾸미기 좋은 시대에서는 크게 의미가 없는 전통이기에 많은 사람들이 그 마진을 없애고 페이지를 만든다. 없애는 방법은 body 의 margin 을 모두 0으로 세팅하는 것이다. 한 번 직접 시도해보길 권하며 이만 물러가겠다!

---

이전 이야기:

[개발공부] HTML/CSS 독학하기 (4)

다음 이야기: