html 5) Study 2

                                        
                                            p { /* 스타일을 적용할 태그 선택자 p 선언 */
                                                color: red; /* p 태그 내 모든 글자들을 red 색상으로 표시한다 */
                                                width: 400px; /* p 문단의 가로 너비는 400px로 설정한다 */
                                            }
                                        
                                    

                                        
                                            /* my-style.css 파일 */
                                            h1 { color: red; }
                                            p { color: green; }
                                        
                                    

░ 본격적인 학습을 시작하기 전에, MDN에 있는 Css의 작동방식 을 찬찬히 한번 읽어보시길 권합니다 - 브라우저가 웹문서를 불러올 때, 웹문서의 컨텐츠와 Css 스타일을 어떻게 결합하여 나타내는지 간결히 잘 설명해주고 있습니다..

                                    
                                        .box-bg {
                                            color: white; /* 글자색 */
                                            background-color: black; /* 배경색 */
                                        }
                                    
                                

                                    
                                        /* article 내부 p 요소들 중 .box 클래스를 지닌 요소 */
                                        article p.box { border: 1px solid #ccc; } /* 별로임 ! */

                                        /* .box 클래스를 지닌 요소 */
                                        .box { border: 1px solid #ccc; } /* 좋아요 ~ */
                                    
                                

                                    
                                        /* || 일반 스타일: 일반적으로 적용되는 기본 스타일들에 대한 규칙들 */
                                        body { .. }
                                        h1, h2, h3, h4 { .. }
                                        ul { .. }
                                        blockquote { .. }

                                        /* || 유틸리티: 다양한 요소에 따로 적용하고자 하는 스타일링 옵션들 */
                                        .no-bullets {
                                            list-style: none; margin: 0; padding: 0;
                                        }

                                        /* || 내비게이션 관련: 페이지 레이아웃, 페이지 헤더 및 로고, 푸터, 사이드바 등의 내비게이션 스타일링 등.. */
                                        .main-nav { .. }
                                        .logo { .. }

                                        /* || 컨텐츠, 페이지 및 구성 요소에 따라 세분화된 특정 섹션 항목에 대한 설정들.. */
                                        .product-listing { .. }
                                        .product-box { .. }
                                    
                                

                                    
                                        /* || General styles */
                                        ..
                                        
                                        /* || Typography */
                                        ..
                                        
                                        /* || Main Navigation */
                                        ..
                                    
                                

░ Normalizing Css 에는 모든 프로젝트에 사용할만한 일련의 기본 스타일을 작성해두고 있습니다 - 가져와서 기본 스타일로 넣어주고, 자신에게 필요한 스타일만 추가로 작성(및 수정)하여 사용하면 편합니다 ← 참고로, 부트스트랩을 사용한다면; 부트스트랩에 기본 설정된 스타일을 사용하면 됩니다 - 물론, 이 또한 자신의 사용자 정의 스타일을 추가하고 수정하여 사용할 수 있습니다!

                                        
                                            /* id 스타일 */
                                            #idName { .. } /* idName ID를 가진 요소 */
                                            h1#idName { .. } /* idName ID를 가진 h1 태그 */ 
    
                                            /* class 스타일 */
                                            .className { .. } /* className 클래스를 가진 요소(들) */
                                            p.className1 { .. } /* className1 클래스를 가진 p 태그(들) */
                                            p.className1.className2 { .. } /* className1, className2 클래스를 함께 가진 p 태그(들) */
                                        
                                    

✓ ID를 사용하는 것 외에 달리 방법이 없는 특별한 경우가 아니라면; 대부분의 경우 요소에 #id 대신 .class를 사용하는 것이 미처 예기치 못한 에러의 가능성을 미리 방지한다는 차원에서 더 안전하다!

☞ 여기서 <div>는 내부 모든 요소들을 포함하는 최상위 조상 이 되고, 아래 <p> 요소들은 그 자식들 이 된다(서로는 형제간 이다). 각 <p> 요소들은 또 그 밑에 <b> 및 <i>라는 자식 요소를 거느리고 있다(<p>와 <b> 및 <i> 모두 <div>의 후손들 이다). 각 <p> 요소들은 그 부모 <div>와 관련하여 자식 이 되며, 그 자식 <b> 및 <i>와 관련해서는 부모 가 된다. 이 <p> 요소들은 서로 형제간 이며, 형, 동생들 및 막내 가 된다 ← 이러한 관계는 각각에 대해 서로 상대적이다!

                                        
                                            div p { .. } /* div에 속한 모든 p 요소들(후손들: 자식, 손자, ..) */
                                            div > p { .. } /* div 내부 바로 밑 단계에 위치한 p 요소들(자식들) */
                                            h1 ~ p { .. } /* h1과 같은 단계에서 뒤에 나오는 모든 p 요소들(모든 형제들) */
                                            h1 + p { .. } /* h1과 같은 단계에서 바로 뒤에 나오는 p 요소 하나(바로 아래 형제) */
                                        
                                    

* cf) 전체 선택자 *는 모든 하위 요소를 대상으로 한 스타일 적용에 사용되는데, 보통 문서의 기본 스타일 초기화에 사용된다:

                                    
                                        * { margin: 0; padding: 0; } /* html 문서 전체 스타일 정의 */

                                        html, body { /* html과 body 전체 스타일 정의 */
                                            margin: 0 auto; padding: 0;
                                        }
                                    
                                

1. 위 코드와 그 결과를 대충 보아하니.. > 기호(= 부모>자식 관계)는 앞의 부모요소 <ol> 내부에 자식요소 <li>를 만들라는 것인데, li*3이니 3개 만들라는 것 같습니다 ← 일단, 위 결과로 보아 *는 >보다 우선순위가 높군요: ol > (li*3)

2. 거기서, 다시 뒤에 >a가 붙어 있는데, 각 <li> 요소 안에다 <a> 요소를 만들어주어야 할 듯합니다: ol > ((li*3) > a)

* cf) 앞쪽의 > 기호에 뒤쪽에도 > 기호가 있네요. 아마도 같은 기호 사이에서는 뒤에서부터 계산해오는 듯한데.. 이런 경우에는; 같은 넘들끼리 우선순위를 따지기보다는 괄호를 사용해주는 것이 좀 더 알기쉽고 깔끔할 듯합니다. 이하, 모두,, 직접 코딩하고 하나 하나 따져보면서 스스로 결과를 확인해보십시오..

