반응형
m.logPrint() is working!
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
kakao.js with id="kakao-js-sdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1178ms.
Doing delayed-load. : 2
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
kakao.js with id="kakao-js-sdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1178ms.
Doing delayed-load. : 2
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/75
document.referrer: Empty
width: 1280, height: 720, version: 3.3.3
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/75
document.referrer: Empty
Customized styling of scroll bars in HTML
First posting at 2014-05-26
Cross browsing 문제가 심하긴 한듯.
Table of Contents
T1.in Webkit browser (Chrome, Safari, Opera)
▼ Show/Hide
설정들은
▲ default scrollbars.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
::-webkit-scrollbar:horizontal {}
::-webkit-scrollbar:vertical {}
[04]
Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
[05]
참조해서...
Ref. [05] webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
Fig. (1-1): Scroll bar map for webkit. 위 code에서 각 { /* 1~7 */ }이 무엇을 나타내는지 그림파일로 쉽게 보여줌. (Thanks to 출처:
[04]
Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
[02]
)Ref. [02] codemug.com - Custom scrollbars for IE, Chrome and Firefox using CSS, 2013-03-04, by Jeff
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
div css style 형태로 많은걸 바꿀 수 있는듯.
▲ Hide
T2.in IE (Internet Explorer)
▼ Show/Hide
여긴 독특하게 해놓은듯
[06]
. color 정도만 바꿀 수 있는듯.Ref. [06] Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
Fig. (2-1): Scroll bar map for IE.
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
<style>
#pre-code-scrollIE {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
</style>
a
b
c
d
e
f
g
h
i
j
k
l
m
n
size (width/height) 조정은 안되는듯? 어떤게 표준이 될래나? 이것도 inherit 되는거겠지? webkit 쪽이 div css style이랑 비슷해서 더 직관적이기는 한데... (오랜만에 IE 11로 열어봤는데, 왜이리 느리지? =ㅇ=;;;; IE는 정말 구리다.)
▲ Hide
T4.using jQuery plug-in (Cross-Browser)
▼ Show/Hide
누군가 cross-browser 문제를 해결하기 위해 jQuery로 짜놓은듯 함
[03]
. 공부를 조금 해야 써먹을 수 있을듯. 그리 어렵진 않은거 같긴한데, 확실히 CSS보단 귀찮은 작업.Ref. [03] manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu
▲ Hide
TRefs.References and Related Articles
▼ Show/Hide
- Ref. [01] circlash.tistory.com - CSS로 블로그 스크롤 바 스타일 지정하기(IE, Safari, Chrome), 2011-05-09
- Ref. [02] codemug.com - Custom scrollbars for IE, Chrome and Firefox using CSS, 2013-03-04, by Jeff
- Ref. [03] manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu
- Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
- Ref. [05] webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.
- Ref. [06] Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
▲ Hide
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
반응형
'[IT|Programming] > HTML related' 카테고리의 다른 글
| Javascript namespace or encapsulation (0) | 2019.03.07 |
|---|---|
| 반응형 웹 만들기 (Responsible/Scalable web design with css media query) (0) | 2019.03.06 |
| 티스토리 단축키 설정 (+단축키 추가/수정하기) (1) | 2019.03.06 |
| Improving web performance (0) | 2019.03.04 |
| Citing the references automatically in HTML (like LaTeX) (2) | 2019.03.04 |
| LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들 (0) | 2019.03.04 |
| CSS3 examples (0) | 2019.03.04 |
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.