[css/javascript] Width/Height - 크기에대해 폭/넖이의 정의
#넓이,가로크기,세로크기,높이
javascript 에서의 크기
1. 모니터 크기
| 설정값 | 내용 |
|---|---|
| screen.width | 모니터의 폭 : 가로폭을 나타냄 |
| screen.availWidth | 모니터의 폭 만약 OS의 taskbar 등이 존재하면 이를 뺀 모니터 폭을 나타냄 |
2. 브라우저(Browser) 크기
| 설정값 | 내용 |
|---|---|
| clientWidth | document.documentElement.clientWidth 브라우저 컨텐츠 영역 (스크롤바가 있을경우 스크롤바를 제외한 영역) |
| innerWidth | window.innerWidth 브라우저의 viewport영역. 브라우저 테두리, 툴바, 메뉴바등을 제외한 브라우저 안쪽(스크롤바는 포함) ※ 픽셀로 표시되며, 브라우저를 확대/축소하면 크기도 변경된다. 브라우저 축소시 표시할 픽셀이 늘어나므로 값이 커진다. |
| outerWidth | window.outerWidth 브라우저 전체크기 (브라우저 메뉴바,툴바 외 테두리효과등을 포함한 크기) ※ 브라우저 축소/확대에 영향을 받지 않는 절대값 |
| body.clientWidth | document.body.clientWidth 브라우저내 컨텐츠(body)의 크기를 나타냄 (내용이 커져 스크롤 생성시 브라우저 크기보다 커진다.) |
3. 엘리먼트 (element)의 크기
| 설정값 | 내용 |
|---|---|
| styleSheet.css.width | 실제 적용된 스타일 값 style="width:200px" |
| clientWidth | contents + padding padding edge 스크롤바를 제외한 padding 까지의 크기 |
| scrollWidth | contents + padding padding edge 스크롤된 보이지 않는 부분까지의 컨텐츠영역 |
| offsetWidth | contents + padding + border border edge 스크롤바와 테두리를 포함한 요소크기 |
| getBoundingClientRect().width | 기본은 offsetWidth 와 동일하다. 단, 랜더링된 후 크기가 산출되므로 확대/축소등 변형이 생길경우, 크기가 변한다. |
랜더링 이후
크기설정에 따른 변화(설정하기)
폭을 지정할 수 없는 경우
display:inline 을 지정한 경우에는 폭과 높이를 지정할 수 없다.
※ 디폴트가 inline인 a, span 태그들에 폭을 설정하고 싶으면 display:block or inline-block로 변경해야 한다.
내용물 또는 자식요소의 크기에 의해 결정되어 진다.
폭을 지정하는 방법
width:auto
요소의 폭이 자동으로 정해진다. (부모요소에 따라 지정됨)
display:block의 경우, default가 width:auto 로 폭길이가 가로로 꽉차게 된다.
width: 100px; 픽셀지정
지정한 값의 크기가 된다. (부모요소와 관계없이 고정값이 된다.)
부모요소보다 크게 지정하지 말것
width: 50%; 퍼센트지정
부모요소에 대한 %값으로 결정된다.
패딩 지정시의 차이점
<div gray>
<div yellow> </div>
</div>
1. 각각의 div 는 block 이고, yellow div의 padding이 50px일 경우
2. yellow div width:100%로 설정하면, yellow의 padding를 제외한 contents area가 부모 div의 contents area와 동일하게 설정된다.
즉, yellow의 padding의 폭이 존재하면, 부모의 contents 영역을 삐져나와 표시된다.
width: 100% 는
부모의 contents area = 나의 contents area 이다.
즉, border 나 padding, margin 의 크기가 설정되어 있을경우, 위 오른쪽 그림과 같이 부모의 contents 영역 밖으로 튀어나와 보인다.
width: auto 는
부모의 contents area = 나의 margin area 이다.
즉, 부모의 contents area 에 나의 margin 영역까지 포함해 꽉차게 들어간다.
display 간 차이점
display:inline-block 지정시, 초기치는 내용물에 따라 정의되므로, 꽉차게 할려면 width:100%;를 지정해 줘야 한다.
display:inline은 폭지정을 할 수 없으므로 폭을 지정할 경우, display:block; 나 display:inline-block;로 설정해야 한다.
반응형웹 또는 브라우저 사이즈 조정시 문제점 해결
width를 % 로 지정시, 화면크기에 따라 너무 작아지거나 커질경우에는 min-width 와 max-width를 적절히 사용하면 된다.