html 코딩을 할 때 웹표준과 반응형을 살펴야 하며 고민되는 것이 해상도이다. 웹브라우저에서 웹문서가 표시되는 영역은 별개로 존재하기에 화면에 크기를 표시하면 html 코딩을 하는데 조금은 수월하다. 중요한 것은 실제로 웹서비스를 하면서 관리자 화면에서 실제 모바일 기기 테스트 할 경우 도움이 크다. 웹영역의 크기를 구할 때는 window 객체를 사용한다.
웹브라우저 해상도 크기 표시
너비와 높이 구하기
홈페이지를 만들 때 웹표준을 따르고 반응형으로 만들 때 항상 고민되는 것이 해상도이다.
정확하게는 웹브라우저에 표현되는 문서의 크기일 것이다.
웹브라우저의 크기가 변경되면서 해상도의 크기를 확인할 때 개발자모드를 사용할 수도 있지만 수시로 켰다 끄고 하는 것도 불편하다.
수시로 가시적으로 확인하면서 확인해 보면 편할 것인데, window 객체의 resize 이벤트를 사용하여 웹문서의 크기를 확인할 수 있다.
웹브라우저에 표시되는 문서 크기
html 문서의 크기는 웹브라우저가 실행되고 웹문서가 표시되는 영역이다.
웹브라우저의 메뉴라던가 브라우저 자체의 영역과는 별개의 영역임을 알아두자.
아래 이미지는 html로 만들어진 웹문서의 영역을 나타낸다.
일반적인 해상도의 크기를 구할 수도 있겠지만 웹브라우저의 크기보다는 웹문서 영역의 크기가 html 제작에 중요할 것이다.
window 객체 사용
window 객체는 웹브라우저에 내장된 객체를 말하고 웹브라우저의 기능을 사용할 수 있는 객체이다.
자바스크립트를 사용할 때 보통은 document 객체를 자주 사용하지만 웹브라우저가 가진 고유한 기능을 사용할 때는 window 객체를 사용한다.
window 객체와 document 객체가 자바스크립트 사용시 난해하게 느껴지는 것이 이것 때문이다.
- window 객체
웹브라우저에 내장된 기능을 사용할 수 있다. - document 객체
html로 만들어진 웹문서의 기능을 사용할 수 있다.
웹문서 영역의 크기 가져오기
웹문서 영역의 크기를 가져오기 위해 window 객체를 사용하고 너비는 innerWidth, 높이는 innerHeight 속성을 사용한다.
아래는 window 객체를 사용하여 html이 표시되는 영역의 너비와 높이를 표시하는 코드이다.
/** html 웹문서 너비 */
window.innerWidth
/** html 웹문서 높이 */
window.innerHeight이것을 함수로 만들어 보자. 함수로 만들면 웹문서가 로딩된 후 그리고 웹브라우저의 크기가 변경될 때 바로 적용하여 확인할 수 있다.
jquery는 사용하지 않아도 되지만 코딩의 귀찮이즘으로 그냥 사용했다.
순서하게 document.getElementById 같은 것들을 사용해도 된다.
아래의 코드는 설명은 다음과 같다.
- 웹브라우저에서 웹문서 크기를 표시하고 가시적으로 볼 수 있는 부분을 만든다.
- 자바스크립트를 이용하여 웹문서의 크기를 가져온 후 html 영역에 설정한다.
<!-- 화면에 html 웹문서 크기 표시 -->
<div id="debug">
<span id="screenW"></span>
<span id="screenW">X</span>
<span id="screenH"></span>
</div>
<!-- jqeury cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
/** 웹브라우저의 문서 크기 화면 표시 */
var fnBrowserInnerSize = function() {
$("#screenW").text(window.innerWidth);
$("#screenH").text(window.innerHeight);
}
</script>코드 샘플
부분적인 코드까지 확인했으며 이제 이전에 사용했던 html 템플릿에 적용해 보도록 한다.
html 템플릿은 ul 태그를 사용한 네비게이션까지 추가했고, 모든 태그 요소를 초기화 하였다.
html 네비게이션 메뉴 만들기 ul 태그의 사용
html에서 네비게이션바 또는 메뉴를 만들 때 ul 태그를 사용한다. ul 태그는 목록을 만들어주는 태그로 주로 목차같은 요소로 사용된다. 쓰임새가 정갈하기에 익숙해지면 여러모로 편리한 태그이
lngnat.tistory.com
다음 과정을 진행하기 전에 웹표준과 반응형을 위한 웹문서의 크기를 확인해 볼 필요가 생겼다.
개발자모드가 불편한 것도 있었기에 위의 코드를 만들었고 이번엔 이전까지 만들었던 템플릿코드에 적용해 볼 차례이다.
아래는 웹문서의 크기를 표시하는 부분이 추가된 전체 코드이다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/** 비영어권 문자열 깨짐 방지 */
@charset "utf-8";
/** 모든 여백 제거 */
* {
margin: 0; /* 바깥 여백 */
padding: 0; /* 안쪽 여백 */
}
</style>
<!-- jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 디버깅 표시 -->
<div id="debug">
<span id="screenW"></span>
<span id="screenW">X</span>
<span id="screenH"></span>
</div>
<script>
$(document).ready( function() { /* without resources */ });
$(window).on('load', function() {
/* with resources */
fnBrowserInnerSize();
});
/** 웹브라우저 크기 변경 이벤트 */
window.onresize = function() {
fnBrowserInnerSize();
}
/** 웹브라우저의 문서 크기 화면 표시 */
var fnBrowserInnerSize = function() {
$("#screenW").text(window.innerWidth);
$("#screenH").text(window.innerHeight);
}
</script>
<hr/>
<!-- // -->
<div id="header">웹사이트 이름</div>
<hr/>
<!-- 네비게이션 -->
<div>
<ul id="nav">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
<!-- // -->
<hr/>
<div id="contents">컨텐츠</div>
<hr/>
<div id="footer">저작권 소유자</div>
</body>
</html>결과화면을 보자.
빨간색 박스 영역은 웹문서가 표시되는 영역이다.
노란색 화살표가 가리키는 부분이 빨간색 영역의 너비와 높이를 나타내는 부분이다.
window.resize 객체를 이용하여 웹브라우저의 크기가 변할 때마다 화면에 표시되는 웹문서 영역의 너비와 높이도 달라지게 보일 것이다.
이제 다른 부분들의 html 영역을 조금은 편하게 코딩할 수 있을 것 같다.
'programming > TroubleShootInG' 카테고리의 다른 글
| html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 (0) | 2022.11.22 |
|---|---|
| html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 (0) | 2022.11.21 |
| html 네비게이션 메뉴 만들기 ul 태그의 사용 (0) | 2022.11.20 |
| html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화 (0) | 2022.11.19 |
| 노트패드++ 자동 줄바꿈 기능 문자열이 화면 넘어가지 않으니 좋다 (0) | 2022.11.19 |
댓글