CSS 기초정리

1. BoxModel

• html에 있는 모든 요소들은 박스로 이루어짐
• content(width, height), padding, border, margin으로 이루어짐
• padding, margin 설정 시 팁 top, right, bottom, left 시계방향

padding: 10px 20px 30px 40px; (top, right, bottom, left)

margin : 20px 40px; // bottom, left값이 없으면 top이랑 right에 있는값이 자동으로 들어감

2. BoxSizing

• box-sizing의 default값은 content-box으로 들어가 있음
  => padding 이나 border 값을 추가적으로 넣는다면 box의 크기가 padding, margin에 따라서 커진다. 왜냐하면 기본값이 content-box로 설정되어 있기때문에
  예를들어, width: 400px height 500px로 설정을 하고 padding-left: 20px, padding-top: 30px을 준다면 box의 크기는 width: 420, height는 530dmfh 늘어남. content-box로 설정되어 있기때문에 content는 400, 500으로 고정되어 있고 거기에 padding 값이 들어가기 떄문에...

  해결방법은 box-sizing 값을 border-box으로 설정해주면 된다. border-box는 말 그대로 border를 기준대로 하기때문에...

  /* css 모든요소들에게 box-size 설정법 */
  * { 
     box-sizing: border-box;
  }

3. Display

• 모든 html에 요소에는 Display가 설정되어 있음.

(1) display: block

• 따로 width를 선언하지 않은경우 부모의 요소의 값을 물려받음(100%)

• 따로 width를 선언한 경우는 남은공간을 margin으로 자동으로 채움(욕심이 많은아이)
  => 실제 개발자도구에서는 표시가 되어지지 않으니 주의

• margin: 0 auto;(top, buttom: 0 , left,right: auto) (좌우로 가운데로 정렬)

• width, height, margin, padding 등 뭐든 값을 설정할 수 있음.

• 따로 부모의 height를 선언하지않을 경우 모든 자식요소의 height의 합이랑 부모의 height의 값은 같다.

(2) display: inline

• block이랑 반대개념
• 타이핑하는것과 비슷하다고 생각하면됨. 글을쓰다가 한줄에 글자의 많아지면 알아서 내려간다.
• width, height, padding-top,bottom, margin-top,bottom, border-top,bottom이 적용되지 않은것처럼 보임.

(3) display: inline-block

• inline, block의 장점을 가짐.
• width, height, margin, padding을 설정 할 수 있음.
• inline처럼 가로 배치가 가능함.