메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

아... 안녕하세요 'ㅡ';; 오늘은 나가기전에 하나더 올려버리고 나가렵니다 'ㅡ'a
홈페이지를 드디어 열어버렸어요 ㅠ_ㅠ;; 기쁨... [ 그러나;; 만족못하고 뾰로퉁;; ㅠ_ㅠ 너무 엉성한지라;; ]
바로 본론으로 넘어가겠습니다.

#04. 레이아웃을 어떻게 짜야 효과적일까?

아.. 언제나 사람의 머리를 두들기는 저 레이아웃을 어떻게 짜야지만 효과적이고,
모든 사람들의 시선을 사로잡을 수 있을까..?

1. 나만의 컴퓨터 환경에서 작업하지 말자.
각자의 모니터마다 해상도가 다른것을 염두해두고 피시방에서나 다른 컴퓨터에서도 내가
작업한것을 보고 조금씩 수정해 나가야합니다.
강좌를 올리면서도 종종 문제가 발생하기도 하는데요
해상도에따른 문제때문에 이미지가 파란색이여야하는데 하얀색처럼 보이는 컴퓨터도 있기때문에
기본적으로 표현이 잘되는 색상을 선택해주셔야 합니다.

2. 기본은 800 * 600!
앞서 말했듯이 대부분의 커뮤니티 홈페이지는 800 * 600을 기준으로 맞추어져 있습니다.
그러나 요즘은 1024 * 768 이정도도 무난하다고 생각해도 상관은 없을듯 한데요..
[ 저.. 저또한 이번 리뉴얼에서는 1024 * 768 이상의 해상도에서 무난히 볼수있게 만들어서;; ]
레이아웃을 짤때 기본적으로 나의 해상도가 높다면, 낮은 해상도에서도 무난히 돌아가도록
해야 합니다.
그래고 해상도가 낮다면 자신보다 높은 해상도에서 무난히 돌아가도록 해야합니다.
이미지의 순서가 뒤바껴버려서 엉망진창이 되어버리는 경우가 있기때문입니다.

2-1. 프레임을 사용해서 해상도 맞추기.
프레임을 사용하는 방법은 여러가지입니다. 그중에 한가지만을 소개하도록 하겠습니다 ^^;;

3개의 프레임이 존재한다고 생각하시고요.
Left - Center - Right
가 있다면요 내용은 Center 이부분에만 들어가게 됩니다.
즉 Center 안에서 프레임을 한번더 나누어 주는것이지요;;[ 자신이 원하는 레이아웃을 거기다가
구성 ]
그리고 Center의 옵션에서 너비를 자신의 기본이 될 해상도로 맞추어줍니다.
그리고 나머지 Left , Right는 상대적인 너비값을 넣어주게되면, 해상도가 올라가면서
깨져야할 부분들 대신 Left와 Right가 보여지게 되는겁니다. 상대적인 너비이기때문에
안정적으로 Center를 중간에 딱 보여주게 되는것이지요.

2-2. 자신의 홈페이지에서 무난히 돌아가는 해상도를 적어줍니다.
그래야지 조금이라도 사람들의 불편함을 덜어줄 수가 있는데요...

별로 추천하고 싶지는 않습니다.
' 방문객에게 직접 나에게 맞추어서 들어오라. ' 라는 성의 없는 방법으로 생각되기 쉽기때문에
전자의 방법을 추천합니다.

아앗.. 더이상 적어둘께 없는거 같네요 ㅠ_ㅜ;
그래도 다음 강의는 계속하게됩니다 -_-a [ 제 홈페이지에서 물어보시면 좀더 세세히-_-a ]
과..광고성!;;
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48027
62 애플모션 강좌 13강 칼레이도스코프 덴디 2004.12.27 5453
61 애플모션 강좌 14강 비헤이비어/Custom Negate Oscillate 덴디 2004.12.29 2667
60 [페인터] 귀여운 차이나풍의 소녀 케릭 그리기 [4] file Hwoarang 2005.02.10 8757
59 배너 만드는법,, [3] file 홍동기 2005.09.11 5834
58 [ 나모웹에디터FX 웹 캔버스 ] 웹캔버스로 디자인하기 … ① [4] file 전세웅 2006.01.06 6219
57 [동영상강좌]로그인 스킨 적용법 에관한 강좌 [3] 조한철 2006.01.19 2491
56 [동영상강좌]최근개시물 적용방법 [2] 조한철 2006.01.19 2601
55 아이프레임홈제작강의)) 01 . 기본디자인 구성하기 〃샤르프〃 2006.01.24 4389
54 아이프레임홈제작강의)) 02 . Main.html 파일 수정해보기 [7] 〃샤르프〃 2006.01.24 6311
53 C++ 강의 입니다. 무료구요! [3] croW 2006.02.26 3039
52 ▣ 이러닝콘텐츠제작방법 - [제1강] 렉토라 강좌 안내 [1] 에듀멘 2006.03.10 2397
51 ▣이러닝콘텐츠제작방법 - [제2강] 렉토라 강좌 안내 에듀멘 2006.03.10 2369
50 렉토라 교재다운로드[ox문제,주관식,객관식문제유형및다양한 자료개발] - 1분만에 제작 [1] 에듀멘 2006.03.10 2494
49 ▣[제2-1강]렉토라의 구조와 페이지 구성 에듀멘 2006.03.12 2183
48 렉토라-작품마법사를 활용한 레이아웃 구성하기-[제5강] [1] 에듀멘 2006.03.14 2254
47 LECTORA - 작품마법사를 활용한 레이아웃 구성하기[제5-1강] [1] 에듀멘 2006.03.14 2161
46 렉토라-멀티미디어 자료 입력하기[400가지 디자인갤러리사용][제6-1강] 에듀멘 2006.03.14 2239
45 LECTORA - 학습주제 및 학습내용 제작하기[제7강] 에듀멘 2006.03.14 2205
44 LECTORA-평가문항제작(2) 단답형 / 논술형 문제[제11-1강] [1] 에듀멘 2006.03.14 8735
43 LECTORA - 평가문항제작(4) drag&drop형 / Hot Spot형 문[제13-1강] [2] 에듀멘 2006.03.14 8090