css로 레이아웃 잡아주세요 > 그누4 질문답변

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

css로 레이아웃 잡아주세요 정보

css로 레이아웃 잡아주세요

본문

첨부 이미지의 내용을 처리하는 레이아웃을 잡아주세요.
조건은 ie 6,7,8 그리고 파이어폭스, 크롬에서 이상없이 작동해야합니다.

댓글 전체

조금 이해 불가합니다.
두 개의 페이지인지 아니면 한 개의 페이지인지에 따라 레이아웃이 전혀 달라지는데
한 페이지로 하자면 가로폭이 너무 커서 전혀 호환이 이루어질 것 같지 않고(설마 가로폭 1920 사이즈에 맞추시는 것은 아니지요?)
두 페이지라면 기본 레이아웃인데 설마 root님이 이걸 못하시리라 추측되지 않으니 참 애매하네요.
아 급하게 올리느라 설명이 부족하군요.
하나의 와이드 화면에서 하나로 처리해야하는 것입니다.

와이드 화면이 아닐때는 외쪽만 보이고 오른쪽은 팝업으로 올려야 하는것입니다.
이문제는 와이드일때의 화면이 처리되면 처리할 생각입니다.
데이터에 따라 상하 스크롤이라고 하셨는데요..

영역 사이즈가 정해져있어 overflow:auto; 처리를 원하시는 건지??
그렇다면 세로 사이즈가 정해져야 합니다만
왼쪽은 보통 하나의 화면에서 스크롤없이 처리될듯한데 가운데 부분이 조금 화면을 넘어갈수도 있을듯합니다.

우측의 경우 왼쪽과 상관없이 상하 스크롤 처리 해야합니다.
우측의 아래쪽 4개는
좌우에 padding또는 margin을 5px 준다고하면
wrap의 너비는 800*2+10*2 = 1620px가 됩니다.
가운데 정렬은 margin: 0 auto;, IE 5.5까지 지원을 원한다면
body { text-ailgn: center; } #warp { width: 1620px; text-ailgn: left; }
이렇게 하시면 됩니다.
그럼 좌우 요소는 각각 800px의 너비를 가지게 됩니다.
나머지 하위 엘리먼트는 넣는데 별 어려움은 없구요.
내용에 따라 스크롤 생기는건 overflow: auto; 하시면 됩니다.
이때 너비와 높이가 지정되있어야하구요.
참 쉽죠?
root님 안녕하세요. 오랜만이네요 ^^
잘 지내시죠? 항상 건강하시구요 ~


ps. 제가 휴가중입니다.
이 게시글이 월요일까지 처리가 안된다면 제가 홀랑 10만점 먹을라니 서두르세요 ~ ㅎㅎ
안녕하세요.
잘지네시죠.
오늘 디자이너가 이것 때문에 고생하는것 보고나왔는데...
왜 낮에 여기에 질문을 올리는것을 못했는지 ...
이제사 생각나서 올린것입니다.

월요일 오전까지 정리되지 않으면 제가 고생을 좀 할듯합니다.ㅎㅎ
대충 감은 잡았는데 질문에 보충이 많아야 할 것입니다.
왜? ie6~8, 크롬, 파폭 호환성을 고려해야 한다고 하셨는데 css 와 div 개념을 좀 이해를 하고 나면 현재의 레이아웃은 큰 의미가 없습니다.
익스6이 제일 쥐약이고 다음이 익스7인데 익스8은 크롬에 맞추면 대부분 비슷하게 보이고 파폭은 일부 스타일은 특정 지정해 주어야 하는 단점이 있는 것으로 파악했습니다.
익스6이야 두말하면 잔소리이니 빼고
단순히 현재의 레이아웃만 잡아서는 큰 의미가 없습니다.
float 로 부유시켜야 하는데 각 데이터가 어떤 것(가령 텍스트냐? 이미지냐?)이냐에 따라 padding, margin, border 값 조정을 해놓아야 하고 웹지즈님 말씀처럼 overflow 역시 변수가 많습니다.
또한 좌측과 우측의 간격도 고려하셔야 하고 카피라이트 고정 역시 우측을 고려한 가장 하단인지 아니면 좌측만 생각한 하단인지도 생각해야 합니다.
틀을 짜는 것은 그리 어렵지 않지만 모든 변수를 고려하자면 꽤나 어려운 숙제인 것 같습니다.
> float 로 부유시켜야 하는데 각 데이터가 어떤 것(가령 텍스트냐? 이미지냐?)
프로그램에서 처리되는 결과이므로 모두 텍스트 입니다

