CSS Height and Width

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

 

css 높이와 넓이 설정하기

 

높이와 넓이 속성은 요소의 높이와 넒이를 설정하기 위해 사용되어진다.

높이 넓이 속성은 패딩과 경계선 마진을 포함하진 않는다.

이것은 요소의 패딩 마진 경계선 내부의 영역의 높이와 넓이를 설정한다.

 

CSS height/width Values

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

css 높이 넓이 값

높이 그리고 넓이의 속성은 다음 값을 가질수 있다.

 

 

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

 

최대 넓이 설정하기

 

max-width 속성은 요소의 최대 넒이를 설정하기 위해 사용되어진다.

최대 넓이는 %, cm, px과 같은 길이의 값으로 명시되어 질수 있으며, none으로 설정할수 있다. (none이 기본값 최대 넒이를 설정하지 않은 것을 의미)

위의 div 문제는 브라우저의 창이 요소의 넓이보다 작을때, 발생한다.

브라우저는 수직적인 스크롤바를 더할것이다.

이러한 상황에서 max-width 를 사용하는 것은 브라우저의 작은 창의 조절 능력을 향상시킨다.