html 5) Study 2

☞ 위 코드에서는 src에 적합한 이미지 소스가 없으므로 alt 속성에 주어진 값으로 대신 표시해주고 있다 ← 아니라면; 없는 이미지를 찾는다고 몇 분간 더 버벅댈 수도 있습니다 ㅡㅡ;

* cf) alt 속성값에 빈 문자열("")이라도 넣어주는 것은; 예컨대, 단순한 장식용 이미지인 경우, 스크린리더기 등의 비시각적 브라우저에게는 이미지가 컨텐츠의 중요 부분이 아니므로 렌더링을 하지 않아도 된다는 의미로 전달되며, 나아가 이미지를 복사 & 붙여넣기할 때나 이미지 링크를 나열할 때도 alt 속성에 들어있는 값을 사용하므로 SEO 차원에서도 유익하다!

☞ title 속성은 대부분의 태그에서 사용할 수 있지만, <img> 태그의 alt 속성을 대체하여 사용하는 것은 좋지 않다 - 이 속성으로 추가 정보를 제공할 수는 있겠지만, 꼭 알려야하는 중요한 정보라면; alt 속성을 사용해야 한다!

* cf) width 및 height 속성을 써서 이미지의 크기를 지정해주는 것은 좋은 일이지만, 이미지의 크기를 조정하는 데 사용하는 것은 좋지 않다 - 이미지 편집도구를 써서 미리 올바른 크기로 조정하여 삽입해주는 것이 (다운로드 속도를 높이고 이미지 왜곡을 방지한다는 점에서)최선이고, 불가피하게 이미지의 크기를 조정해야 한다면; Css 스타일시트를 써서 설정해주는 것이 좋다!

░ 진짜 이미지가 필요하시면; 픽사베이 언스플래시 Pinterest 등 무료(및 유료) 이미지들을 제공하는 사이트들을 들러 보십시오.. 한편, 구글 Material Design 에서는 사용자 인터페이스 디자인의 표준을 제시하는 동시에 폰트, 아이콘, 이미지 등 수많은 오픈소스(및 코드)를 제공하고 있으니 한번 들러 보십시오..

☞ <area> 태그에서는 맵의 모양(shape)과 좌표 영역(cords)을 지정한다

• shape="rect" cords="x1,y1, x2,y2" 사각형의 좌상단 모서리 (x1, y1) 좌표와 우하단 모서리 (x2, y2) 좌표
• shape="circle" cords="x,y,r" 원의 중심점 좌표(x, y)와 반지름(r)
• shape="poly" cords="x1,y1, x2,y2, .., xn,yn[, x1,y1]" 다각형의 각 꼭지점 좌표들 ← 좌표값은 이미지의 좌상단 꼭지점을 기준으로 하는 px 단위임

☞ 마우스 포인터를 위 그림 위에서 움직이면서 풍선 도움말을 확인하십시오. 위 코드에서는 href 속성값을 비워두었지만, 필요하다면; 저 각각의 영역들에 웹문서 등을 링크해줄 수 있습니다 ← 여기서는 이미 알고 있는 사각형의 크기를 기준으로 각 영역의 범위를 지정해주었지만, 이미지 편집 프로그램을 이용하면 특정(모양에 맞추어진) 영역 좌표를 확인하여 설정해줄 수도 있습니다!

░ bmp, jpg나 png 등의 이미지 파일을 Webp로 변환하면; 이미지 왜곡도 거의 없이, 최대 10분지 1 정도까지도 용량이 줄어듭니다. 많은 Webp 변환기가 있으니 적당한거 찾아서 Webp로 변환하여 사용하면 됩니다. 제가 권한다면; WebPconv 가 사용하기 편합니다 - 온라인 변환기들도 많지만.. 이넘은 그냥 다운받아 실행파일 클릭하고, 이미지(들) 선택하여 넣어준 뒤 클릭 두번이면 곧바로 일 끝납니다 ^^

html 5)에서는 <img> 태그로 Svg 이미지를 불러들일 수 있는데, src, alt 속성과 함께 width나 height 속성도 반드시 필요하다:

☞ <img> 요소에서 Svg 이미지를 사용할 때; 스크린리더기 등이 Svg 이미지를 인식하지 못하고 건너뛸수 있기에 role= "img" 속성을 넣어줄 필요가 있다. 반면, 단순한 장식용 이미지일 뿐이라면; (그냥 건너뛰라고)role= "none" 속성을 넣어줄 수도 있다!

