📌 박스모델 테두리

• border-style이 none 이면 아무리 border-width, border-color가 있어도 무조건 0으로 계산되어서 보이지 않게됨

🍄 border

• 단축속성
• style, color, width
• style은 꼭 작성해야 눈에 보임
• 순서는 상관 없음

🍄 border-radius

• %를 사용하게 되면 가로의% 세로의% 각각 계산이 들어가기 때문에 타원형으로도 만들 수 있음
• 네모, 원, 타원 등 도형 만들 수 있음

  ---

📌 box-sizing

🍄 content-box

• content 영역만 포함
• 전체 길이 구하려면 content+padding+border

🍄 border-box

• width, height가 padding, border를 포함 (margin은 포함X)
• 눈에 보이는 크기를 명시할 수 있어 빠르게 인지가능

* {
box-sizing: border-box;
}

• 맨위에 이렇게 사용하는 경우 많음

• content-box -> border-box 로 바꾸는 경우 width, height 가 의미하는게 완전히 달라짐
• padding, border 포함해서 진짜 요소 전체길이로 인식되어 content부분이 줄어듬

  ---

📌 display

🍄 inline

• width, height로 크기 변경X
• margin, padding 의 top/bottom은 지정X, 좌우만 가능

🍄 none hidden 차이점

display : none;

• 코드 상에는 존재하지만 화면에 그리지 않음
• 위치가 사라짐

visibility : hidden;

• 자리는 차지하고 있지만 눈에만 보이지 않는 형태
  '레이아웃에서 완전히 배제하느냐 아니냐' 의 차이