smarti,스마트아이

CSS 크기, 크기 단위

CSS 크기 (Dimension)

CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있다.
CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같다.

속성	설명
height	해당 HTML 요소의 높이를 설정함.
width	해당 HTML 요소의 너비를 설정함.
max-width	해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
min-width	해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
max-height	해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
min-height	해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.

height와 width 속성

height와 width 속성은 HTML 요소의 높이와 너비를 각각 설정한다.
이 속성의 기본 설정값은 auto이며, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해 준다.

div { height: 200px; width: 500px; }

max-width 속성

max-width 속성은 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정한다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미이다.

width 속성으로 너비를 설정하면, 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 된다.
하지만 max-width 속성으로 너비를 설정하면 다음과 같이 좀 더 유연한 결과를 얻을 수 있다.
max-width 속성으로 너비를 설정하면 줄어드는 웹 브라우저의 크기에 맞춰 해당 HTML 요소의 너비도 자동으로 줄어든다.

div.maxWidth { max-width: 500px; }

min-width 속성

min-width 속성은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정한다. 이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미이다.

min-width 속성이 설정된 요소에 width 속성값을 따로 설정하지 않으면 초기 너비(width)는 100%를 가지게 된다. 이때 웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어든다. 하지만 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 된다.

div.minWidth { min-width: 500px; }

max-height 속성

max-height 속성은 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정한다. 이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 크기에 따라 높이가 자동으로 설정된다.

max-height 속성으로 최대 높이를 설정하면, 해당 HTML 요소의 높이를 설정된 높이 이하로 제한한다. 만약 해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성하게 된다.

p { max-height: 50px; overflow: auto; }

min-height 속성

min-height 속성은 지정된 HTML 요소가 가질 수 있는 최소 높이(height)를 설정한다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 높이에 제한을 두지 않겠다는 의미이다.

min-height 속성을 설정하면 해당 HTML 요소의 높이를 설정된 높이 이하로 제한한다.
즉 height 속성값이 min-height 속성값 이하로 낮아지지 않도록 한다. 이러한 min-height 속성값은 max-height 속성값과 height 속성값보다 먼저 적용된다.

p { min-height: 100px; }

 

크기 단위 (units)

CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다.

그 중에서도 가장 많이 쓰이는 크기 단위는 다음과 같다.

 - 백분율 단위 (%)

 - 배수 단윈 (em)

 - 픽셀 단위 (px)

백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다.
배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.

#large { font-size: 200%; }
#small { font-size: 0.7em; }
#fixed { font-size: 20px; }

* 1배 = 1em = 100%를 의미합니다.

 

 

[코딩공부] - CSS overlay with slide out box 예제 다운로드

CSS overlay with slide out box 예제 다운로드

[세상살이] - 윌리암 아돌프 부게로 (William Adolph Bouguereau)

윌리암 아돌프 부게로 (William Adolph Bouguereau)

[세상살이] - 유튜브 자막 다운로드 하는 방법

유튜브 자막 다운로드 하는 방법

[세상살이] - 언택트 뜻

언택트 뜻

[디자인공부] - 포토샵으로 유리같은 문자 만들기

포토샵으로 유리같은 문자 만들기