css-7: 박스모델 1

박스모델 1

요소의 크기

inlin이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다.

단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고

뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh,

이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다.

텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면

세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다.

calc(100% - 50px)과 같은 형식으로 연산자를 사용하여

필요에 맞는 길이로 조절할 수도 있습니다.

* 기본html

<div>
  div요소
</div>

* css (뷰포트)

div {
  background-color: blueviolet;
  color: white;
  width: 50vw;
  height: 50vh;
}

* 뷰포트는 윈도우창 전체 기준 (1/100기준)

---

---

* css(%)

div {
  background-color: blueviolet;
  color: white;
  height: 30%;
  width: 100%;
}

* %는 부모의 길이에 상대적인 값(부모의 padding은 그대로 유지)

---

---

* css(vmax/vmin)

div {
  background-color: blueviolet;
  color: white;
  width: 20vmax;
    }

* 가로와 세로중에 더 긴게 vmax, 작은게 vmin임. 사용자가 보는 창, 화면에 따라 달라짐.

컴퓨터의 경우 가로가 더 기니까, 가로가vmax인데, 창을 줄여서 세로가 더 길게되면 가로의 크기는 20/100보다

줄어들지 않음

---

---

* css(calc)

div {
  background-color: blueviolet;
  color: white;
  width: 50vw;
  height: calc(100vh - 48px);
}

---

Tip

* 박스안에 텍스트를 정 중간에 오게하려면, line-height와 height를 값게 하면 됨

* 창의 크기에 따라 폰트사이즈를 변화시키려면 font-size: 10vmin 등으로 하면 됨

---

---

자식요소가 margin을 가지고 있어도 부모의 영역을 넘어서까지 영향을 줄수 있음

부모의 패딩은 자식의 마진을 상쇄할 수 있음

블록요소는 위,아래 블록이 상쇄짐(겹쳐짐)

margin과 padding은 -top, -bottom, -left, -right을 속성명에 붙여 따로 지정해줄 수 있다.
특정방향에만 따로 마진 또는 패딩을 줄 수있다. /* margin-top: /
/ margin-bottom: /
/ margin-left: /
/ margin-right: /
/ padding-top /
/ padding-bottom /
/ padding-left /
/ padding-right */

출처: 얄코사이트 (https://www.yalco.kr/@html-css/2-6/)