1. () 기호의 의미는 잘 알고 있을 터이고.. 부모요소 <dl>을 만들고, 그 안에서 자식요소 <dt>와 <dd>를 만들라는 것이니 + 기호는 형제 요소를 의미하는 것 같군요

2. (dt+dd)에 다시 *2가 붙어 있군요. *가 >보다 우선순위가 높은건 위에서 이미 보았고, ()는 무엇보다도 우선순위가 높다는거 잘 알지요? dl > ((dt+dd) * 2)

1. <div> 요소를 하나 만들고, 그 옆에 형제요소 <div>를 붙여주고, 그 안에 자식요소 <p>를 만들라는군요: div + (div>p) ← 좀 헷갈리지만.. +보다 > 기호가 우선순위가 높군요

2. 그 다음에 ^h5가 붙어 있는데, 이것은 바로 앞의 div>p를 벗어나서 <h5> 요소를 만들라는 얘기입니다. 곧, 앞 블록에서 바깥으로 나가서 (앞 블록과)형제요소가 되라는의미입니다: div + ((div>p) ^ h5)

1. 이곳은 시작은 위쪽과 같은데, 맨 끝에는 그와 다르게 +h5가 붙어 있군요. 이것은 바로 앞 블록 <div> 안에서 p+h5를 만들라는 얘기입니다: div + (div > (p+h5)) ← 위에서와는 달리, 여기서는(?) >보다 + 기호가 우선순위가 높군요 ㅎ

2. 다시 부연하자면; 앞 블록과의 관계에서 ^ 기호는 앞 블록에서 바깥으로 빠져 나가라는 의미인 반면, + 기호는 앞 블록 내부에서 맨 뒤에 붙이라는(앞 블록 내부의 자식요소가 되라는) 이야기입니다 ← 위에서 > 기호가 둘일 때 뒤에서부터 계산해오던 것처럼, + 기호 또한 마찬가지입니다!

☞ <div> 요소를 만들고, 그 안에서 h5*3를 만들어 각각의 <h5> 요소 아래(즉, 부모요소 내부에) <span> 요소를 하나씩 (자식요소로)편입시키라는 이야기입니다: div > ((h5*3) > span)

☞ (위쪽 코드에다)뒤에 +p를 붙였는데, 위에서 보았듯이, 블록 뒤에 붙는 +는 블록 뒤에다 붙이라는 얘기입니다 ← 우선순위만으로 기호간 우열을 따지는 건 좀 애매한 점이 많고.. 이런 경우의 + 기호는 앞 블록의 뒤에 배치되는, (앞 블록의)형제요소가 되라는 뜻으로 받아들이면 됩니다: div > (((h5*3) > span) + p)

