[CSS] width, height

 

 

▶ width
  - 요소의 가로 너비를 지정.
  - CSS 속성에는 기본값(별도로 설정하지 않아도 미리 지정되어 있는 값)이 존재함.

  - width의 기본값은 auto.

 

- 속성 값
  - auto: 브라우저가 너비를 계산.
  - 단위: px, em, rem, %, vw, cm 등 단위로 지정.

 

 

 

▶ height
- 요소의 세로 너비를 지정.
- 기본값은 auto.

- 속성 값 
  - auto: 브라우저가 너비를 계산. 
  - 단위: px, em, rem, %, vw, cm 등 단위로 지정.

 

 

 

※ 참고 사항
  - <div>에 width: auto; height: auto; 지정 시에는 화면상에 아무것도 나타나지 않음.

  - block 요소의 경우 width: auto; height: auto;로 설정 시 브라우저는 width: 100%; height: 0;으로 인식하기 때문.
    - height 값을 별도로 지정 시 해당 영역이 화면에 출력됨.

  - inline 요소의 경우 width: auto; height: auto;로 설정 시 브라우저는 width: 0; height: 0;으로 인식.
    - inline 요소는 width나 height의 값을 별도로 지정해도 영역이 출력되지 않음.
    - inline 요소는 가로 세로 사이즈 값을 가질 수 없기 때문에 적용이 되지 않는 것.
    - inline 요소 내에 텍스트 입력 시 영역이 나타남.

 

∴ 결과적으로 block 요소와 inline 요소는 브라우저에서 해석되는 방식이 다르다는 것.