CSS - width, height

기본속성

- 속성을 HTML에서는 Attributes, CSS와 Js에서는 Properties라고 함

- 요소마다 이미 들어있는 기본적인 속성의 값(기본값)을 가지고 있고 별도로 명시하지 않아도 됨

<div class='box'></div>

<div class='parent'>
  <div class='child'></div>
</div>

width, height

- 요소의 가로/세로 너비

- 기본값: auto (브라우저가 자동으로 너비를 계산)

- 단위: px, em, vw 등

.box {
  width: 100px:
  height: 100px;
  background-color: orange;
}

span

- 대표적인 inline 요소

- 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도

- 기본값: auto (포함한 콘텐츠 크기만큼 자동으로 줄어듬)

- 가로, 세로 사이즈를 명시할 수 없음, ex) width: 100px; height: 100px; 이처럼 값을 명시해도 화면에 구현안됨

- 인라인요소는 기본적으로 레이아웃 작업용도가 아닌 글자를 제어하기 위한 요소이기 때문

<span>Hello</span>
<span>World</span>

div

- 대표적인 block 요소

- 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도(span과 동일)

- 기본값: auto (가로는 부모 요소의 크기만큼 자동으로 늘어남, 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어듬)

<div>Hello</div>
<div>World</div>

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
}
.child {
  /* 부모요소의 너비에 맞춰 늘어남, 즉 width: auto;과 동일(기본값) */
  height: 100px;
  background-color: orange;
  border: 2px solid red;
}

max-width, max-height

- 요소가 커질 수 있는 최대 가로/세로 너비

- 기본값: none (최대 너비 제한 없음)

- max값을 정하면 정해진 값보다 더 커질 수 없음(제한을 해제하고 싶으면 none)

- 단위: px, em, vw 등

.parent {
/*   width: 300px; */
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
}
.child {
  max-width: 100px; /* 100px보다 더 커질수 없음*/
  height: 100px;
  background-color: orange;
  border: 2px solid red;
}

min-width, min-height

- 요소가 작아질 수 있는 최소 가로/세로 너비

- 기본값: 0 (최소 너비 제한 없음)

- min값을 정하면 정해진 값보다 더 작아질 수 없음(단, 0 보다 더 작아질 수는 없음)

- 단위: px, em, vw 등

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
}
.child {
  min-width: 400px; /* 400px보다 더 작아질 수 없음 */
  height: 100px;
  background-color: orange;
  border: 2px solid red;
}

---

width, heigh 란?

width, height, sapn, div의 기본속성은?

max-width, max-height의 기본속성은?

min-width, min-height의 기본속성은?

 

패스트캠퍼스 프론트엔드 초격차 패키지 강의 내용을 참고하였습니다.