* cf) Svg 이미지를 지원하지 못하는 브라우저에 대응하기 위해서 srcset 속성을 추가해줄 수도 있다:

☞ Svg를 지원하는 브라우저에서는 image.svg 파일을 불러오고, 미지원 브라우저에서는 기본 image.png 파일을 불러와서 보여주게 된다!

☞ Svg 문서의 좌상단 모서리는 x, y 좌표 (0, 0)이 되며, 한 지점의 위치는 좌상단 모서리에서 시작하는 px 단위(x축 양수는 오른쪽 방향, y축 양수는 아래쪽 방향)이다: <rect x="0" y="0" width="200" height="100" fill="red"> ← 좌상단 모서리에서 시작하는 너비 200px, 높이 100px의 사각형을 그리고, 내부는 red 색으로 채워라

☞ kind 속성의 captions 값은 주로 음향효과 및 기타 관련 오디오 정보가 포함된 스크립트 작성 및 번역에 사용한다!

                                        
                                            00:11.000 --> 00:13.000 vertical:rl // 시작시간 --> 종료시간
                                            <v Roger Bingham>We are in New York City

                                            00:13.000 --> 00:16.000
                                            <v Roger Bingham>We're actually at the Lucern Hotel, just down the street

                                            00:16.000 --> 00:18.000
                                            <v Roger Bingham>from the American Museum of Natural History

                                            .. 
                                        
                                    

ID

☞ 이 영역 안은 <pre> .. </pre>에서와 같은 방식으로 작동된다!

☞ multiple 옵션값은 [Ctrl] 키와의 조합으로 복수 선택이 가능하도록 한다!

☞ 참고로, 자바스크립트를 이용하면 움직이는 진행 상황을 나타낼 수 있는데.. 관련 플러그인을 쓰면 멋진 모양의 스타일리시한 막대바들을 쉽게 만들 수 있습니다!

░ html에서의 Form은 이 정도만 알아도 됩니다. 다 다루자면 열배 정도의 분량은 더 필요하지먄; 실제로는 대개 부트스트랩을 쓰거나, 폼 관련 라이브러리를 가져다 쓰는 것이 일반적입니다 ← html Table 또한 마찬가지입니다

                                        
                                            <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>

                                            <script>
                                                /* 1. 달리 타겟팅을 설정하지 않는 기본 초기화 설정 */
                                                anchors.add(); // 'h2, h3, h4, h5, h6'의 기본 선택자로 대체된다

                                                /* 2. 혹은, 딥 링크하려는 요소를 타겟팅하기 위해 아래와 같은 방식으로 사용할 수도 있다 */
                                                anchors.add('h1'); // 페이지의 모든 h1 요소에 앵커 추가
                                                anchors.add('.anchored'); // .anchored 클래스가 할당된 요소에 앵커 추가
                                            </script>
                                        
                                    

➥ 기본 앵커 문자(§)는 언제든 아래와 같은 옵션을 추가하여 다른 유니코드 문자로 변경해줄 수 있다:

                                    
                                        var anchors= new AnchorJS() // 앵커의 인스턴스 생성
                                        anchors.options= {
                                            icon: '⇅', // AnchorJS 기본 앵커 문자 변경
                                        }
                                        anchors.add('[data-anchor]') // data-anchor 속성이 주어진 요소에 앵커를 추가한다
                                    
                                

☞ 여기 커서를 올리면; 바로 아래에, 위에서 변경해준 앵커 문자가 나타납니다. 나타난 앵커 문자에 클릭도 해보세요..

                                        
                                            anchors.options.placement= 'left' // 앵커를 앞쪽에 배치한다 ← 기본값: right
                                            anchors.options.visible= 'always' // 앵커를 항상 보인다 ← 기본값: hover 시
                                        
                                    

                                        
                                            var anchors= new AnchorJS()
                                            anchors.options= { /* 모든 옵션들을 한번에 지정한다 */
                                                icon: '⇅',
                                                titleText: '위로 이동..', /* 옵션을 추가할 때는 ,로 구분해주어야 한다! */
                                            };
                                            anchors.add('article > dl') // article 바로 아래 모든 dl 요소

                                            anchors.options= { // 앵커 추가
                                                visible: 'always', icon: '#'
                                            };
                                            anchors.add('article > dl > dt') // article 바로 아래 모든 dl의 바로 밑 단계 dt 요소
                                        
                                    

                                    
                                        /* 1. 의사 요소를 만들어 고정 내비게이션 바의 높이로 만들어줌으로써 링크 위의 위치로 점프하도록해준다 */
                                        :target::before {
                                            content: "";
                                            display: block; height: 80px; width: 1px;
                                            margin-top: -80px;
                                        }

                                        /* 2. 또는, 아래처럼 새로운 scroll-margin-top 속성을 사용할 수도 있다
                                        - 단, 브라우저에 따라서는, 이 방식을 지원하지 않을 수도 있다! */
                                        :target { scroll-margin-top: 80px; }
                                    
                                

