CSS 너비와 높이속성(Width, Height Property)

CSS 속성중에 요소의 너비와 높이에 관여하는 속성들에 대하여 알아봅니다.

width, height

요소의 너비와 높이를 지정한다.

p {
  width:100px;
  height:100px;
}

속성값

• auto : 브라우저가 너비와 높이를 계산한다. 기본값이다.
• length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.width="50px"
object.style.height="50px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

max-height, max-width, min-height, min-width

요소의 최대 혹은 최소 너비/높이를 지정한다.

p {
  max-width:600px;    
  min-width:100px;
  max-height:300px;
  min-height:100px;
}

속성값

• none : 기본값으로 최대 혹은 최소 너비/높이를 지정하지 않는다.
• length(길이) : 최대 혹은 최소 너비/높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• %(퍼센트) : 최대 혹은 최소 너비/높이를 퍼센트 값으로 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.maxWidth="100px"
object.style.minWidth="50px"
object.style.maxHeight="100px"
object.style.minHeight="50px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

IE6 이하 버전은 max-width, min-width, max-height, min-height 속성을 지원하지 않기 때문에 핵을 사용한다.

div {
  width: 200px;
  min-height: 250px;
  _height: 250px;
}