Post
'학습자료' 카테고리의 다른 글
| 가상드라이버 다운로드 (0) | 2018.06.12 |
|---|---|
| 폰트 라이센스 (0) | 2018.05.10 |
| 브라우저별 쿠키 확인법 (크롬, 파이어폭스, IE11) (0) | 2018.04.10 |
| css 입문 (0) | 2018.03.23 |
| jQuery 입문용 (0) | 2018.03.23 |
Post
유튜브영상 검은바 없이 높이 100% 하는방법
html
<div class="video-container">
<iframe width="100%" src="http://www.youtube.com/embed/HkMNHkMNOlYcpHg" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.video-container {position:relative; padding-bottom:56.25%; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
'html,css' 카테고리의 다른 글
| placeholder 속성 변경하기 (0) | 2019.04.09 |
|---|---|
| table태그에서 말줄임 사용하기 (0) | 2018.03.23 |
| 반응형 폰트설정 (0) | 2018.03.21 |
| ie8 이하에서 투명 배경 적용 (0) | 2018.03.21 |
Post
Javascript 나 jQuery 에서 지금도 높이, 너비 구할 때 아직도 헷갈릴 때가 있다.
그래서 다음과 같이 정리해 본다.
JavaScript에서 요소의 크기 구하기
1 2 3 | var element = document.getElementById('content'); var h = element.clientHeight; var w = element.clientWidth; | cs |
높이
- clientHeight : padding을 포함한 높이
- scrollHeight : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이
- offsetHeight : border, padding, 스크롤 바를 포함한 높이
너비
- clientWidth : padding을 포함한 폭
- scrollWidth : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 폭
- offsetWidth : border, padding, 스크롤 바를 포함한 폭
윈도우 사이즈
window.innerWidth : 스크롤 바를 포함하지 않는 창 너비
window.innerHeight : 스크롤 바를 포함하지 않은 창 높이
window.outerWidth : 스크롤 바를 포함, 창의 너비
window.outerHeight : 스크롤 바를 포함한 창의 높이
jQuery에서 요소의 크기 구하기
높이
- .height() : 요소 높이만
- .innerHeight() : 요소의 padding을 포함한 높이
- .outerHeight() : 요소의 border, padding 포함한 높이
- .outerHeight(true) : 요소의 margin, border, padding 포함한 높이
너비
- .width() : 요소의 폭만
- .innerWidth() : 요소의 padding을 포함한 폭
- .outerWidth() : 요소의 border, padding을 포함한 폭
- .outerWidth(true) : 요소의 margin, border, padding을 포함한 폭
만약 요소의 display:none; 일 때 높이 사이즈 취득 여부
| 구할 수 없는 것 | 구할 수 있는 것 |
| offsetHeight | height |
| clientHeight | innerHeight |
| outerHeight |
'javascript, jQuery' 카테고리의 다른 글
| 다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과 (0) | 2019.04.09 |
|---|---|
| INPUT TYPE FILE 파일명 추출 (0) | 2019.04.09 |
| video태그 제어 (0) | 2018.12.05 |
| 타이머 스크립트 (0) | 2018.08.21 |
| select 제어 (0) | 2018.08.05 |