묻고답하기
해상도 관련 질문드립니다.
2011.08.10 01:39
안녕하세요.
다름이 아니라 홈페이지 디자인중입니다.
해상도 관련해서 걱정되는 부분이 있어서 질문을 드리게 되었습니다.
먼저 레이아웃웃은 이곳 XE 사이트 같은 곳입니다.
|
|
|
|---|
위와 같은 구성인데.
2560*1440 해상도 쓰시는분들 뿐 아니라 저해상도 사용하시는분들 모두 고려해서 홈페이지를 만들고자합니다.
그렇기 때문에 현재 가로 2560px로 디자인하였구요..
저해상도 사용자들은 좌,우 이미지는 모두 보이지 않아도 되나 가운데 홈페이지 내용이 잘보이도록 했음합니다.
여기서 질문드리고 싶은부분이 저같이 2560*1440 해상도를 사용하는 사람은 문제가 없겠으나.. 저해상도 1920*1080 혹은 그 이하 4:3비율 모니터에선 어떤형식으로 코딩을해야 할 지 궁금합니다. 간단히 테스트 해보았는데 좌측의 이미지가 화면을 가득채우고 있습니다.
참고사이트로 http://a3.happyoz.com/Main.asp 이 곳에 접속해보시면 해상도 1024*768로 보아도 가운데 홈페이지 내용이 화면에 우선적으로 뿌려지고 좌,우측 이미지는 짤리는 형식 그리고 고해상도 일시 좌우 이미지가 풀로 보이는 방식이온데.. 어떻게 코딩한건지 궁금합니다.
해보겠다고 검색해보니 %로 지정하면된다고 해서 테이블을 가로 세로 %로 지정해봤지만 이미지만 깨지고.. 원하는 대로는 잘안되는거 같습니다..
고수님들에겐 쉬운 문제일지 모르지만 제겐 정보를 찾기가 너무 어려운거 같아서 이렇게 질문드립니다..
부디 조언 부탁드리겠습니다 (꾸벅)
방법은 여러가지가 있습니다....
어떻게 설계하는냐의 차이만 있을뿐.....
아래내용을 카피해서 붙여넣고
웹브라우저에서 보세요
그리고 브라우저의 오른쪽 끝을 잡고 좌우로 움직이면서
브라우저의 좌우폭 크기를 늘였다 줄였다 해보세요......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
* {margin:0px; padding:0px;}
.wrapper {width:1024px; height:500px; background:gray; margin:auto;}
.left {width:400px; height:500px; margin-left:-400px; background:pink; text-align:right;}
.center {background:yellow; margin-top:-500px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
왼쪽박스
</div><!-- left -->
<div class="center">
내용입력<br />test
</div><!-- center -->
</div><!-- wrapper -->
</body>
</html>