메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

web accessibility DIV 스크롤바 & 속성

흑묘 2010.04.05 00:00 read.1621

DIV에 스크롤바 나타내기

overflow-x x축(가로)

overflow-y y축(세로)

overflow:visible 레이어 크기를 키워서 보여준다 (* 디폴트)

overflow:hidden 레이어 크기만큼만 보여준다

overflow:auto 내용에 따라 자동으로 스크롤을 만든다

overflow:scroll 무조건 스크롤바를 생성한다


스크롤바 꾸미기

<style type="text/css">

scrollbar-face-color:#FFFFFF; 스크롤바 전체 색상
scrollbar-track-color: #FFFFFF; 스크롤바가 없는 스크롤바 아래에 위치한 부분의 색상

scrollbar-arrow-color: #666666; 위 아래 화살표 색상
scrollbar-highlight-color: #FFFFFF; 왼쪽과 위쪽의 하이라이트 색상
scrollbar-3dlight-color: #cfcfcf; 입체감을 위한 왼쪽 위 색상
scrollbar-shadow-color: #FFFFFF; 오른쪽과 아래쪽의 그림자 색상
scrollbar-darkshadow-color: #cfcfcf; 바의 오른쪽, 밑쪽에 들어가는 얇은 색

</style>


=================================================================================================================

2010.06.07 11:00:57


div Style속성

overflow: ######;

  • visible : 레이어 크기를 키워서 출력.
  • hidden : 레이어 크기만큼 출력.
  • auto : 내용에 따라 자동 스크롤.
  • scroll : 스크롤바 생성.

      ex) overflow-x:값; overflow-y:값; overflow:값;


position: ######;

  • static : 기본값.
  • relative : 하위에 div가 있을 경우엔 하위의 div를 absolute 배열.
  • absolute : div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정.
  • fixed : 스크롤에 상관없이 지정한 위치에 고정.
  • inherit : 상위에서 지정한 값을 상속.

visibility: ######;

  • visible : 보임.
  • hidden : 감춤.

z-index: #; :: #값에 따라 우선순위 정의.

  • left: ##px;
  • top: ##px;
  • width: ###px;
  • height: ###px;
  • text-align: center;
  • center , left, right ...
  • background-color: #######;
  • border-style: ######;
  • solid , dotted .....
  • border-color: ######;
  • border-width: ##px;
  • border: ###px;
추가메뉴 목록
위로