[CSS] 박스 모델(box model)과 그리드(grid)

1. 박스 모델

     박스 모델(box model)

     - HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

    

 

box model

    - 내용(content) 

       텍스트, 이미지

 

    - 패딩(padding) 

       내용과 테두리 사이의 간격

 

    - 테두리(border) 

       내용과 패딩을 감싸는 테두리

 

    - 마진(margin)

        테두리와 이웃하는 요소 사이의 간격

 

    예)

h1 {
  font-size:45px;
  text-align: center;
  border-bottom:1px solid gray;
  margin:0;
  padding:20px;
}

 

    - block level element

      화면 전체 이용

      ※ display:inline;을 쓰면 inline element처럼 됨.

    - inline element   

      태그만큼 이용

 

 

 

---

 

 

 

2. CSS 그리드(grid)  

     - 웹사이트의 레이아웃

 

 

예)

body{
  margin:0;
}
a {
  color:black;
  text-decoration: none;
}
h1 {
  font-size:45px;
  text-align: center;
  border-bottom:1px solid gray;
  margin:0;
  padding:20px;
}
ol{
  border-right:1px solid gray;
  width:100px;
  margin:0;
  padding:20px;
}
#grid{
  display: grid;
  grid-template-columns: 150px 1fr;
}
#grid ol{
  padding-left:33px;
}
#grid #article{
  padding-left:25px;
}