컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post Java/자바] split()에서 Tab(탭 문자) 구분자; 마침표를 구분 기호로서 분리Java/자바] split 메서드 사용법 예제; 문자열을 배열로 변환, String to ...울트라에디트] 버그 패치(핫픽스) 다운로드 주소; UltraEdit-32 Hotfix Do...Java/자바] join 메소드: 배열을 하나의 문자열로 합치기, 구분문자 넣어Perl/펄] join 함수 사용법 예제; join Function ExampleC언어 기초 예제] 1에서 100까지, 한줄에 10개씩 숫자 쓰기C언어 기초 예제] 도스창 화면에, 1에서 100까지 숫자 쓰기리눅스/유닉스 히든파일 만들기; 숨김 파일 속성 주기; Make Hidden File, L...C언어] 원주율(PI) 계산 소스; 소수점 이하 799 자리까지 파이 값 구하기C언어 에러 해결] error C2065: 'M_PI' : undeclared identi...

HTML-CSS] 이미지/사진에 스크롤바 붙여, 좁은 화면에 모두 표시하기; IMG Scroll Bar

Sunday, November 12, 2006

그림 파일이 홈페이지 면적보다 더 넓을 경우,

* 그림/사진에 스크롤바를 붙여서, 스크롤하여 전체를 볼 수 있게 하고,

* 또한 그 그림을 클릭한다면 "전체화면(풀 스크린)"으로 나오게 하는 방법입니다.


CSS 코드와 HTML 태그는 다음과 같습니다:


그림/사진(img 태그)에 스크롤바 붙이기 예제


<html>
<head>
<style type="text/css">
.imgScrollBox {
  overflow:scroll;
  width:70%; padding-bottom:20px;
  border-style:none;

  scrollbar-face-color:#FFFFFF;
  scrollbar-3dlight-color:#FFFFFF;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#000000;
  scrollbar-darkshadow-color:#FFFFFF;
  scrollbar-arrow-color:#000000;
  scrollbar-track-color:#FFFFFF; }
</style>
</head>


<body>

<div class="imgScrollBox"><a href="test.jpg"><img src="test.jpg" alt="이미지 설명문" /></a></div>

</body>
</html>


위에서 test.jpg 라고 된 곳에, 그림 파일의 주소를 넣으면 됩니다. 2곳에 똑같은 그림 주소를 반복하여 넣어야 합니다. 그래야 그 그림을 클릭했을 때 그림의 전체화면이 나옵니다.


imgScrollBox 라는 클래스에서 overflow:scroll 이라는 CSS 속성이 가장 중요합니다. 이것이 스크롤바(Scroll Bar)를 만듭니다. 스크롤바가 필요 없을 경우에도 항상 스크롤바가 만들어집니다.

width : 그림을 어느 정도의 가로 길이로 나타낼 것인지 결정. 홈페이지의 디자인에 따라 이 값을 적당히 변경해 주어야 함.

padding-bottom : 그림 아래쪽과 가로 스크롤바 사이의 여백, 즉 간격

scrollbar... 라고 되어 있는 속성들은 IE의 스크롤바 색깔을 하얗게 만들어 주는 것인데 없어도 괜찮습니다. 이것은 웹표준이 아니기에, 파이어폭스에서는 스크롤바 색상 지정이 되지 않습니다. 왜 스크롤바를 하얗게 만들어 주었느냐 하면, 그래야 스크롤바 쪽으로 시선이 분산되지 않고 그림에 잘 집중할 수 있기 때문입니다. 물론 개인적인 취향에 달린 일이겠지요.



결과 예제


예를 들어 다음과 같은 식으로 나타납니다:

DOOM2



또 다른 샘플:

포토샵: 피사체 추출





▶▶ [HTML-CSS] div 태그에 스크롤바(Scroll Bar) 붙이기

☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top