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픽셀로 줌]
<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>


>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



《조로공동선언 : 2000년 7월 19일 평양》
반제자주 다극세계 창설 - 공정하고 합리적인 국제질서 수립



>> 조선 땅을 점령함 : 점령자(침략자) 미제국 맥아더 포고령

>> 한국인 마루타 : 주한미군 세균전 실체

>> 강제 백신(예방) 접종 : 강제 인구감축 대량학살 무기

>> 끊임없이 전쟁을 부추기는 피아트 머니 - 사기.착취.략탈.강탈 도구

>> 현금금지(캐시리스) 전자화폐(CBDC 씨비디씨) 특별인출권(에스디알)

>> 미국 달러 몰락, IMF SDR 특별인출권 국제기축통화 부상과 금

>> 딮 스테이트 : 그레이트리셋, 유엔 아젠다 2030, 2021, SDG 17, 아이디 2020, 4차산업혁명, 세계경제포럼, 세계화, 신세계질서, 세계단일정부, 세계재편



민족자주 승리에 대한 굳건한 믿음으로, 한미동맹파기! 미군철거!!

주권主權을 제 손에 틀어쥐고, 주인主人으로서 당당하고 재미나게 사는 땅을 만들어, 우리 후세대에게 물려줍시다.