☞ #id명은 <div> 요소의 id="값"으로 id명 을 넣어주고, .class명은 class="값"으로 class명 을 넣어주는데, 클래스 이름은 .class명1.class명2 식으로 복수로 붙여줄 수 있습니다 ← # 및 .은 우선순위가 가장 높습니다 - ()보다도 우선입니다!

☞ 일단, <ul> 요소 아래에 class명을 붙인 <li> 요소를 3 개 만들라는 건 알겠는데.. 그런데, class명 뒤에 $ 기호가 또 붙어있네요? 이것은 class명 뒤에 (순서)번호를 붙여주라는 이야기입니다: class명1.class명2.class명3 ← .이 여럿일 때는 앞에서부터 순차적으로 나아갑니다!

(! 아래 코드는 위와 같은데, $이 2개 붙어있네요? 직접 코딩하여 확인해보시라고 답은 적지 않았습니다 ㅡㅡ;)

                                    
                                        ul>li.class$$*3 ⤶
                                    
                                

░ 이 외에도 더 많은 복잡한 표기법들이 있지만, 다 살펴볼 필요는 없을 듯합니다. 한 예로, p{텍스트} ⤶ 방식으로 태그와 함께 안에 들어갈 텍스트도 동시에 넣어줄 수 있지만, p ⤶ 하고나면; 곧바로 커서가 텍스트 입력 위치에 놓여져 바로 내용을 적을 수 있고, 여러 곳에 같은 것을 입력할 경우에도 Alt+드래그 및 Ctrl+클릭이 있으니 굳이 더 어렵게 기억하며 다 배워야할 필요는 없다는 생각입니다 ← 에밋코딩 기법들 다 배우자면 두뇌 훈련에는 상당히 유용할 듯하지만.. 그런 목적이 아니라면; 코딩 시의 단순 손노동을 줄여주는데 필요한 정도로만 익혀두시면 될 듯합니다 ^^

                                        
                                            <body>
                                                인라인 스크립트 작성하기
                                            
                                                <script>
                                                    console.log("이스케이프 문자: \u03c0") // 이스케이프 문자: π
                                                    console.log("웃는 얼굴 이모지: \u{1F600}") // 웃는 얼굴 이모지: 😀
                                                </script>
                                            </body>
                                        
                                    

                                        
                                            /* _js.js 파일 */
                                            console.log("이스케이프 문자: \u03c0") // 이스케이프 문자: π
                                            console.log("웃는 얼굴 이모지: \u{1F600}") // 웃는 얼굴 이모지: 😀
                                        
                                    

                                        
                                            <!-- _js.html 문서 -->
                                            <body>
                                                스크립트 불러오기
    
                                                <script src= "_js.js"></script>
                                            </body>
                                        
                                    

* cf) 웹문서의 html 코드는 일반적으로 위에서 아래로 순서대로 로드되고 실행된다. 따라서, 적용하려는 html 및 Css 코드보다 스크립트가 먼저 불려지면 오류가 발생할 수 있다. 그런 이유로 인라인 스크립트 코드는 </body> 직전에 넣어주어야 한다!

                                    
                                        <body>
                                            ..
                                        
                                            <!-- 1. html 코드 내부에 넣는 스크립트 코드는
                                                이벤트 리스너에서 'DOMContentLoaded' 속성을 사용해주어야 한다
                                            -->
                                            <script>
                                                document.addEventListener("DOMContentLoaded", () => { // DOM이 다 로드된 이후.. ← 이는 defer와 같다!
                                                    // 스크립트 코드 실행
                                                })
                                            </script>
                                        
                                            <!-- 2. </body> 바로 직전에 넣어준 스크립트 코드는
                                                'DOMContentLoaded'를 사용하지 않아도 defer와 같은 방식으로 작동한다!
                                            -->
                                            <script>
                                                const buttons= document.querySelectorAll("button")
                                        
                                                for(const button of buttons) {
                                                    button.addEventListener("click", createParagraph);
                                                }
                                            </script>
                                        </body>
                                    
                                

