웹 레이아웃의 기초: div를 이용한 네모네모 박스 디자인

네모 박스 디자인에 많이 사용되는 CSS 속성

.box {
  margin : 20px; 
  padding : 30px;
  border : 1px solid black;
  border-radius : 5px;
}

margin은 바깥 여백, padding은 안쪽 여백, border는 테두리, border-radius는 테두리 둥글게 처리.
가운데 정렬도 많이 하는데 이전에 이미지를 가운데로 정렬한 것처럼 display: block, margin: auto를 주면 된다.

Q. 이렇게 많은 스타일을 언제 다 외우나요?
외워봤자 맨날 까먹기 때문에 필요하면 구글에 찾아서 쓰면 된다.

margin과 padding을 원하는 방향에 줄 수 있다.

.box {
  margin-top : 20px;
  padding-left : 30px; 
}

top, left, right, bottom 중에 원하는 곳만 여백을 줄 수 있다. 참고로 음수로도 적용이 가능하다.
(참고) margin: 4px 3px 2px 10px; 이렇게 띄어쓰기를 적용하면 상, 우, 하, 좌 순서로 한번에 적용할 수도 있다.

display: block이 내장되어 있는 div

.box {
  display : block;
}

div, h1, p 등은 display: block를 기본적으로 가지고 있기에 따로 주지 않아도 된다. 그래서 p 태그나 div 태그 같은 경우에는 그냥 사용하면 한 행을 전부 차지한다. 만약, 이 것이 싫다면 display 속성을 다른 것으로 변경하자.

일부 스타일은 inherit 된다.

font-size, font-family, text-align 같은 속성들은 부모 태그에 적용해도 자식 태그에 자동으로 상속된다. 영어로 inherit 된다고 한다.
안에 글자들이나 태그가 많을 경우에 font-size를 일일히 작성하지 않아도 부모 태그에 한번에 작성하고 끝낼 수 있어 간편하다. 전부 inherit이 되는 건 아니고, 글자와 연관된 스타일이 대게 적용된다.