HTML 태그의 오버플로우 처리 적용_HTML/Xhtml_웹페이지 제작

CSS를 사용하여 스크롤바 장식
1. Overflow 내용이 넘칠 때 설정

overflow-x 가로 내용이 넘칠 때 설정
overflow-y 세로 내용이 넘칠 때 설정
위 3가지 속성에 의해 설정된 값이 보이는데(기본값 ), 스크롤, 숨김, 자동.

2． scrollbar-3d-light-color 3차원 스크롤 막대의 밝은 가장자리 색상
scrollbar-arrow-color위 및 아래 버튼의 삼각형 화살표 색상
scrollbar-base-color의 기본 색상 스크롤 바
scrollbar-dark-shadow -color 3차원 스크롤 바의 강한 그림자 색상
scrollbar-face-color 3차원 스크롤 바 돌출 부분의 색상
scrollbar-highlight-color 스크롤바의 빈 부분의 색상
scrollbar-shadow-color 3차원 스크롤바 Shadow 색상
위 7가지 속성에서 설정한 값은 모두 색상값이며, 스타일시트에서 정의한 다양한 표현을 사용할 수 있습니다.

위 스타일 정의 콘텐츠를 사용하여 브라우저 창의 스크롤 막대와 여러 줄 텍스트 상자를 표시할지 여부를 지정할 수 있으며, 첫 번째 스타일 속성 세트를 사용하여 설정 여부를 설정합니다. 개체가 표시되면 스타일 속성의 두 번째 세트는 스크롤 막대의 색상을 설정하는 데 사용됩니다. 이 문서에 포함된 스타일 속성은 IE에서만 지원됩니다. IE5.5 버전에서 지원되므로 디버깅 시 주의하시기 바랍니다.

위의 스타일 속성을 몇 가지 예를 통해 설명합니다.

1. 브라우저 창에 스크롤 막대가 없도록 합니다.
가로 스크롤 막대 없음

세로 스크롤 막대 없음

스크롤 막대 없음
또는

2. 여러 줄 텍스트 상자의 스크롤 막대 설정
가로 스크롤 막대가 없습니다.

코드 복사

코드는 다음과 같습니다.

세로 스크롤 막대 없음

코드 복사

코드는 다음과 같습니다:

스크롤바 없음

코드 복사

코드는 다음과 같습니다.

;/textarea>

또는

코드 복사

코드는 다음과 같습니다.

< ;textarea style= "overflow:hidden">

3. 창 ​​스크롤 막대 색상을 설정합니다
창 스크롤 막대 색상을 빨간색
scrollbar-base-color는 기본 색상을 설정합니다. 일반적으로 스크롤 막대 색상을 변경하려면 이 속성만 설정하면 됩니다.
약간의 특수 효과 추가:

코드 복사

코드는 다음과 같습니다.

4. 다른 요소를 설정할 때도 기본적으로 동일합니다. 스타일 시트에서 설정하는 것이 좋습니다. 재사용할 수 있도록 파일에 클래스를 정의하세요.

코드 복사

코드는 다음과 같습니다.

.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;

위 명령문을 스타일 시트 파일 또는 html 헤더 스타일>에서

를 사용하세요.