> 카피라이트 고정 역시 우측을 고려한 가장 하단인지 아니면 좌측만 생각한 하단인지도 생각해야 합니다.
카피라이트의 경우 좌측만 생각한 하단입니다.
우측과 완전히 별도로 놀아야 합니다
지금부터는 코멘트 응대가 조금 어려울듯 합니다.

위의 내용들을 고려하셔서 html 소스를 코멘트로 올려주시면 제가 테스트후 답변을 채택하도록 하겠습니다.
대략 구조는 이런 식이 됩니다.
테스트는 안해봤고 감으로만 작성한거라서 수정이 필요할겁니다.
(들어쓰기는 댓글에선 탭 공백이 안되는군요...)
오타 수정했습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#warp { width: 1620px; height: 1400px; margin: 0 auto; }
#section1 { width: 800px; float: left; }
#section2 { width: 800px; float: right; }
.titlebox, .copybox { height: 100px; }
.databox { height: 500px; }
.scrollbox1 { overflow: auto; height: 1180px; margin: 0 10px; }
.scrollbox2 { overflow: auto; height: 270px; margin-top: 10px; }
/*]]>*/
</style>
</head>
<body>
<div id="warp">
<div id="section1">
<div class="titlebox"></div>
<div class="scrollbox1"></div>
<div class="copybox"></div>
</div>
<div id="section2">
<div class="databox"></div>
<div class="scrollbox2"></div>
<div class="scrollbox2"></div>
<div class="scrollbox2"></div>
</div>
</div>
</body>
</html>
.scrollbox1 { overflow: auto; height: 1180px; margin: 0 10px; }
마진값 순서가 바꿔놓으신 듯 위의 그림대로 하자면 상하 여백만 있어야 하니
.scrollbox1 { overflow: auto; height: 1180px; margin: 10px 0; } 이게 맞는 것 아닐까요?
이게 가장 깔끔한 기본구조인 것 같습니다.
http://test.webiz.kr/css_100827.html

- 왼쪽 중간 스크롤 영역높이 = 브라우저 높이 - 타이틀100px - 카피라이트100px
- 오른쪽 스크롤 각1개 높이 = (브라우저 높이 - 데이터500px) / 3;

브라우저 리사이즈시 재계산하도록 스크립트 들어있습니다.
소스가 좋습니다. 참고로 익스6에서 가로 스크롤바가 생기는데 요놈을 없애려면
요부분에
.ofw { width: 100%; height: 100%; overflow: auto; overflow-x:hidden; }
overflow-x:hidden; 요놈을 넣어주면 됩니다.
아항.. 스크롤영역에서 가로생각을 못했네요.. ^___________^;; (포인트에 눈이 멀어서;;;)

사용하시는 분께서 적절하게 수정하시겠죠~
<HTML>
<HEAD>
<title>test</title>
<style type="text/css">
<!--
body {
font-size:13px;
margin:0px;
}


#wrap {
width:100%;
width:auto;
height:980px;
}

/* left */
#left {
width:800px;
height:980px;
float:left;
margin-right:20px;
}
#title {
height:100px;
background-color:#cccccc;
}
#content1 {
height:740px;
margin-top:20px;
overflow:auto;
background-color:#cccccc;
}
#copyrights {
height:100px;
margin-top:20px;
background-color:#cccccc;
}

/* right */
#right {
width:800px;
height:980px;
float:left;
}
#content2 {
height:500px;
overflow:auto;
background-color:#cccccc;
}
#content3 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
#content4 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
#content5 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
-->
</style>
</head>
<body>
<div id="wrap">
  <div id="left">
    <div id="title">title</div>
    <div id="content1">content1</div>
    <div id="copyrights">copyrights</div>
  </div>
  <div id="right">
    <div id="content2">content2</div>
    <div id="content3">content3</div>
    <div id="content4">content4</div>
    <div id="content5">content5</div>
  </div>
</div>
</body>
</html>


두분이나 벌써~~ㅠㅠ

 현재 홈페이지리뉴얼을 하면서 이렇게 적용을 하고있는데 가로가 1620px이하면 아래위로 정렬되고
1620이상이면 좌우정렬되어서 화면을 늘 거의 꽉채울서 있어서 좋더군요!
와이드모니터에 좋게~~부라우저 크기조정을 해서 한번보세요~

이왕제작했으니 한번올려봤어요~~~ 수고하세요! 굳나잇~~~

