Skip to content

연습용
2012.05.03 19:07

사진배경 홈피

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제

59.jpg



모처럼 레이아웃을 하나더 만들었다.


전부터 만들고 싶었던 스타일이 사진을 배경으로 하는 홈피였다.


근데 이게 참 어려운 문제가 있다.


모니터 해상도와 내용이 길어질 경우 배경이미지의 위치등이다.


사진배경1.jpg



역시나 이번 레이아웃 역시 테이블로 만들었다.

위에 이미지처럼 테이블을 나눴구


근데 이렇게 했을 경우 앞서 말한것과 같은 문제가 생긴다.

일반적으로 셀에 배경을 넣을때 background 로 넣으면

해당 셀에 내용이 길어질경우 배경이미지가 반복해서 나타난다.


패턴이미지일경우는 상관이 없지만 위처럼 하나의 이미지일경우는 보기가 좋지 않다.

배경을 넣을때 반복하지 않고 상대위치로 넣을수도 있다.

center bottom 이런식으로 그럼 리스트가 있는 첫페이지에선 상관이 없는데

이또한 내용이 길어지면 배경은 한참 밑에서나 볼수 있기에 


젤 하단에 배경이미지가 나오기전까지 굉장히 횡한 느낌이 들게 된다.


그래서 배경이미지를 fixed 시키고 위치를 px로 잡아 줬더니

괜찮아 보였다.

근데 혹시나해서 창을 옆으로 늘려보니 배경이미지가 px로 잡아준 위치에 묶여서 

결과적으로 왼쪽으로 치우쳐지는 현상이 생기더군...


결국 그래서 배경이미지를 fixed 시키고 위치는 center로 잡아줬다.

그랬더니 배경이미지에 높이가 작아서 화면 하단은 빈공간으로 보이게 되었다.


그래서 그냥 이미지의 세로폭을 키웠다. 

지금 내가 보는 1280*1024에서는 배경이 거의 다 보이게 된다.

와이드에선 당연히 양 옆에 빈공간이 나오게 되고

세로 해상도 1024 이하에선 배경의 하단부분이 다 나오지 않는다.


이미지의 세로 크기를 몇번  조정해서 세로1024 이하에서도 어느정도 보이게끔 했다.



메뉴는 예전에 제로보드4 쓸때 만든것을 사이즈만 조금 수정해서 그대로 복사해서 사용했다.


메뉴를 제외한 이미지의 숫자는 상단, 메인배경, 하단 , 반투명배경 이렇게 4가지뿐

간단하게 전체 분위기를 바꾸기도 쉬울듯 한고 사이드쪽에 이미지나 위젯정도만 넣어주고 끝낼까 한다.


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 xe레이아웃 데모사이트 관련 gsm 2013.05.07 8682
공지 XE 홈피 XE 버젼 업에 따른 관리자 페이지 변경 file gsm 2013.04.28 9327
공지 기타팁 원격 프로그램 팀뷰어 file gsm 2012.12.13 9343
공지 기타팁 초보자들을 위한 홈피만들기에 개념? gsm 2012.10.16 9945
공지 XE 홈피 xe 설치과정입니다. gsm 2012.10.05 10085
65 XE 홈피 xe로 홈피 만들기 실전 1 - 개론 gsm 2012.11.12 2526
64 연습용 홈페이지 형식의 자기소개서? file gsm 2012.10.31 1761
63 XE 홈피 지금까지 사용해본 레이아웃 file gsm 2012.10.31 2334
62 XE 홈피 xe 설치 두번째 gsm 2012.10.25 2648
61 기타팁 풀다운 메뉴 file gsm 2012.10.05 1575
60 제로보드4 제로보드 4 설치과정 file gsm 2012.07.15 1696
59 연습용 언젠가 만들었던 연습용 홈피 file gsm 2012.06.19 1784
» 연습용 사진배경 홈피 file gsm 2012.05.03 1947
57 기타팁 웹폰트 file gsm 2012.03.22 2797
56 XE 홈피 xe.. 제로보드 4처럼 사용하기.. gsm 2012.03.20 5690
55 연습용 테이블 레이아웃 두번째 file gsm 2012.03.20 1754
54 기타팁 배경 x,y축으로 반복 또는 한번만 출력 gsm 2012.03.19 1565
53 연습용 테이블을 이용한 xe레이아웃 도전 file gsm 2012.03.11 1819
52 연습용 xe 홈피만들기 연습 file gsm 2012.03.07 1999
51 연습용 제로보드4 노프레임 홈피파일 file gsm 2012.02.20 2247
50 기타팁 포토샵 액션을 이용한 초간단 사진효과 file gsm 2012.02.15 2545
49 기타팁 audio html5 태그 file gsm 2012.02.02 6514
48 기타팁 embed 스타일 file gsm 2011.11.11 8125
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6

Recent Articles

Gloomy의 비오는 일요일 홈피는 모든 저작권을 포기합니다.

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소