☞ 이 경우, 모든 html 코드를 읽어온 이후 스크립트를 불러오게 되지만, 문제는 DOM을 모두 불러오기 전에는 스크립트의 로딩과 분석 또한 완전히 중단된다는 점이다!

                                        
                                            <!-- 1. 외부 스크립트 파일 불러오기: 'defer' -->
                                            <script src="js/default-js.js" defer></script>
                                        
                                    

                                        
                                            <!-- 2. 외부 스크립트 파일 불러오기: 'async' -->
                                            <script src="js/default-js.js" async></script>
                                        
                                    

                                    
                                        a= 1 // 줄바꿈이 있어 세미콜론 생략 가능
                                        b= 10
                                        x= 1; y= 10 // 한 라인에 작성할 때는 앞쪽 세미콜론은 생략할 수 없다!
                                    
                                

☞ 자바스크립트가 줄바꿈을 세미콜론으로 취급하는 경우는 묵시적인 세미콜론을 추가하지 않고서는 코드를 분석할 수 없을 때, 곧 줄바꿈 다음에 오는 공백 아닌 문자를 현재 문에 이어진다고 판단할 수 없을 때이다 ← 예컨대, (나 [로 시작하는 문이 이어질 때 세미콜론으로 구분되지 않는다면; 하나의 연결된 문으로 해석될 소지가 있다!

                                    
                                        console.log("이스케이프 문자: \u03c0") // π
                                        console.log("웃는 얼굴 이모지: \u{1F600}") // 😀
                                    
                                

☞ 이스케이프 시퀀스는 주로 문자열 리터럴이나 정규식 리터럴에서 사용되는데.. \u로 시작하여 4개의 16진수 숫자를 적거나, 또는 (16비트 이상이 필요한 이모지를 표시하기 위하여)1~6자리의 숫자를 넣어주는 중괄호({}) 문법으로 작성한다

                                    
                                        const a= [2, 4, 6];
                                        console.log("길이", a.length, "임"); // 길이 3 임 ← ,는 공백으로 연결한다!
                                        console.log("길이" + a.length + "임"); // 길이3임 ← +는 공백없이 붙여서 연결한다!
                                    
                                        const name= 'Lee', height= 170;
                                        console.log("이름은 %s, 키는 %d임", name, height); // 이름은 Lee 키는 170 ← 서식 문자열 변수 지정!
                                    
                                

☞ 서식 문자열이 주어지면; %s, %f, %d, %o는 각각 문자열, 실수, 정수, 객체로 변환하여 표시해준다!

                                        
                                            document.write("<h5>String</h5>"); // 문자열에 html 태그 적용
                                            document.write(`10 + 2 = ${10 + 2}`); // 템플릿 안에서 수식 계산
                                        
                                    

                                    
                                        /* 스크립트 코드 */
                                        let weatherPic= document.querySelector('#today-weathers') // 이벤트 대상 ← 위 질문 버튼

                                        function cPic() { // 이벤트 처리함수
                                            const res= prompt("오늘 날씨 질문: ", "좋아요? 나빠요?") // 질문, 초기값 ← [확인] 시는 입력한 값이, [취소] 시는 null이 res에 들어간다

                                            if (res) alert(`음~ ${res}`) // 대답한 경우; 답한 내용을 표시한다
                                            else confirm("엥~ 그냥 나가나요?") // 취소를 누른 경우
                                        }

                                        weatherPic.onclick= cPic // 이벤트 대상(pic)에서 클릭 이벤트가 발생하면; 이벤트 처리함수 cPic()을 호출한다
                                    
                                

(* 아래 리스트의 짐승들에 관한 질문에 미리 답변을 적어두고서 각각 한번씩 클릭하면서 정답을 확인해보세요..)

• 새는 영어로?
• 물고기는 영어로?
• 인간은 한글로?

                                    
                                        /* [data- 속성 사용하기] */
                                        function showDetails(list) { // 클릭한 li 요소를 인자로 받는다
                                            let animalType= list.dataset.animal; // 변수 animalType에 data-animal의 "값"을 가져와서 넣어준다
                                            // let animalType= list.getAttribute("data-animal"); 와 같다!

                                            alert(list.textContent + " " + animalType); // li에 들어있는 텍스트 + " " + data-animal의 "값"
                                        }
                                    
                                

☞ 사용자가 위 <li> 중 하나인 인간은 한글로?를 클릭하면(onclick); showDetails로 이름붙여진 스크립트 함수를 호출하면서(함수명 뒤에 붙은 괄호는 함수를 호출한다는 의미이다!) 이 this(= 호출한 li 요소)를 인자로 전달하고, 호출받은 함수에서는; 이 인자를 매개변수로 받아 함수 내부에 정의된대로 적절한 처리를 하여 다시 호출자(= 사용자가 클릭한 <li> 요소)에게 돌려보내게 됩니다만, 음~ 좀 어렵군요 ㅡㅡ;

░ 자바스크립트 및 이벤트, html-DOM 등에 관해서는; 나중에 관련 강좌들에서 따로 공부하기로 하고, 여기서는 html 학습 과정상 간단히라도 이해하고 넘어가야 할 내용만 간략히 살펴봤습니다..

✓ 코딩 중 색상을 설정해줄 경우, Web 컬러피커 같은 곳을 찾아가서 적절한 색을 클릭하여 그 표시되는 16진수 색상값을 가져와서 넣어주시면 됩니다: 글자색 넣기 ← <span style="color: #d6a64c;">글자색 넣기</span>

* cf 1) 색상명에는 뒷 배경이 그대로 보이는, 즉 완전한 투명을 의미하는 transparent 키워드도 사용할 수 있다. 한편, Background(바탕화면 배경색), Highlight(선택한 항목에 대한 강조 색상) 등은 시스템 운영체제에 의해 정의되는 색상명 키워드이다 ← 대/소문자를 구분한다!

* cf 2) currentColor 키워드는 color 속성의 계산된 동적 값이다 ← 예컨대, currentColor 를 정의하는 요소에 정의된 색상값이 없는 경우; 대신 상위 부모요소의 색상을 물려받게 된다!

                                    
                                        .colors_element {
                                            width: auto; height: 200px;
                                            color: rgb(63, 59, 59); /* 글자색 */
                                            background: linear-gradient(#e1e5de, #a0a7a0); /* 그라디언트 배경색 */
                                            border: 10px solid; border-radius: 10px;
                                            border-top-color: lightsteelblue; /* 박스 테두리 색상*/
                                            border-right-color: lightsteelblue;
                                            border-bottom-color: lightslategray;
                                            border-left-color: slategray;
                                            box-shadow: 0px 0px 20px rgba(92, 89, 89, 0.9); /* 박스 그림자 색상*/
                                        }
                                    
                                

✓ 참고로, 강조를 위해 색상에만 의존하는 것은 좋지않다. 색상 외에도 텍스트 설명 및 아이콘을 적절하게 활용해주는 것이 접근성 측면에서 유익하다 ← 특히, 적색과 녹색은 색맹인 사용자가 상태 변화를 보는 데 어려움을 겪거나 심지어 완전히 놓칠 수도 있다!

☞ 위 <div> 요소의 배경색은 검정색이지만(background-color: rgb(0 0 0);), 여기에 0.3의 알파값을 주어 배경색을 (30%)투명하게 해준 것입니다: background-color: rgb(0 0 0 / 0.3);

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

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

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

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

☞ 최신 브라우저들은 대부분 Webp 이미지를 기본 지원하고 있으니, 일반 이미지를 넣어줄 때와 같은 방식으로 사용해도 됩니다: <img src="image.webp" width="400" height="200" alt="Webp image">

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

☞ <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 속성값을 비워두었지만, 필요하다면; 저 각각의 영역들에 웹문서 등을 링크해줄 수 있습니다 ← 여기서는 이미 알고 있는 사각형의 크기를 기준으로 각 영역의 범위를 지정해주었지만, 이미지 편집 프로그램을 이용하면 특정(모양에 맞추어진) 영역 좌표를 확인하여 설정해줄 수도 있습니다!

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에서의 폼은 이 정도만 알아도 됩니다. 다 다루자면 열배 정도의 분량은 더 필요하지먄; 실제로는 대개 부트스트랩 폼을 쓰거나, 폼 관련 플러그인 라이브러리를 가져다 쓰는 것이 일반적입니다 - html 테이블 또한 마찬가지입니다

                                        
                                            <body>
                                                <div id="calendar"></div>

                                                ..

                                                <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
                                                <script>
                                                    document.addEventListener('DOMContentLoaded', function() {
                                                        var calendarEl= document.getElementById('calendar')
                                                        var calendar= new FullCalendar.Calendar(calendarEl, {
                                                            initialView: 'dayGridMonth'
                                                        });
                                                        calendar.render()
                                                    });
                                                </script>
                                            </body>
                                        
                                    

░ 이 달력은 달리 꾸며주지 않은, 가장 기본적인 형태입니다. 더 필요하시면; 공식사이트 매뉴얼을 참고하여 자신만의 멋진 달력을 만들어 쓰십시오..