모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록
브라우저 환경과 다양한 명세서
ko.javascript.info
자바스크립트는 요소의 너비나 높이 같은 기하 정보 관련 프로퍼티를 지원한다.
→ 이런 프로퍼티는 요소를 움직이거나 특정 좌표에 위치시킬 때 사용할 수 있다.
샘플 요소
- margin은 요소 자체에 포함되지 않고, 관련한 특수 자바스크립트 프로퍼티도 없어서 CSS 프로퍼티에 추가하지 않음
<div id="example">
...텍스트...
</div>
<style>
#example {
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
}
</style>
스크롤바
요소에 스크롤바가 생기면 복잡한 상황이 생길 수 있다.
- 몇몇 브라우저에서 콘텐츠 영역 너비(contents width) 일부를 빌려 스크롤 바를 위치시키기 때문
샘플 예시에서 스크롤바가 없었다면 콘텐츠 영역 넓이는 300px
- 하지만 스크롤바가 16px을 차지하기 때문에 콘텐츠 영역 너비는 284px
- 스크롤바 너비는 브라우저나 디바이스마다 다르다.
→ 스크롤바를 차지하는 공간을 항상 염두에 두어라.
padding-bottom 영역으로 텍스트가 넘칠 수 있다.
요소 내 텍스트가 길어 넘치게 될 경우엔 브라우저가 이 텍스트들을 padding-bottom에 표시한다.
- 그림에선 패딩에 아무것도 보이지 않지만 넘쳐서 표시될 수 있음.
기하 프로퍼티
기하 프로퍼티 값은 숫자인데, 단위는 ‘픽셀’이다.
offsetParent, offsetLeft, offsetTop
offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타내는데, 요소의 너비와 높이에 패딩, 스크롤바, 테두리를 합친 크기이며 margin은 포함하지 않는다.
offsetParent
해당 요소를 렌더링할 때, 좌표 계산에 사용되는 가장 가까운 조상 요소의 참조를 반환한다.
CSS position 프로퍼티가 설정되어있는 조상 요소가 없는 경우엔 가장 가까운 조상 <td>나 <th>, <table>, <body>가 반환된다.
따라서, 반환되는 가장 가까운 조상 요소는 다음과 같다.
- CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소
- <td>나 <th>, 혹은 <table>
- <body>
offsetLeft, offsetTop
offsetParent를 기준으로 각각 요소가 오른쪽, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.
- 180px이 아닌 180 숫자를 반환한다.
<main style="position: relative" id="main">
<article>
<div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
</article>
</main>
<script>
alert(example.offsetParent.id); // main
alert(example.offsetLeft); // 180 (주의: 문자열 '180px'이 아닌 숫자 180이 반환됩니다.)
alert(example.offsetTop); // 180
</script>
다음과 같은 경우엔 offsetParent가 null이 될 수 있다.
- 화면에 보이지 않는 요소(CSS display 프로퍼티가 none이거나 문서 내에 있지 않은 요소)
- <body>와 <html>
- position 프로퍼티가 fixed인 요소
offsetWidth, offsetHeight
offsetWidth: 요소 가장 바깥 부분이 차지하는 너비
offsetHeight: 요소 가장 바깥 부분이 차지하는 높이
→ 테두리를 포함한 요소 ‘전체'의 사이즈 정보를 제공
화면에 표시되지 않는 요소의 기하 프로퍼티 값은 0 또는 null이다.
기하 프로퍼티는 보이는 요소를 대상으로만 계산된다.
- 요소의 CSS display 프로퍼티가 none이거나 문서 내에 해당 요소가 없으면 모든 기하 프러퍼티 값은 0 이 된다. (offsetParnet = null)
- 이를 활용해 요소의 숨김 상태 여부를 확인할 수 있다.
function isHidden(elem) {
return !elem.offsetWidth && !elem.offsetHeight;
}
- isHidden은 요소가 화면에 있긴 하지만 사이즈가 0일 때 (비어있는 <div> 등) 도 true를 반환하기 때문에 주의해야 한다.
clientTop, clientLeft
테두리 두께를 측정할 수 있다.
테두리(border)는 요소 내에 있다.
- 사실 clientTop과 clientLeft 프로퍼티는 테두리 높이, 너비와 정확히 일치하지 않다.
- 정확히는 테두리 바깥을 기준으로 한 테두리 안 상대 좌표를 나타낸다.
clientTop과 clientLeft의 차이는 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 글이 전개되는 언어일 때 드러난다. 아랍어가 세팅된 브라우저에선 스크롤바가 오른쪽이 아닌 왼쪽에 나타나게 되는데, 그럼 clientLeft에 스크롤바의 너비가 포함된다.
clientLeft가 25가 아닌 스크롤바 너비를 포함한 41(25 + 16)이 된다.
clientWidth, clientHeight
테두리 안 영역의 사이즈 정보를 제공한다.
테두리 안: 콘텐츠 너비와 패딩이 포함되지만, 스크롤바 너비는 포함되지 않는다.
→ 테두리 안 = 콘텐츠 너비 + 패딩
scrollWidth, scrollHeight
clientWidth, clientHeigth와 유사한데, 스크롤바에 의해 감춰진 영역도 포함한다.
요소 크기를 콘텐츠가 차지하는 만큼 늘리고자 할 때 사용할 수 있다.
// 콘텐츠가 차지하는 높이만큼 요소 높이를 늘림
element.style.height = `${element.scrollHeight}px`;
scrollLeft, scrollTop
scrollLeft: 가로 스크롤이 오른쪽으로 움직임에 따라 가려진 영역의 너비를 나타낸다.
scrollTop: 세로 스크롤이 아래로 움직임에 따라 가려진 영역의 높이를 나타낸다.
scrollLeft 와 scrollTop 은 수정이 가능하다.
기하 프로퍼티 대부분은 읽기전용이지만 scrollLeft와 scrollTop은 변경이 가능하다.
스크립트로 프로퍼티를 수정하면 자동으로 요소 내 스크롤이 움직인다.
→ 스크롤바를 최상단 ~ 최하단으로 옮길 수 있다.
CSS를 사용해 너비와 높이를 얻지 마세요
스타일과 클래스 챕터에서 getComputedStyle를 사용해 CSS가 적용된 요소의 높이와 너비를 구할 수 있다는 것을 알았는데..
왜 getComputedStyle를 사용해 요소 너비와 높이를 얻지 말라고 하는걸까?
- CSS width와 height는 다른 CSS 프로퍼티의 영향을 받는다.
- ex) 요소의 너비와 높이 계산 방법을 지정하는 box-sizing
- box-sizing을 변경하면 getComputedStyle로 구한 값이 부정확 할 수 있다.
- CSS width와 height는 auto일 수 있다.
- ex) 인라인 요소
<span id="elem">안녕하세요!</span>
<script>
alert( getComputedStyle(elem).width ); // auto
</script>
3. 스크롤바 때문에 정상적으로 동작하지 않을 수 있다.
- 스크롤바가 콘텐츠 영역을 차지하는 몇몇 브라우저에서 발생한다.
- 콘텐츠가 실제 차지하는 영역이 CSS로 설정한 너비보다 좁은데, clientWidth와 clientHeight는 이를 고려해 클라이언트 요소가 차지하는 공간을 계산한다.
- 하지만 getComputedStyle(elem).width를 사용한다면?
- ex) Chrome 같은 브라우저는 스크롤바 너비를 제외한 진짜 내부 너비를 반환
- ex) Firefox 같은 브라우저는 스크롤바를 무시하고 CSS로 설정한 너비를 반환
→ 이런 브라우저 간 차이 때문에 getComputedStyle이 아닌 기하 프로퍼티를 사용해야 한다.→ 이런 프로퍼티는 요소를 움직이거나 특정 좌표에 위치시킬 때 사용할 수 있다.
'FE' 카테고리의 다른 글
| 1.10 브라우저 창 사이즈와 스크롤 (1) | 2024.11.19 |
|---|---|
| 1.8 스타일과 클래스 (0) | 2024.11.16 |
| 1.7 문서 수정하기 (4) | 2024.11.15 |
| 1.6 속성과 프로퍼티 (0) | 2024.11.14 |
| 1.5 주요 노드 프로퍼티 (2) (1) | 2024.11.13 |
