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

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

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

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


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

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

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


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

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

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

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

결과 예제

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




또 다른 샘플:






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