안녕하세요. ^-^
오늘은 퍼블리싱을 하면서
가장 중요한 반응형을 해볼 거예요.
반응형은 정말 중요하지만 좀 어렵더라고요.
bootstrap을 쓰는 것도 좋긴 하지만
내 맘대로 안 될 때가 많아서
생짜로 코딩하기도 하는데요.
넓이를 체크해서 web과 mobile을
알아서 구분해 주면 참 좋아요.
오늘은 jquery부분만 보면 될 것 같아요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
</section>
<script src="jquery-3.6.2.min.js"></script>
<script type="text/javascript">
$(function ($) {
onresize_header();
});
var check_header = true;
$(window).on('resize', function(){
onresize_header();
});
function onresize_header() {
var width = document.body.clientWidth;
var height = document.body.clientHeight;
if(width <= 991){
check_header = true;
}else{
check_header = false;
}
console.log("check_header",check_header)
}
</script>
</body>
</html>
|
cs |
자바스크립트만 보면 됩니다.
여기서 중요한 부분은 위치예요.
순서가 바뀌면 뭔가 에러가 나거나 console.log가 과하게 찍힐 수 있으니
주의해 주세요. (실제로 해보고 말씀드리는 거랍니다.)
여기서 중요한 부분은
function onresize_header() {
var width = document.body.clientWidth;
var height = document.body.clientHeight;
if(width <= 991){
check_header = true;
}else{
check_header = false;
}
입니다.
var width = document.body.clientWidth;
넓이를 체크해 주고 있어요
var height = document.body.clientHeight;
높이를 체크해 주고 있어요.
하지만 반응형은 넓이는 신경 쓰지만 높이는 신경 쓰지 않아서
잘 쓰지는 않아요.
if(width <= 991){
check_header = true;
}else{
check_header = false;
}
넓이가 991보다 작으며 참 ! 그리하여
모바일 모드입니다.
거짓일 경우는 웹 모드가 되는 것이죠.
$(function ($) {
onresize_header();
});
이 부분에서 처음 실행했을 때의 넓이를
체크해서 모바일인지 웹인지를 알려줍니다.
가장 처음 실행하면 처음이 웹인지 모바일인지를
체크해 줘요.
false가 떴으니 이것은 웹 모드입니다.
사이즈를 줄일 때마다 계속 체크를 해주고 있죠
어느 순간 true가 되었어요.
true가 된 순간 모바일 모드가 된 것입니다.
$(window).on('resize', function(){
onresize_header();
});
위의 코드에서 이 부분이 resize 될 때마다 체크를 해주고 있어요.
반응형을 만들려면 이 부분이 가장 중요합니다.
헤더 부분도 반응형이 되면 모바일 모드 모양으로
바꾸어 줘야 하거든요.
그리고 이 구문을 사용하면 반응형을 좀 더 쉽게
그리고 자연스럽게 만들 수 있어요.
저도 저희 회사 개발자 분을 붙들고 한참을
설명을 들었네요.
모두 이해하지는 못 한 것 같지만
또 물어봐야죠 ㅠㅠ
조금이나마 도움이 되었기를 바라며
오늘도 건강하고 행복한 하루 보내세요.
'코딩 어린이의 노트' 카테고리의 다른 글
| scroll bar 커스텀 하기 (6) | 2023.02.26 |
|---|---|
| css만으로 checkbox, radio버튼 커스텀 하기 (2) | 2023.02.24 |
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |
| 그라데이션 박스에 투명 테두리 넣어주기 (0) | 2023.02.12 |
| 원형 그라데이션 배경색을 만들어 보자 (0) | 2023.02.11 |