http://file.iksu.wo.tc:8888/portfolio/lay.php  <=제컴이라 좀있다 꺼요~~~^^;;
세분의 소스를 적용해보니 제가 말씀드리지 못한 상황이 나오는군요.
이부분 다시한번 체크 부탁드립니다.
왼쪽상단과 하단의 고정 부분은 브라우저의 전체 리사이징과 스크롤에서 위치가 고정(화면에 계속 보여야함)되어야 합니다.

추가로 한가지더 말씀드리면 브라우저의 전체보기로 화면을 보다가
브라우저를 작게 줄여서 우측의 전체 브라우저 상하 스크롤이 발생하도록 한후 스크롤을 이용해서 아래로 이동할경우
왼쪽 카피라이트가 자기 위치를 잡고 있어야 합니다.
스크롤 이동시 카피라이트가 위로 따라 올라가면 안됩니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT type=text/javascript>
//<![CDATA[
$(document).ready(function(){
resizeHeight();
});
$(window).resize(function() {
resizeHeight();
});

function resizeHeight() {
var height = document.documentElement.clientHeight;

$("#content1").css({"height":(height-240)+"px"});
}
//]]>
</SCRIPT>
<style type="text/css">
<!--
body {
font-size:13px;
margin:0px;
height:100%;
}


#wrap {
height:100%;
}

/* left */
#left {
position:fixed;
top:0px;
left:0px;
width:800px;
height:100%;
}
#title {
width:800px;
height:100px;
background-color:#cccccc;
}
#content1 {
overflow:auto;
margin-top:20px;
background-color:#cccccc;
}
#copyrights {
width:800px;
height:100px;
margin-top:20px;
background-color:#cccccc;
}

/* right */
#right {
position:absolute;
top:0px;
left:820px;   
width:800px;
}
#content2 {
height:500px;
overflow:auto;
background-color:#cccccc;
}
#content3 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
#content4 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
#content5 {
height:150px;
margin-top:10px;
overflow:auto;
background-color:#cccccc;
}
-->
</style>
</head>
<body>
<div id="wrap">
  <div id="left">
    <div id="title">title</div>
    <div id="content1">content</div>
    <div id="copyrights">copyrights</div>
  </div>
  <div id="right">
    <div id="content2">content2</div>
    <div id="content3">content3</div>
    <div id="content4">content4</div>
    <div id="content5">content5</div>
  </div>
</div>
</body>
</html>

jquery는 웹비즈님꺼 사용해서 우선 만들어 봤습니다. ie6때문에 조금 수정하였는데 하지만 fixed요게 안먹어서 생각을 좀 해봐야될듯합니다. jquery나 스크립트로 해결은 가능하겠죠....^^;;
http://file.iksu.wo.tc:8888/lay.php <=역시 언제 접속안될지 모름 -..-;;

*ps : 테스트한다고 이래저래 지정하다 잡태그가 들어가 있는지 몰겠네요! 귀차니즘..ㅠㅠ
fixed 땜에 네이버검색하니 링크가 여기로 오네요!ㅎㅎ 관리자님 팁 fixed핵임다~ http://www.sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=193

*채택은 웹비즈님에게로~~~
ㅎㅎ 얼렁.. 익스6이 사라져야할텐데... 익스7도 함께...
그래야 그냥 표준대로 작업하면 될텐데 이렇게 머리아프게하는군요 ㅎㅎ
ㅠㅠ
그래도 다들 열심이시네요 ㅋ
왼쪽 스크롤 박스가 내용에 해당되는 부분같은데...
브라우저 크기가 줄여지면 카피라이트가 내용 출력되는 부분을 가리겠다는 거네요.
구지 이래야 할 필요가 있나요?
스크립트에 최소높이를 지정하도록 해서
몇몇 문제를 수정했습니다.

가로폭이 작을때 세로보기시.. 카피라이트 가리는 문제는
높이를 지정해서 수정했는데..

결국 스크립트 떡칠이 되어 버렸군요.. 쩝;;
ie6 fixed 핵적용 및 일부수정했습니다. 하단 가로스크롤바는 좌측레이어만 적용할것인지 전체에
적용할것인지에 따라 약간수정이 필요합니다. 정확하게 원하시는 형태를 몰라서,,,^^;;
이시간까지 모하는지...ㅠㅠ 플그램짤때만 힘이 불끈날줄알았더니 요것도 나름 머리쓰는게 잼나네요!
드라마를 보는데 잠깐잠깐식 생각나서 그때마다 시간 조금씩 투자해서 수정해봤습니다.
더이상 여기에는 못올리겠어요! 점점길어지니 도배같아서,,,,ㅡㅜ
낼은 일요일이구 푹~~~자겠구나~~~모두 잘자세요?주무세요^^
전체 66,558 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT