[HTML/ CSS] 브라우저 비율 확대/ 축소해도 전체 비율이 고정되도록 하는 방법
관련링크
본문
안녕하세요.
http://30min.net 이라는 멘토링 사이트를 만들고 있는 기획자 입니다. (코딩 공부를 해서 직접 만들다 보니까 모르는 부분이 많은 초보임을 양해 부탁 드립니다.)
다름이 아니라 사이트를 만들고 모바일기기 반응형까지 적용해서 어느 정도 구색을 갖추었는데요,
문제는 IE나 크롬 배율 100%를 기준으로 사이트를 만들어서 사이트 배율이 110, 120, 130%로 올라가거나 90%, 80%, 70%로 줄어들면 원래 디자인이 유지되지 않고 위치가 내려오거나 글씨가 깨지거나 하는 등 문제가 있습니다 ㅠ_ㅠ
네이버나 다음, 그리고 이 사이트는 화면 비율을 조정하면 글씨, 박스, 이미지 등 모든 부분이 동일하게 늘어나고 줄어들어서 깨짐이 없는데 어떻게 해야하는지 조언 부탁 드립니다.
첫 페이지의 상단 부분의 일부 소스코드는 아래와 같습니다. (스타일 부분은 css 파일에서 해당 내용입니다)
<!DOCTYPE html>
<html>
<head>
<title> 자소서 작성, 면접 보기전 텔레멘토링 30분 </title>
<meta http-equiv="description" content="자소서, 면접, 취업, 텔레멘토링, 30분">
<meta http-equiv="keywords" content="자소서 작성, 면접 보기전에 현직자와 30분 동안의 텔레멘토링을 통해 관심있는 회사에 대한 궁금증을 해결할 수 있습니다. 취업, 이제 제대로 알고 준비하세요.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="naver-site-verification" content="4732110b58c9f21e9f006f16c55699d0221b42bc"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<!-- <link rel="shortcut icon" href="./images/favicon.ico"> -->
<!-- <link rel="apple-touch-icon" href="./images/logo.png"> -->
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
<style>
#lending-box{height:600px;background-color:#E0E0E0;padding:70px 250px 0px 250px;text-align:center}
#title-1{font-size:45px; font-weight:bold; color:#424242;}
#beta {font-size:26px; font-weight:none;}
#title-2{font-size:26px; font-weight:none; color:#616161; margin-top:-20px;}
#guide-box{margin:7% 12% 10px 12%}
.pictobox {text-align:center;float:left;width:33%}
.pictogram {width:25%}
.pictogram2 {width:30%}
.pictotitle {font-size:24px; color:#424242; font-weight:bold;border-bottom:2px solid #9E9E9E; margin:5px 18% 3px 18%;}
.pictosub {font-size:18px; color:#616161}
#begin-1{
border-radius:5px;
background-color:#FF6F00;
color:#FFF;
height:64px;
line-height:60px;
font-size:22px;
font-weight:bold;
text-align:center;
margin: 23% 39% 0px 39%;}
</style>
<body id="viewport">
<div id="lending-box">
<h1 id="title-1"> 텔레멘토링 30분 <span id="beta">(BETA) </span></h1>
<div id="title-2"> 전, 현직자의 코칭으로 올바른 취업준비 </div>
<div id="guide-box">
<div class="pictobox">
<img class="pictogram" src="./images/building.png" />
<div class="pictotitle"> 문화/ 직무/ 커리어 </div>
<div class="pictosub"> 진짜 가고싶은 회사일까? </div>
</div>
<div class="pictobox">
<img class="pictogram" src="./images/resume.png" />
<div class="pictotitle"> 자기소개서 작성 </div>
<div class="pictosub"> 어떤 면을 강조해야 할까? </div>
</div>
<div class="pictobox">
<img class="pictogram2" src="./images/interview.png" />
<div class="pictotitle"> 인성/ 실무면접 준비 </div>
<div class="pictosub"> 면접 의도와 핵심 스킬은? </div>
</div>
</div>
<div class="clear:both"></div>
<div id="begin-1" onclick="location.href='./example-questions.php'"> 무엇을 물어볼 수 있나요?</div>
</div>
답변 1
네이버는 CSS로 반응형을 만들지 않았습니다.
이전부터 스크립트에 의존해서 만들었습니다.
어떤 스크립트 한개 링크 깨보세요.
네이버 와장창 깨집니다.
그러니 네이버를 참고하지 마세요.
반응형 스타일 이라는 것은 비율로 맞추는 것이 아닙니다.
가로 사이즈를 기준으로 미디어쿼리를 사용해서 만듭니다.
기본적으로 모바일, 태블릿, PC 를 기준으로 제작을 합니다.
문제는 CSS 만으로는 사실 어느정도 한계가 있습니다. 이를 좀더 쉽고 간단히 제작 하기 위해서는 스크립트 라이브러리를 사용 하는 편이 수월 합니다.
굳이 CSS로 맞추시겠다면 시멘틱 레이아웃부터 배우셔야 합니다.
