HTML5 HTML DIV tag: 테두리 너비 지정하는 방법 - WIDTH : 픽셀(px) 또는 퍼센트(%)

HTML DIV tag: 테두리 너비 지정하는 방법 - WIDTH : 픽셀(px) 또는 퍼센트(%)

DIV영역의 가로너비는 퍼센트(%) 비율로 줄 수도 있고, 픽셀(px)단위로 고정시킬 수도 있다.

블로그나 홈페이지의 방문자들은 다양한 크기의 모니터를 사용하고 있고, 브라우저의 폭도 다양하게 설정하여 사용하므로, 픽셀 보다는 브라우저폭에 따라 조절되는 퍼센트를 사용하는 것이 유연성을 높일 수 있을 것이다.

브라우저의 너비를 넓혔다 줄였다 하면서, 살펴보면 각각의 설정에 따라 결과가 어떻게 다른지 쉽게 이해할 수 있을 것이다.

주) 이 블로그의 템플릿이 고정너비로 되어 있어 작동이 되지 않아, 이 페이지의 HTML 파일을 구글 드라이브에 올려 놓았습니다. 아래 그림과 같이, 링크 페이지에서 파일을 다운 받아 열고, 브라우저의 폭을 조절해 보면 어떻게 작동되는지 볼 수 있습니다.  DIV 가로 너비 예제

[DIV 영역 너비 설정의 종류]

width: 111px;   <= 너비가 111픽셀로 고정
width: 100%;    <= 너비가 브라우저 너비에 따라 조절됨
max-width: 500px; <= 너비가 최대 500픽셀 이내에서 브라우저 너비에 따라 조절됨
min-width: 100px;  <= 너비가 최소 100픽셀 이상에서 브라우저 너비에 따라 조절됨

[영역의 가로 너비를 650픽셀로 고정시킴]

<div style="border: 1px solid #48BAE4; height: auto; width: 650px;">
픽셀(px)로 너비를 고정하여, 브라우저 폭이 좁아지거나 넓어져도 그에 맞추어 영역이 조절되지 않고 고정되어 있다.
 </div>

[가로너비를 브라우저의 가로폭에 따라 조절되도록 하되 최대너비를 650px로 고정시킴]

<div style="border: 1px solid #48BAE4; height: auto; max-width: 650px;">
브라우저 너비에 따라 영역의 너비가 조절되지만, 최대 650픽셀까지만 확대된다. 
</div>

[영역의 가로 너비를 최소 300픽셀로 줌]

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

<div style="border: 1px solid #48BAE4; height:auto; min-width: 300px;">
브라우저 너비에 따라 영역의 너비가 조절되지만, 최소 300픽셀 까지만 축소된다. 브라우저 너비를 좁혀서 바로 아래의 300픽셀로 고정된 경우와 비교해 보기 바람.
</div>

이 영역은 너비가 300픽셀로 고정된 것임

[영역의 가로 너비를 100퍼센트로 줌]

<div style="border: 1px solid #48BAE4; height: auto; width: 100%;">
브라우저 폭에 따라 영역의 너비가 조절된다. 너비를 지정하지 않으면 기본적으로 100%가 적용되므로, 너비를 100%로 주면 너비를 주지 않은 것과 같은 결과가 된다. 바로 아래의 예와 비교해 보기 바람. 다만, 브라우저에 따라 처리하는 방식이 다른데서 오는 실제적인 차이가 있다.
</div>

이 영역은 너비(width)를 적지 않음

[영역의 가로 너비를 50%로 줌]

<div style="border: 1px solid #48BAE4; height:auto; width:50%;">
브라우저 너비에 따라 영역의 너비가 조절된다.
</div>

[출처] http://ojji.wayful.com/2013/12/HTML-DIV-to-Set-Width-Max-width-Min-width-by-Percent-or-Pixels.html