유동적인 레이아웃....
일단 위에꺼처럼 4단 영역을 기준으로 잡아봤는데 문제가 있네요...
실시간으로 각 영역들이 추가 삭제 되어야 하는 방식인데..
문제는...
각 영역의 넓이가 고정이 아니라 이 동영상처럼 다르다고 가정하면
전체넓이와 맞지 않는 경우가 ㅠ.ㅠ
각 영역을 클릭해서 넓이를 조정하는 방식도 있긴 하지만 좀 구질구질한것 같아서... ;
이런방식이 아니더라도 뭔가 좋은 방법이나 참고할만한 사이트 없을까요?
댓글 11개
11년 전
http://sir.co.kr/bbs/board.php?bo_table=cm_free&wr_id=990849#c_990869
11년 전
어떤 방식인진 몰라도
sec8 의 del 을 누른 순간, 다음 sec 인 곳에 sec8 의 width 를 넘겨 주면 되지 않을까요?
그러나 기초적인면으로 봤을 땐 sec9 의 width 를 늘리지 않은 상태로 sec8 값을 9로 대입하는 건 맞지 않는 것 같네요
sec8 의 del 을 누른 순간, 다음 sec 인 곳에 sec8 의 width 를 넘겨 주면 되지 않을까요?
그러나 기초적인면으로 봤을 땐 sec9 의 width 를 늘리지 않은 상태로 sec8 값을 9로 대입하는 건 맞지 않는 것 같네요
미운오리스키
11년 전
문제는 sec9 가 어디 붙어있는지 모른다는거네요 ㅠ.ㅠ
sec8이 사라진다고 꼭 윗쪽으로 붙는다는 가정도 없구요..
일단 동일한 넓이로만 되어있으면 문제는 없을듯 한데..
만들어 놓고 보니 시도 자체가 잘못된것 같기도 하고 ;;
사용자가 레이아웃을 유동적으로 구성한다고 했을때 뭔가 좋은방법이 없을까요?
sec8이 사라진다고 꼭 윗쪽으로 붙는다는 가정도 없구요..
일단 동일한 넓이로만 되어있으면 문제는 없을듯 한데..
만들어 놓고 보니 시도 자체가 잘못된것 같기도 하고 ;;
사용자가 레이아웃을 유동적으로 구성한다고 했을때 뭔가 좋은방법이 없을까요?
11년 전
유동적인건 css 쪽으로 접근하는 게 가장 좋을 것 같은데
현재 하던 방식대로 하자면 sec9 가 next() 로 잡히지 않던가요?
아니면 length 로 접근해서 del 클릭 다음 것을 인식해도 나쁘지 않을 것 같은데...
현재 하던 방식대로 하자면 sec9 가 next() 로 잡히지 않던가요?
아니면 length 로 접근해서 del 클릭 다음 것을 인식해도 나쁘지 않을 것 같은데...
미운오리스키
11년 전
sec8 을 삭제하면 그 다음에 있는 영역의 넓이를 sec8 넓이로 대체한다는 말씀이시죠?
움.. 약간의 문제만 해결하면 가능할수도 있을것 같기는 한데...
문제가 어떤 영역이 행의 마지막에 있는지를 알아내야 해서...
1. sec8 가 행의 마지막열에 있는 경우 => 다음행의 첫번째 영역넓이를 sec8 넓이로 대체
2. sec8 가 중간에 있는 경우 => 다음행의 첫번째 영역 넓이를 sec8 넓이로 대체
요렇게 하면 될것 같은데.. 각 영역이 어느 행에 있는지 알아내는게 문제네요 ㅠ.ㅠ
움.. 약간의 문제만 해결하면 가능할수도 있을것 같기는 한데...
문제가 어떤 영역이 행의 마지막에 있는지를 알아내야 해서...
1. sec8 가 행의 마지막열에 있는 경우 => 다음행의 첫번째 영역넓이를 sec8 넓이로 대체
2. sec8 가 중간에 있는 경우 => 다음행의 첫번째 영역 넓이를 sec8 넓이로 대체
요렇게 하면 될것 같은데.. 각 영역이 어느 행에 있는지 알아내는게 문제네요 ㅠ.ㅠ
11년 전
하다보면 답이 나올 것 같네요.
일단 생성, 크기 변경 될 때마다 배열로 만들고 [] = 100, 200, 100
del 로 삭제시 배열이 자동으로 한칸씩 땡겨지면 맨 마지막이 비여지는데 그건 생성 시킬 때 배열을 다시 만드니 상관없네요
두 번째인 sec2 삭제 한다고 가정시 sec3 의 사이즈가 sec2 가 되는 것이죠.
예상)
<style>
.secs div{border:1px solid #ccc;}
</style>
<div class="secs">
<div class="sec1">sec1</div>
<div class="sec2">sec2</div>
<div class="sec3">sec3</div>
</div>
<script>
arr_width = [100,200,300];
$(function(){
div=$('.secs div');
$('.secs div').click(function(){
$(this).hide();
_resize();
});
function _resize() {
$('.secs div:visible').each(function(i){
$(this).css('width', arr_width[i] + 'px');
});
}
_resize();
});
</script>
일단 생성, 크기 변경 될 때마다 배열로 만들고 [] = 100, 200, 100
del 로 삭제시 배열이 자동으로 한칸씩 땡겨지면 맨 마지막이 비여지는데 그건 생성 시킬 때 배열을 다시 만드니 상관없네요
두 번째인 sec2 삭제 한다고 가정시 sec3 의 사이즈가 sec2 가 되는 것이죠.
예상)
<style>
.secs div{border:1px solid #ccc;}
</style>
<div class="secs">
<div class="sec1">sec1</div>
<div class="sec2">sec2</div>
<div class="sec3">sec3</div>
</div>
<script>
arr_width = [100,200,300];
$(function(){
div=$('.secs div');
$('.secs div').click(function(){
$(this).hide();
_resize();
});
function _resize() {
$('.secs div:visible').each(function(i){
$(this).css('width', arr_width[i] + 'px');
});
}
_resize();
});
</script>
미운오리스키
11년 전
[http://sir.co.kr/data/cheditor4/1401/e91587f254256d063ce4904cba760180_bQTqhLw3o.GIF]
문제가 되는 부분이 위 이미지에서 빨간영역이 삭제된다고 했을때 (바로 다음요소가 아닐수도 있다는거죠)
다음행의 첫번째 요소인 sec9 가 딸려올라오게 되는데 그걸 구하는게 문제일듯 해요
각각의 요소들마다 넓이값을 계산해서 구해야 하나 ㅠ.ㅠ
바쁘실텐데 조언해 주셔서 감사합니다 (_ _)
문제가 되는 부분이 위 이미지에서 빨간영역이 삭제된다고 했을때 (바로 다음요소가 아닐수도 있다는거죠)
다음행의 첫번째 요소인 sec9 가 딸려올라오게 되는데 그걸 구하는게 문제일듯 해요
각각의 요소들마다 넓이값을 계산해서 구해야 하나 ㅠ.ㅠ
바쁘실텐데 조언해 주셔서 감사합니다 (_ _)
11년 전
잘은 모르겠지만 그리드를 사용하면 어떨지요..
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_g_system
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_g_system
미운오리스키
11년 전
안그래도 요즘 반응형이 필요한 곳이 많아서 전진님 강좌를 정주행 해볼까 하는데 css는 영 쥐약이라 ㅠ.ㅠ
비슷한 방식이 있는지는 모르겠지만 한번 참조해 보겠습니다 ^^
비슷한 방식이 있는지는 모르겠지만 한번 참조해 보겠습니다 ^^
게시판 목록
자유게시판
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 |
 thisgun |
1주 전 | 10 | |
| 199538 | 2개월 전 | 252 | ||
| 199537 | 2개월 전 | 289 | ||
| 199536 |
 똥싼너구리 |
2개월 전 | 274 | |
| 199535 | 2개월 전 | 279 | ||
| 199534 |
 아이스웨덴™ |
2개월 전 | 206 | |
| 199533 |
 QueenJey |
2개월 전 | 286 | |
| 199532 | 2개월 전 | 203 | ||
| 199531 | 2개월 전 | 377 | ||
| 199530 | 2개월 전 | 352 | ||
| 199529 |
 nanati |
2개월 전 | 260 | |
| 199528 | 2개월 전 | 170 | ||
| 199527 | 2개월 전 | 310 | ||
| 199526 | 2개월 전 | 211 | ||
| 199525 |
 Gothrock |
2개월 전 | 393 | |
| 199524 | 2개월 전 | 418 | ||
| 199523 | 2개월 전 | 247 | ||
| 199522 | 2개월 전 | 416 | ||
| 199521 | 2개월 전 | 203 | ||
| 199520 | 2개월 전 | 374 | ||
| 199519 |
nanati |
2개월 전 | 330 | |
| 199518 |
비버팩토리
|
2개월 전 | 259 | |
| 199517 | 2개월 전 | 231 | ||
| 199516 | 2개월 전 | 355 | ||
| 199515 | 2개월 전 | 429 | ||
| 199514 | 2개월 전 | 238 | ||
| 199513 | 3개월 전 | 298 | ||
| 199512 |
 수평선1203 |
3개월 전 | 308 | |
| 199511 | 3개월 전 | 346 | ||
| 199510 | 3개월 전 | 323 | ||
| 199509 | 3개월 전 | 254 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기