Ch_13 Box Model

Oigu·2024년 1월 2일

html css

GYM CODING 웹 개발 입문

목록 보기

12/19

참고한 GYM CODING 유튜브
참고한 GYM CODING 노션

구성

boxmodel구성

Inline Level Element에는 width, height이 적용되지 않음

Display-value 참고

inline-block 설정 전

span {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

display before

inline-block 설정 후

span {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

display after

⭐ inline-block

block과 inline의 중간 형태

요소는 inline인데 내부는 block처럼 표시

margin

margin 중첩 현상

거리가 40px이어야 하는데 중첩 현상 때문에 20px만 떨어져 있는 것을 확인할 수 있음

중첩보완

<div class="shape" style="margin-bottom: 40px"></div>
<div class="shape"></div>

인라인으로 지정하게 되면 우선순위가 인라인 먼저이기 때문에 40px로 지정됨

border

.border {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-top: 10px dotted red;
  border-bottom: 5px dashed blue;
  border-left: 1px solid yellow;
  border-right: 3px solid cyan;
}

border1

border-radius: 20%;와 border-radius: 50%; 차이
20 or 50

💡 content-box vs border-box

.content-box {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  padding: 20px;
  margin: 10px;
  box-sizing: content-box;
}
.border-box {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
}