* cf) AnchorJS에는 (점프 탐색 등)탐색을 동적으로 생성하는 메서드가 포함되어 있지 않다. 그럼에도, AnchorJS는 모든 앵커 요소목록(anchors.elements)을 노출하며, 이러한 방식으로 외부 코드는 요소를 조회하고 이를 사용하여 탐색을 생성할 수 있게 된다. 또한, 미리 정의된 ID를 가진 정적 내비게이션과 함께 AnchorJS를 사용할 수도 있다. 어떤 경우에는, heading 요소 대신 기존의 섹션 ID에 연결할 수도 있는데, AnchorJS에 data-anchor-id= 속성을 사용하여 이 작업을 수행하도록 지시할 수 있다:

                                    
                                        <script>
                                            anchors.add('h3');
                                        </script>
                                    
                                

                                        
                                            <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">

                                            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
                                        
                                    

                                    
                                        /* 기본 플랫피커 초기화 */
                                        const fp= flatpickr("#FlatpickrInput", {}); // flatpickr
                                    
                                

                                    
                                        /* 시간 피커 옵션 설정 */
                                        const fp1= flatpickr("#FlatpickrInput1", {
                                            enableTime: true, noCalendar: true, dateFormat: "H:i"
                                        });
                                    
                                

                                    
                                        /* 날짜 & 시간 피커 옵션 설정 */
                                        const fp2= document.querySelector(".myFlatpickrs");
                                        const fp3= flatpickr(fp2, {
                                            enableTime: true, dateFormat: "Y-m-d H:i"
                                        });
                                    
                                

░ 여기서는 간단한 기본 예만 들었지만.. 그밖에 다양한 고급 사용법들은 공식 사이트로 가서 살펴보십시오..

                                        
                                            <link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

                                            <script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
                                        
                                    

* cf) 다음과 같이, Dropzone에 옵션을 추가해줄 수도 있다

                                    
                                        <form action="/target" class="dropzone" id="my-dropzone"></form>

                                        <script>
                                            Dropzone.options.myDropzone= { // id명은 camelCase 방식으로 작성해주어야 한다!
                                                // 설정하려는 옵션들..
                                            }
                                        </script>
                                    
                                

☞ 스크립트에서는 html에서의 id명(id= "my-dropzone")을 (-이 있다면; 제거하고)camelCase 방식으로 변경해주어야 한다!

                                        
                                            <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>
                                    
                                

                                    
                                        .floating-objects {
                                            position: absolute; top: 0; left: -20px; right: 0;
                                            width: calc(100% + 20px); height: 100%;
                                            overflow: hidden;
                                        } .floating-objects span {
                                            position: absolute;
                                            display: block; width: 20px; height: 20px;
                                            background-color: #232323;
                                        }
                                    
                                

☞ 이 페이지의 맨 위 헤더에서 떠다니고 있는 넘들입니다.. ← 기본 형태는 사각형이지만 클래스나 사용자 정의 스타일을 써서 쉽게 변경할 수 있습니다!

                                    
                                        <!-- Typed.js 스크립트 CDN 링크 -->
                                        <script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
                                    
                                

                                    
                                        <script>
                                            var typed= new Typed('#namsan_typing', {
                                                stringsElement: '#typed-strings', typeSpeed: 150,
                                            });
                                        </script>
                                    
                                

                                    
                                        <span id="array_element"></span>
                                    
                                

                                    
                                        var typed2= new Typed('#array_element', {
                                            strings: ['첫번째 문장입니다.. ^10000', '두번째 문장입니다..', '세번째 문장입니다..'], typeSpeed: 150,
                                        });
                                    
                                

