Jeden Tag, aufrichtig und lustig.

margin-auto .center { margin: 20px auto; } margin 속성에 auto값을 부여하면 중앙정렬을 할 수 있다. 위와 같은 코드를 적용하면center 클래스는 위 아래 20px 마진을 갖게 되고 가로로 중앙 정렬 하게 된다.

layout 기본 레이아웃 사이트 제목 사이드바 본문 푸터 3단 레이아웃 html 사이트 제목 사이드바 본문 사이드바 푸터 css * { margin:0; padding:0; box-sizing: border-box; } #container{ width: 1200px; margin: 20px auto; } #header{ width: 100%; height: 120px; background-color: #acacac; } #left-sidebar{ width: 250px; height: 600px; background-color: #e9e9e9; float: left; } #contents{ width: 800px; height: 600px; background-color: #f7f7f7; float: ..

box model 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스모델 보는 방법 박스모델을 보고 싶은 부분에 오른쪽 마우스 버튼-검사 통해서 확인 가능하다. 또한, 우측 탭 중 computed탭을 통해 상세히 확인이 가능하다. margin 요소 주변의 여백을 의미한다. margin속성을 사용하여 웹 문서 가운데 정렬하는 법 **width값이 지정되어 있어야 함! margin-left, margin-right값을 auto로 지정 ex.margin : 20px auto /*위아래 마진은 20px, 좌우 마진은 자동계산 된다.*/ ex.margin : 0 auto padding 테두리와 내용사이의 여백을 의미한다. 컨텐츠와 테두리 사이 여백을 주고 싶다면, h1 { padding : 20px ; }