HTML doctype 정의에 따른 스크롤바 스타일
페이지 정보
본문
DTD 설정을 하게 되면 브라우저가 표준 모드로 렌더링하게 되므로 Scroll Bar 속성을 body{}에 주면 안되고 html{}에 주어야 한다.
[ 샘플 1 ] doctype 미적용된 문서에서 body 에 스크롤바 적용된 경우
<html>
<head>
<style type="text/css">
<!--
body {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
[ 샘플 2 ] doctype 적용된 문서에서 body 에 스크롤바 적용된 경우
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
[ 샘플 3 ] doctype 적용된 문서에 html 에 스크롤바 적용된 경우
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
참고자료
http://mulue.springnote.com/pages/1665110
[ 샘플 1 ] doctype 미적용된 문서에서 body 에 스크롤바 적용된 경우
<html>
<head>
<style type="text/css">
<!--
body {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
[ 샘플 2 ] doctype 적용된 문서에서 body 에 스크롤바 적용된 경우
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
[ 샘플 3 ] doctype 적용된 문서에 html 에 스크롤바 적용된 경우
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {
scrollbar-3dlight-color: #808080;
scrollbar-arrow-color: #606060;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #808080;
}
//-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />https://www.happyjung.com
</body>
</html>
참고자료
댓글목록
등록된 댓글이 없습니다.