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가지뿐

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


  1. 데모사이트 관련

    Date2013.05.07 Categoryxe레이아웃 Bygsm Views8682
    read more
  2. XE 버젼 업에 따른 관리자 페이지 변경

    Date2013.04.28 CategoryXE 홈피 Bygsm Views9328
    read more
  3. 원격 프로그램 팀뷰어

    Date2012.12.13 Category기타팁 Bygsm Views9343
    read more
  4. 초보자들을 위한 홈피만들기에 개념?

    Date2012.10.16 Category기타팁 Bygsm Views9945
    read more
  5. xe 설치과정입니다.

    Date2012.10.05 CategoryXE 홈피 Bygsm Views10085
    read more
  6. xe로 홈피 만들기 실전 1 - 개론

    Date2012.11.12 CategoryXE 홈피 Bygsm Views2526
    Read More
  7. 홈페이지 형식의 자기소개서?

    Date2012.10.31 Category연습용 Bygsm Views1761
    Read More
  8. 지금까지 사용해본 레이아웃

    Date2012.10.31 CategoryXE 홈피 Bygsm Views2334
    Read More
  9. xe 설치 두번째

    Date2012.10.25 CategoryXE 홈피 Bygsm Views2648
    Read More
  10. 풀다운 메뉴

    Date2012.10.05 Category기타팁 Bygsm Views1575
    Read More
  11. 제로보드 4 설치과정

    Date2012.07.15 Category제로보드4 Bygsm Views1696
    Read More
  12. 언젠가 만들었던 연습용 홈피

    Date2012.06.19 Category연습용 Bygsm Views1784
    Read More
  13. 사진배경 홈피

    Date2012.05.03 Category연습용 Bygsm Views1947
    Read More
  14. 웹폰트

    Date2012.03.22 Category기타팁 Bygsm Views2798
    Read More
  15. xe.. 제로보드 4처럼 사용하기..

    Date2012.03.20 CategoryXE 홈피 Bygsm Views5690
    Read More
  16. 테이블 레이아웃 두번째

    Date2012.03.20 Category연습용 Bygsm Views1754
    Read More
  17. 배경 x,y축으로 반복 또는 한번만 출력

    Date2012.03.19 Category기타팁 Bygsm Views1565
    Read More
  18. 테이블을 이용한 xe레이아웃 도전

    Date2012.03.11 Category연습용 Bygsm Views1819
    Read More
  19. xe 홈피만들기 연습

    Date2012.03.07 Category연습용 Bygsm Views1999
    Read More
  20. 제로보드4 노프레임 홈피파일

    Date2012.02.20 Category연습용 Bygsm Views2247
    Read More
  21. 포토샵 액션을 이용한 초간단 사진효과

    Date2012.02.15 Category기타팁 Bygsm Views2545
    Read More
  22. audio html5 태그

    Date2012.02.02 Category기타팁 Bygsm Views6514
    Read More
  23. embed 스타일

    Date2011.11.11 Category기타팁 Bygsm Views8125
    Read More
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에는 나눔글꼴이 설치되어 있지 않습니다.

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

설치 취소