☞ 위 코드에서 '첫번째 문장 ^10000'은 10000ms(= 10초)간 일시 중지한 뒤 다음으로 지나가도록 설정해준 것이다!

☞ 기본 설정된 초기값은 다음과 같다: "startDelay":1000, "typeSpeed":100, "backSpeed":50, "backDelay":1000, "loop":true

* cf) Css 애니메이션은 Javascript에서 초기화할 때 빌드된다. 그러나 다음과 같이 사용자 정의해줄 수도 있다:

                                    
                                        /* Cursor */
                                        .typed-cursor { .. }

                                        /* If fade out option is set */
                                        .typed-fade-out { .. }
                                    
                                

                                        
                                            <script src="vendors/countup/countUp.umd.js"></script>                                    
                                        
                                    

0

                                    
                                        var countupInit = function countupInit() {
                                            if (window.countUp) {
                                                var countups = document.querySelectorAll('[data-countup]');
                                                countups.forEach(function (node) {
                                                    var _utils$getData = utils.getData(node, 'countup'),
                                                        endValue = _utils$getData.endValue,
                                                        options = _objectWithoutProperties(_utils$getData, _excluded);
                                            
                                                    var playCountUpTriggerd = false;
                                            
                                                    var countUP = function countUP() {
                                                        if (utils.isElementIntoView(node) && !playCountUpTriggerd) {
                                                            var countUp = new window.countUp.CountUp(node, endValue, _objectSpread({
                                                                duration: 3,
                                                                useEasing: false
                                                            }, options));
                                                
                                                            if (!countUp.error) {
                                                                countUp.start();
                                                            } else {
                                                                console.error(countUp.error);
                                                            }
                                                
                                                            playCountUpTriggerd = true;
                                                        }
                                                    };
                                            
                                                    countUP();
                                                        window.addEventListener('scroll', function () {
                                                        return countUP();
                                                    });
                                                });
                                            }
                                        };                                                          
                                    
                                

* cf) 숏네임 ^shortname 은 Disqus 사이트에 할당된 고유 식별자로서, 사이트에 게시된 모든 댓글은 이 이름으로 참조된다 - 숏네임은 Disqus에 자신의 사이트 댓글과 Disqus 관리자에서 지정한 설정만 불러오도록 지시하는데, Disqus에서 댓글을 관리하려면 자신의 웹사이트를 등록하고 등록한 숏네임을 사용하여 웹사이트에 Disqus를 설치해야 한다

                                        
                                            <div id="disqus_thread"></div>

                                            <script>
                                                (function() { // 이 스크립트는 수정할 수 없습니다!
                                                    var d= document, s= d.createElement('script');

                                                    // 'ShortName'에는 자신의 숏네임을 넣어주십시오!
                                                    s.src= 'https://ShortName.disqus.com/embed.js';
                                                    s.setAttribute('data-timestamp', +new Date());
                                                    (d.head || d.body).appendChild(s);
                                                }) ();
                                            </script>

                                            <noscript>
                                                Please enable JavaScript to view the
                                                <a href="https://disqus.com/?ref_noscript" rel="nofollow">
                                                    comments powered by Disqus.
                                                </a>
                                            </noscript>
                                        
                                    

                                                
                                                    /* ---
                                                        권장 환경변수: 아래 섹션을 편집하고 댓글을 삭제하여 플랫폼이나 CMS의 동적 값을 삽입하세요
                                                    */
                                                    var disqus_config= function () {
                                                        this.page.url= '현재 페이지의 URL ← 절대 URL';
                                                        this.page.identifier= '현재 페이지의 식별자 ← 문자열 또는 숫자';
                                                        this.page.title= '현재 페이지의 제목';
                                                    };

                                                    (function() { // 이 스크립트는 수정할 수 없습니다!
                                                        var d= document, s= d.createElement('script');

                                                        s.src= 'https://ShortName.disqus.com/embed.js'; // 'ShortName'에는 자신의 숏네임을 넣어주십시오!
                                                        s.setAttribute('data-timestamp', +new Date());
                                                        (d.head || d.body).appendChild(s);
                                                    }) ();
                                                
                                            

                                    
                                        <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
                                    
                                

                                    
                                        <script src="vendors/is/is.min.js"></script>
                                    
                                

                                    
                                        <script src="vendors/lodash/lodash.min.js"></script>
                                        
                                        <script src="https://cdn.jsdelivr.net/npm/lodash@4.18.1/lodash.min.js"></script>