코드 작성하기

░ 여기서는 이 웹코딩 강좌 사이트 전반에서 보여주고 있는 세로 스크롤 스파이에 관해 살펴봅니다..

세로 스크롤 스파이
1. Css 기본 설정 
                                
                                    .min-vh-100 { min-height: 100vh !important; }
                                    .navbar-nav-scroll_100 { max-height: 100vh; overflow-y: auto; }
2. html 코드 작성하기

Quill Editor

░

위지위그 에디터: Quill Editor
퀼 에디터를 사용하려면; 먼저 Quill Css 및 스크립트를 CDN으로 링크하고 스크립트를 초기화한다. 다음, 에디터용 컨테이너만 만들어주면 된다
[ Quill Editor CDN 링크 및 스크립트 초기화 ] 
                                    
                                        <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

                                        <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
                                        <script>
                                            const quille= new Quill('#editor', {
                                                theme: 'snow' // 'snow' 테마로 초기화 ← 부동 도구모음 테마인 'bubble'도 있음
                                            });
                                        </script>
                                    
                                
                                
                                    <div id="editor">
                                        마음껏 적어보세요..
                                    </div>

☞ 끝입니다, 간단하지요?

마음껏 적어보세요..

░ 실제로는, Quill 에디터는 이보다 훨씬 더 풍부하고 방대하니.. 관련 상세 내용들은 Quill-js 공식사이트로 가서 살펴보십시오..

Equation Editor

░

수식 입력기: Equation Editor
1. 먼저 관련 Css 및 스크립트를 CDN으로 링크하고 스크립트를 초기화해주어야 한다:
[ Equation Editor CDN 링크 및 초기화 ] 
                                    
                                        <head>
                                            <title>수식입력기</title>

                                            <!-- Css CDN 링크 -->
                                            <link rel="stylesheet" href="https://editor.codecogs.com/eqneditor.css" />
                                        </head>

                                        <body>
                                            <!-- 에디터용 컨테이너 작성할 곳 -->
                                            
                                            <!-- 스크립트 CDN 링크 및 초기화 -->
                                            <script src="https://editor.codecogs.com/eqneditor.api.min.js" crossorigin="anonymous"></script>
                                            <script type="text/javascript">
                                                /* Equation Editor 초기화 */
                                                textarea= new EqEditor.TextArea('latexInput')
                                                .addToolbar(new EqEditor.Toolbar('toolbar'), true)
                                                .addOutput(new EqEditor.Output('output'))
                                                .addHistoryMenu(new EqEditor.History('history'));
                                            </script>

                                            <!-- 작성된 기호를 html에 삽입하기 위한 latex 플러그인 CDN 링크 -->
                                            <script src="http://latex.codecogs.com/latexit.js"></script>
                                        </body>
2. 다음, <body>에서 에디터용 컨테이너를 만들어준다:

☞ 이제, 이렇게 만들어진 Equation 컨테이너에서 수식기호를 작성한 뒤, 웹문서에 붙여넣으면 됩니다..

░ 위 설명대로 따라하다보니 얼떨결에 만들어진 입니다

wave