HTML & CSS 기초 - 웹레이아웃 기초 <div>

웹 레이아웃에 기초는 박스를 만드는 것부터 출발한다.
박스는 <div> 태그로 만든다.

박스 디자인(div)에 많이 사용하는 CSS 속성

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

margin은 바깥 여백 padding은 안쪽 여백 border은 테두리 border-radius는 테두리를 둥글게를 뜻한다.

margin 속성은 원하는 방향만 줄 수 있다.

top, left, bottom, right 중 원하는 곳에만 여백을 줄 수 있다.

display : block이 내장되어있는 div박스

display: block 속성은 가로행을 전부 차지하는 모습을 보여준다.
모든 div, h1, p, li 태그는 위와 같은 속성을 기본적으로 설정한다.
하여 이것이 싫다면 "display"속성을 다른 것을 부여해주면 된다.
ex) display:inline inline-block flex 등이 있다.

일부 스타일은 inherit(상속) 된다.

주로 글자와 관련된 스타일 속성들
font-size(크기) color(색깔) font-family(폰트) text-align(가운데 정렬) 와 같은 것들이 부모 태그에서 속성이 부여됐다면 자식 태그들도 그에 맞게 스타일이 부여된다.