운

이런 형태의 디자인은 어떻게 하는게 가장 효율적일까요?

· 2013-04-01 (월) 17:04:43 · 2577 · 4
imsi.jpg

아는 분의 홈페이지를 제작해주게 되었어요.
근데 이분이 좀 화려하고  특이한 디자인을 원합니다.
첨부파일과 같은 꽉찬 디자인을 원하시는데, 어떻게 레이아웃을
잡는게 좋을까요?
가운데 그라데이션만 안들어가도 모니터 해상도 상관없이
작업해보겠는데 그라데이션이 들어가는데다가
중앙에 각 페이지별 컨텐츠들을 이미지로 넣어야 할것같아요.
한 화면에서 스크롤 안생기게 작업해달라는데...

그라데이션 배경을 깔고 컨텐츠들을 png로 삽입하면 좋겠는데
브라우저마다 호환성도 다르구...

만약 여러분이라면 어떤 식으로 작업을 하시겠나요?
나중에 수정도 용이하고 모든 브라우저에서 제대로 나오게 하려면
어떻게 하는게 좋을까요...
고수디자이너분들의 조언 부탁드립니다^^;

첨부파일

imsi.jpg (31.9 KB)
13회 2013-04-01 17:04
|

댓글 4개

scroll bar 안생기고 어느 해상도/브라우져에서나 gradient 이미지를 ratio 맞춰서 보여주고 (IE8 까지 안맞춰줘도 되면 gradient 를 css 처리해줘도 되지만, 한국은 아직도 IE8 맞춰줘야 하죠?) 이게 전부네요.

무지 쉬운 요구사항이네요. gradiation 이미지만 있으면 5분이면 할듯... ㅠㅠㅠㅠ

http://hackya.com/media/
전 원페이지 작업을 하면 괜찬을듯하네요.. 메뉴 클릭하면 이미지가 아래에서 위로 휫휫~~ 넘어가는. .
그냥 코딩 하시는것보다 워드프레스로 만들어드리면 빠를듯합니다.
2013-04-03 (수) 19:02:14
원페이지면 그냥 통이미지로 말인가요? 그럼 저해상도나 고해상도 모니터에서 봤을때 여백이 생기지 않을까요... 동일하게 꽉차게 표현하고 싶은데 어렵네요...ㅎㅎ 워드프레스는 안만져봐서 모르겠구요..ㅠㅠ 답변 감사합니다.
제가 얘기를 잘못했네요. 5분이 아니라 1분 조금 넘게 걸리네요. (구글에서 이미지 검색하는 시간 포함해서)

css 한줄이면 되는건데, 뭐가 어려우신건지....

:root {width:100%; height:100%; background: red url(http://www.enough.de/fileadmin/docimport/images/gui-background-radial-gradient.png) center center no-repeat;}

IE8에서는 :root 을 html 로 바꾸셔야겠죠?

이게 어려우시면 문제가 심각하시네요.. -..-;;

http://hackya.com/tutorial/css/temp.htm

팁자료실에서 css 관련글도 읽어 보시고 사이트 만드시기전 일단 기초적인 css 공부부터 하셔야 할듯 생각됩니다.

그리고 여기서 워프 얘기가 왜 나오는지는... 워프가 좋은 CMS 이긴 하지만 css 나 jQuery 랑은 아무런 관련이 없죠........

컴퓨터가 늦어졌는데 어떻게 하면 빠르게 하나요?

윈덱스로 모니터를 닦아 보세요. - 이 얘기하고 똑같은 얘기죠.......

/////////////////////////////////////////////

위아래로 scroll + animate 해주는거는 jQuery 로 이렇게만 작성하면 됩니다.

$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
});
});


아니면 이런거 가져다 쓰시던가.

http://johnpolacek.github.com/scrolldeck.js/decks/parallax/
댓글을 작성하시려면 로그인이 필요합니다.

디자인

1,855건
+
제목 글쓴이 날짜 조회
13-04-08 조회 3,563
13-04-08 조회 2,872
13-04-08 조회 2,555
13-04-07 조회 3,347
13-04-03 조회 2,259
13-04-02 조회 1,739
13-04-01 조회 2,578
13-04-01 조회 2,157
13-04-01 조회 3,055
13-04-01 조회 2,883
13-04-01 조회 2,706
13-04-01 조회 2,698
13-04-01 조회 2,993
13-04-01 조회 1,659
13-04-01 조회 1,289
13-03-27 조회 2,482
13-03-27 조회 2,252
13-03-27 조회 3,421
13-03-23 조회 2,050
13-03-23 조회 1,731
13-03-22 조회 3,347
13-03-21 조회 2,861
13-03-19 조회 2,643
13-03-16 조회 1,705
13-03-15 조회 2,586
13-03-15 조회 1,536
13-03-12 조회 2,042
13-03-12 조회 2,372
13-03-12 조회 3,327
13-03-11 조회 4,139
13-03-11 조회 2,310
13-03-06 조회 2,414
13-03-04 조회 4,286
13-02-28 조회 1,887
13-02-28 조회 1,481
13-02-22 조회 3,848
13-02-21 조회 2,753
13-02-20 조회 3,466
13-02-19 조회 1,672
13-02-19 조회 7,054
13-02-19 조회 1,778
13-02-13 조회 2,381
13-02-12 조회 1,894
13-02-12 조회 1,431
13-01-29 조회 1,795
13-01-25 조회 2,174
13-01-24 조회 3,062
13-01-24 조회 2,726
13-01-24 조회 3,063
13-01-24 조회 2,989
13-01-24 조회 2,608
13-01-24 조회 2,547
13-01-23 조회 4,671
13-01-22 조회 2,444
13-01-22 조회 1,814
13-01-22 조회 2,094
13-01-18 조회 2,102
13-01-18 조회 1,708
13-01-18 조회 1,785
13-01-18 조회 1,316
13-01-16 조회 2,325
13-01-15 조회 2,296
13-01-10 조회 2,692
13-01-10 조회 2,024
13-01-10 조회 1,940
13-01-10 조회 1,816
13-01-08 조회 2,498
13-01-08 조회 2,659
13-01-08 조회 2,213
13-01-08 조회 3,851
13-01-08 조회 4,317
13-01-08 조회 3,223
12-12-30 조회 2,582
12-12-28 조회 2,657
12-12-27 조회 2,535
12-12-27 조회 2,179
12-12-27 조회 2,773
12-12-21 조회 1,938
12-12-21 조회 3,628
12-12-21 조회 2,487
12-12-21 조회 1,641
12-12-19 조회 3,893
12-12-19 조회 3,530
12-12-19 조회 2,234
12-12-14 조회 1,984
12-12-13 조회 5,255
12-12-12 조회 1,391
12-12-12 조회 6,781
12-12-10 조회 7,081
12-12-08 조회 2,470
12-12-08 조회 2,774
12-12-08 조회 1.7만
12-12-08 조회 3,256
12-12-08 조회 1,916
12-12-07 조회 2,090
12-12-07 조회 2,935
12-12-07 조회 1,909
12-12-06 조회 2,309
12-12-04 조회 2,261
12-12-04 조회 2,740