HTML Element

devdocs: https://devdocs.io/dom/htmlelement

MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

μ˜ˆμ‹œ λ”°λΌν•˜κΈ°: https://codesandbox.io/s/staging-feather-jthzn / https://jthzn.csb.app/

HTML Element μΈν„°νŽ˜μ΄μŠ€λŠ” λͺ¨λ“  μ’…λ₯˜μ˜ HTML elementλ₯Ό λ‚˜νƒ€λ‚Έλ‹€.(?) μ–΄λ–€ elements μ§μ ‘μ μœΌλ‘œ 이 μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ΅¬ν˜„ν•˜λŠ” 반면, λ‹€λ₯Έ element듀은 그것을 μƒμ†ν•˜λŠ” μΈν„°νŽ˜μ΄μŠ€λ₯Ό 톡해 κ΅¬ν˜„ν•œλ‹€.

Properties

λΆ€λͺ¨μΈ Element의 속성을 μƒμ†ν•œλ‹€. DocumentAndElementEventHandlers, ElementCssInlineStyle, GlobalEventHandlers, HTMLOrForeignElement, TouchEventHandlers의 속성을 κ΅¬ν˜„ν•œλ‹€.

  • HTMLElement.accessKey

    μš”μ†Œμ— ν• λ‹Ήλœ accessKeyλ₯Ό λ‚˜νƒ€λ‚΄λŠ” DOMString 이닀.

    accessKeyκ°€ λ­”κ°€ ν–ˆλ”λ‹ˆ 단좕킀?

    accessKey: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey Macμ—μ„œλŠ” control + option + keyλ₯Ό ν–ˆμ„ λ•Œ 속성이 λ¨ΉνžŒλ‹€.

  • HTMLElement.accessKeyLabel (Read only)

    μš”μ†Œμ— ν• λ‹Ήλœ accessKeyλ₯Ό ν¬ν•¨ν•˜λŠ” DOMString을 λ°˜ν™˜ν•œλ‹€. μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 경우 λΉˆλ¬Έμžμ—΄μ„ λ°˜ν™˜ν•œλ‹€.

    Syntax

    label = element.accessKeyLabel

    Example

    <body>
        <div id="app">
          <button accesskey="h" title="Caption" id="btn1">Hover me</button>
        </div>
    
        <script>
          const node = document.querySelector("#btn1");
          if (node.accessKeyLabel) {
            console.log("1");
            node.title += " [" + node.accessKeyLabel + "]";
          } else {
            console.log("2");
            node.title += " [" + node.accessKey + "]";
          }
    
          node.onclick = function() {
            const p = document.createElement("p");
            p.textContent = "Clicked!";
            node.parentNode.appendChild(p);
          };
        </script>
      </body>

    웃기닀. 예제라고 λ”°λΌν•˜λŠ”λ° 무쑰건 if (node.accessKeyLabel) 이 μ‘°κ±΄λ¬Έμ—μ„œ falseλ₯Ό 타고 μ½”λ“œλ₯Ό μΉ λ•Œ accessKeyLabel이 μžλ™μ™„μ„±μœΌλ‘œ μ•ˆλœ¬λ‹€. https://codesandbox.io/s/staging-feather-jthzn

  • HTMLElement.contentEditable

    이것은 DOMString이고 elementλŠ” μˆ˜μ •κ°€λŠ₯ ν•˜λ‹€λ©΄ true, κ·Έλ ‡μ§€μ•Šλ‹€λ©΄ false 근데 DOMString inheritλŠ” λΆ€λͺ¨μ˜ μˆ˜μ •κ°€λŠ₯ν•œ μƒνƒœλ₯Ό μƒμ†ν•œλ‹€.

  • HTMLElement.isContentEditable

    μš”μ†Œμ˜ μˆ˜μ •μ—¬λΆ€λ₯Ό boolean으둜 return ν•΄μ€€λ‹€. flagλŠ” μ§„μ§œ is둜 μ‹œμž‘..

    syntax

    editable = element.isContentEditable

    Example

    <body>
        <p class="p1">p1</p>
        <p class="p2" contenteditable="true">p2</p>
    
        <script>
          const p1 = document.querySelector(".p1");
          const p2 = document.querySelector(".p2");
    
          console.log("p1.isContentEditable", p1.isContentEditable); // false
          console.log("p1.isContentEditable", p2.isContentEditable); // true
    
          console.log("typeof", typeof p2.isContentEditable); // 'boolean'
        </script>
      </body>
  • HTMLElement.contextMenu

    더이상 μ‚¬μš©λ˜λ©΄ μ•ˆλ˜μ§€λ§Œ μ•„λ§ˆ μ‚¬μš©λ˜κ³  μžˆμ„ 것이닀. element와 κ΄€λ ¨λœ contextual menuλ₯Ό λ‚˜νƒ€λ‚΄λŠ” HTMMenuElement이닀. μ•„λ§ˆλ„ null..

  • HTMLElementOrForeignElement.dataset (READ ONLY)

    custom data attributes (data-*) elementλ₯Ό scriptμ—μ„œ 읽고 μ“Έ 수 μžˆλŠ” DomStringMap으둜 return ν•΄μ€€λ‹€. 이 AccessλŠ” DOMκ³Ό HTML μ—μ„œ κ°€λŠ₯ν•˜λ‹€. 읽기만 κ°€λŠ₯ν•˜κ³  직접 μ“Έ 수 μ—†λ‹€. data- data- μ‹œμž‘ν•΄μ•Όν•œλ‹€.

    html: 문자, 숫자 λŒ€μ‹œ(-), 점(.), 콜둠(:), μ–Έλ”μŠ€μ½”μ–΄(_) λŠ” μ‚¬μš©κ°€λŠ₯ν•˜μ§€λ§Œ λŒ€λ¬ΈμžλŠ” μ‚¬μš©ν•  수 μ—†λ‹€.

    javascript: μΉ΄λ©œμΌ€μ΄μŠ€λ‘œ μ“°κ³  λŒ€μ‹œ 점등을 λͺ¨λ‘ 제거 λ„€μž„ μ»¨λ²€μ…˜ dash-style -> camelCase 둜 λ³€ν™˜, 이 κ·œμΉ™λŒ€λ‘œ DOMStringMap의 Key둜 λ³€ν™˜λœλ‹€.

    • 접두어 data-λŠ” μ‚­μ œλœλ‹€.

    • a-zκΉŒμ§€ μ†Œλ¬Έμž μ•žμ— μ˜€λŠ” λͺ¨λ“  λŒ€μ‹œλŠ” μ‚­μ œ, μ†Œλ¬ΈμžλŠ” -> λŒ€λ¬Έμžλ‘œ

    camelCase -> dash-style둜 λ³€ν™˜

    • λ³€ν™˜μ „ a-z μ†Œλ¬Έμžλ‘œ μ“Έ 수 μ—†λ‹€.

    • dash-κ°€ μΆ”κ°€λœλ‹€.

    • λŒ€λ¬ΈμžλŠ” μ†Œλ¬Έμžλ‘œ λ³€ν™˜λœλ‹€.

    • λ‹€λ₯Έ λ¬ΈμžλŠ” λ³€ν™˜λ˜μ§€ μ•ŠλŠ”λ‹€.

    value에 μ ‘κ·Όν•˜κΈ°

    • element.dataset.keyname κ³Ό 같이 camelCase keyλ₯Ό μ‚¬μš©ν•΄μ„œ μ„€μ •ν•˜κ±°λ‚˜ 읽을 수 μžˆλ‹€.

    • element.dataset[keyname] 도 κ°€λŠ₯

    • in operatorλ₯Ό μ΄μš©ν•˜μ—¬ attribute의 μ‘΄μž¬μ—¬λΆ€λ₯Ό μ•Œ 수 μžˆλ‹€.

    valueλ₯Ό μ„€μ •ν•˜κΈ°

    • valueκ°€ μ„€μ •λ˜λ©΄ 항상 λ¬Έμžμ—΄μ΄λ‹€.

    • delete operatorλ₯Ό μ—¬κΈ°μ„œλ„ μ‚¬μš©ν•  수 μžˆλ‹€.

    syntax

    const dataAttrMap = element.dataset

    return value

    A DOMStringMap.

    <div id="user" data-id="1234567890" data-user="sla" data-data-of-birth>sla</div>
    const el = document.querySelector('#user');
    
    console.log('user' in el.dataset); // true
    
    el.dataset.dataOfBirth = '04-27';
    
    delete el.dataset.id;
    
    console.log('id', 'id' in el.dataset); // false
    
    el.dataset.someDataAttr = 'mydata'
    
    console.log('someDataAttr', 'someDataAttr' in el.dataset); // ture

    헐.. μ €λŸ° λ„€μž„ μ»¨λ²€μ…˜μ΄ μžˆλŠ” 쀄 λͺ°λžλ„Ή.

  • HTMLElement.dir

    λ°©ν–₯을 λ‚˜νƒ€λ‚΄λˆˆ global attributeλ₯Ό DOMString으둜 λ°˜ν™˜ν•œλ‹€. κ°€λŠ₯ν•œ 값은 "ltr", "rtl", "auto"이닀. ν…μŠ€νŠΈλ₯Ό μ“°λŠ” λ°©ν–₯을 μ„€μ •ν•˜κ±°λ‚˜ κ°€μ Έμ˜¬ λ•Œ μœ μš©ν•˜λ‹€. μ•„λžμ–΄μ™€ νžˆλΈŒλ¦¬μ–΄λŠ” RTL λ°©ν–₯성을 μ‚¬μš©ν•˜λŠ” λŒ€ν‘œμ μΈ 언어이닀. 이미지에 μ†μ„±μœΌλ‘œλ„ μ‚¬μš©ν•  수 μžˆλ‹€. titleκ³Ό altκ°€ rtl 포맷으둜 μ •μ˜λœλ‹€. πŸ™€ ν…Œμ΄λΈ”μ—μ„œ μ •μ˜λ  경우 μ—΄μ˜ μˆœμ„œκ°€ 였λ₯Έμͺ½μ—μ„œ μ™Όμͺ½μœΌλ‘œ λ°°μ—΄λœλ‹€.

    auto둜 μ„€μ •λ˜μ–΄ μžˆλŠ”κ²½μš° 첫번째 λ¬Έμžλ‚˜ λΆ€λͺ¨μš”μ†Œμ˜ λ°©ν–₯성을 κΈ°μ€€μœΌλ‘œ ν•œλ‹€.

    Syntax

    let currentWritingDirection = elementNodeReference.dir;
    elementNodeReference.dir = newWritingDirection;
    • currentWritingDirection λŠ” ν˜„μž¬ element의 ν…μŠ€νŠΈ μ“°κΈ° λ°©ν–₯을 λ‚˜νƒ€λ‚΄λŠ” λ¬Έμžμ—΄ λ³€μˆ˜μ΄λ‹€.

    • newWritingDirection 은 ν…μŠ€νŠΈ μ“°κΈ° λ°©ν–₯의 값을 λ‚˜νƒ€λ‚΄λŠ” λ¬Έμžμ—΄ 값이닀.

    'ltr' -> left to right

    'rtl' -> right to left

    'auto' -> element의 content에 따라 κ²°μ •λ˜μ–΄μ•Ό ν•œλ‹€.

    <div class="name">my name is sla</div>
    const el = document.querySelector(".name");
    el.dir = "rtl";

    일단 였λ₯Έμͺ½ 끝에 뢙은 정렬이 됐음.. πŸ€”

    μ•”νŠΌ 이런게 μžˆμ—ˆλ‹€λ‹ˆ.. 🀭

  • HTMLElement.draggable μš”μ†Œκ°€ dragκ°€ κ°€λŠ₯ν•œμ§€ Boolean으둜 λ°˜ν™˜ν•œλ‹€.

  • HTMLElement.dropzone dropzone이 더이상 쓰이지 μ•ŠλŠ”λ‹€. λͺ¨λ“  λΈŒλΌμš°μ €κ°€ μ§€μ›ν•˜μ§€ μ•ŠμŒ.

  • HTMLElement.hidden

    elementκ°€ hidden인지 μ•„λ‹Œμ§€λ₯Ό Boolean κ°’μœΌλ‘œ λ‚˜νƒ€λ‚Έλ‹€. λͺ¨λ“  presentation modeμ—μ„œ μ μš©λœλ‹€. μ‚¬μš©μžκ°€ μ ‘κ·Ό ν•  수 μžˆλ„λ‘ λ˜μ–΄ μžˆλŠ” μ½˜ν…μΈ λ₯Ό 숨기기 μœ„ν•΄ μ‚¬μš©ν•΄μ„œλŠ” μ•ˆλœλ‹€. css의 displayλ₯Ό μ‚¬μš©ν•΄μ„œ μ œμ–΄ν•˜λŠ”κ²ƒκ³Ό λ‹€λ₯΄λ‹€. hidden을 μ μ ˆν•œ μ‚¬μš© 사둀

    • ν˜„μž¬λŠ” 관련이 μžˆμ§€λ§Œ λ‚˜μ€‘μ— ν•„μš”ν•  수 μžˆλŠ” μ½˜ν…μΈ 

    • 이전엔 ν•„μš”ν–ˆμ§€λ§Œ 더 이상 ν•„μš”ν•˜μ§€ μ•Šμ€ μ½˜ν…μΈ 

    • νŽ˜μ΄μ§€ λ‹€λ₯Έ λΆ€λΆ„μ—μ„œ ν…œν”Œλ¦Ώμ²˜λŸΌ μž¬μ‚¬μš©λ˜λŠ” μ½˜ν…μΈ  (?)

    • drawing buffer offscreen canvas λ§Œλ“€λ•Œ?? drawing buffer은 μ§„μ§œ λͺ¨λ₯΄κ² λ‹€ offscreen canvas: off screen λ Œλ” ν•  수 μžˆλŠ” canvasλ₯Ό μ œκ³΅ν•œλ‹€. window와 worker contextμ—μ„œ μ‚¬μš©ν•  수 μžˆλ‹€. web workers 단일 μ“°λ ˆλ“œμ—μ„œ μ‹€ν–‰ν•˜κ³  μ‹Άμ§€ μ•Šμ„λ•Œ.. λ³„λ„μ˜ background threadμ—μ„œ μ‚¬μš©ν•˜κ³  μ‹Άμ„λ•Œ

      λΆ€μ μ ˆν•œ μ‚¬μš© 사둀

    • tab이 μžˆλŠ” dialog box μ—μ„œ pannel 숨기기

    • ν•œ contentμ—μ„œ ν•œ presentation을 μˆ¨κΈ°λ©΄μ„œ λ‹€λ₯Έ presentation을 λ³Ό 수 있게 함

      β‡’ μ•„λ§ˆ μ ‘κ·Όμ„± κ΄€λ ¨λœκ²Œ μ•„λ‹κΉŒ 생각이 듬.. λˆˆμ— 보이진 μ•Šμ§€λ§Œ 리더기둠 읽을 수 μžˆλŠ” κ·ΈλŸ°κ²ƒλ“€.. κ·Έλž˜μ„œ λˆˆμ—λ§Œ μ•ˆλ³΄μ΄λŠ”κ²Œ hidden을 μ‚¬μš©ν•˜λŠ” 곳은 μ§€κΈˆμ€ μ‚¬μš©ν•˜μ§„ μ•Šμ§€λ§Œ λ‚˜μ€‘μ— μ‚¬μš©λ , ν˜Ήμ€ 이젠 더이상 ν•„μš”μ—†λŠ”κ²ƒλ“€ ν•œμ •μΈκ±° κ°™λ‹€. μ΄λŸ΄λ• cssμš”μ†Œλ₯Ό μ΄μš©ν•˜λΌλŠ” 뜻 κ°™μŒ

      Elements that are not hidden must not link to elements which are.

      β€˜Hidden’ ν•΄μ£Όμ§€ μ•Šμ€ μš”μ†ŒλŠ” β€˜Hiddenβ€™ν•œ μš”μ†Œμ™€ μ—°κ²° μ‹œν‚€μ§€ μ•Šμ•„μ•Ό ν•œλ‹€.

      Syntax

      isHidden = HTMLElement.hidden;
      
      HTMLElement.hidden = true | false;

    Value

    viewμ—μ„œ 숨겨져 μžˆλ‹€λ©΄ true, μ•„λ‹ˆλ©΄ false

    <div id="welcome" class="panel">
        <h1>welcome</h1>
        <button class="button" id="okButton">OK</button>
    </div>
    
    <div id="awesome" class="panel" hidden>
        <h1>Thanks!</h1>
        <p>Thank you!</p>
    </div>
    
    document.querySelector("#okButton").addEventListener("click", function() {
      document.querySelector("#welcome").hidden = true;
      document.querySelector("#awesome").hidden = false;
    }, false);

    addEventListener의 3번째 μΈμžλŠ” options

    • options

      • capture: DOM 트리의 ν•˜λ‹¨μ— μžˆλŠ” EventTarget 으둜 μ „μ†‘ν•˜κΈ° 전에, λ“±λ‘λœ listener 둜 이 νƒ€μž…μ˜ 이벀트의 전솑여뢀λ₯Ό λ‚˜νƒ€λ‚΄λŠ” Boolean ? 헐 EventTargetκ³Ό CurrentTarget μ–˜κΈ°μΈκ°€.. EventTarget도 μ œμ–΄κ°€ κ°€λŠ₯ν•˜κ΅¬λ‚˜..

      • once: λ¦¬μŠ€λ„ˆκ°€ μΆ”κ°€ν•œ ν›„ ν•œλ²ˆλ§Œ 호좜

      • passive: 이건 μ²˜μŒλ³΄λ„€.. true일 λ•Œ listenerμ—μ„œ μ§€μ •ν•œ ν•¨μˆ˜κ°€ preventDefault()λ₯Ό ν˜ΈμΆœν•˜μ§€ μ•ŠμŒμ„ λ‚˜νƒ€λ‚΄λŠ” Boolean으둜 λ‚˜νƒ€λ‚Έλ‹€.. 헐? 이런게..

    • useCapture μœ„μ—μ„œ μ•„λž˜λ‘œ 흐λ₯΄λŠ” captureκ³Όμ •

      modern browsersλŠ” capture라고 λΆˆλ¦¬λŠ” 것을 ν•œλ‹€.

      elementλ₯Ό ν΄λ¦­ν•˜λ©΄ 그것은 μœ„μ—μ„œ μ•„λž˜λ‘œ ν˜λŸ¬λ‚΄λ¦°λ‹€.

      λΈŒλΌμš°μ €λŠ” "λ„ˆ body도 ν΄λ¦­ν•˜κ³ , one도 ν΄λ¦­ν•˜κ³  two도 ν΄λ¦­ν•˜κ³  three도 ν΄λ¦­ν–ˆλ„€" ν•˜κ³  μΈμ‹ν•œλ‹€.

      μ‹€μ œλ‘œ μœ„μ—μ„œ μ•„λž˜λ‘œ λ‚΄λ €κ°€λ‹€κ°€, λͺ¨λ“  이벀트λ₯Ό λ‚΄κ°€ ν΄λ¦­ν•œ 곳에 "captures" λ₯Ό ν•˜κ³  λ³΄κ΄€ν•œλ‹€.

      ν•˜μ§€λ§Œ μ΄λ²€νŠΈλŠ” μ‹€ν–‰λ˜μ§€ μ•ŠλŠ”λ‹€. 그럼 이제 ν΄λ¦­ν•œ κ³³μ—μ„œ "bubble Up"이 μΌμ–΄λ‚œλ‹€.

  • HTMLElement.inert

    User agent - μ‚¬μš©μžλ₯Ό λŒ€μ‹ ν•˜μ—¬ 일을 μˆ˜ν–‰ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ μ—μ΄μ „νŠΈμ΄λ‹€. 예λ₯Ό λ“€μ–΄, 이메일 λ¦¬λ”μ—μ„œλŠ” 메일 μ‚¬μš©μž μ—μ΄μ „νŠΈμ΄κ³ , μ‚¬μš©μž μ—μ΄μ „νŠΈλ₯Ό λœ»ν•˜λŠ” μš©μ–΄μΈ μ„Έμ…˜ κ°œμ‹œ ν”„λ‘œν† μ½œμ—μ„œλŠ” 톡신 μ„Έμ…˜ μ–‘ μͺ½ 끝을 λ§ν•œλ‹€.(wikipedia)

    μœ μ € μ—μ΄μ „νŠΈκ°€ μ‚¬μš©μž μΈν„°λ ‰μ…˜ 이벀트, νŽ˜μ΄μ§€ λ‚΄ ν…μŠ€νŠΈ 검색("νŽ˜μ΄μ§€μ—μ„œ μ°ΎκΈ°"), ν…μŠ€νŠΈ μ„ νƒμ˜ λͺ©μ μœΌλ‘œ μ£Όμ–΄μ§„ λ…Έλ“œκ°€ μ—†λŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•΄μ•Όν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” Boolean 을 λ°˜ν™˜ν•©λ‹ˆλ‹€.

    inert="true" elementκ°€ κ°€μ§€κ³  μžˆλ‹€λ©΄ browserλŠ” ignore ν•œλ‹€.

    ν‚€λ³΄λ“œλ‘œ μ΄λ™ν•˜λŠ” μ‚¬μš©μžκ°€ μžˆλ‹€κ³  ν•˜μŸˆ

    햄버거 메뉴가 있고 β†’ μ»¨ν…μΈ λ‘œ μ΄λ™ν•˜λŠ”λ° 햄버거 메뉴 μ•ˆμ— μžˆλŠ” anchor tag λ‹€ 이동해야 μ»¨ν…μΈ λ‘œ μ΄λ™ν•œλ‹€.

    이λ₯Ό μ œμ–΄ν•˜κ³ μž ν• λ•Œ inert λ₯Ό μ‚¬μš©ν•˜κ²Œ λœλ‹€.

    https://youtu.be/fGLp_gfMMGU μ°Έκ³ 

  • HTMLElement.innerText

    node와 ν•˜μœ„ μžμ‹μ˜ rendered text λ‚΄μš©μ„ λ‚˜νƒ€λ‚Έλ‹€.

    innerText와 textContent의 차이가 μžˆλŠ”λ°

    innerTextλŠ” rendered appearanceλ₯Ό μ•Œκ³  μžˆλ‹€.

    <br>νƒœκ·Έλ₯Ό 같은걸 μΈμ‹ν•˜κ³ , hidden elementsλ₯Ό λ¬΄μ‹œν•œλ‹€.

  • HTMLElement.lang

    DOMString 을 λ°˜ν™˜ property element의 μš”μ†Œμ™€ text content의 κΈ°λ³Έμ–Έμ–΄λ₯Ό get, get κ°€λŠ₯ν•˜λ‹€. Tags for Identifying Languages μ •μ˜λœ language codeλ₯Ό return ν•œλ‹€. default valueλŠ” unknown 이닀. Syntax

     let languageUsed = elementNodeReference.lang; // get 
     elmentNodeReference.lang = NewLangyage; // set

    Example

     document.documentElement.lang // get
  • HTMLElement.noModule module scriptsλ₯Ό μ§€μ›ν•˜λŠ” μœ μ € μ—μ΄μ „νŠΈμ—μ„œ importν•œ scriptλ₯Ό μ‹€ν–‰ν•  수 μžˆλŠ”μ§€ μ—¬λΆ€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” Boolean이닀.

  • HTMLElement.nonce

    Content Security Policy 에 μ‚¬μš©ν•˜λŠ” ν•œλ²ˆλ§Œ μ‚¬μš©ν•  수 μžˆλŠ” μ•”ν˜Έν™”λœ 숫자λ₯Ό λ¦¬ν„΄ν•˜μ—¬ μ£Όμ–΄μ§„ fetch의 진행을 ν—ˆμš©ν• μ§€ 말지 μ—¬λΆ€λ₯Ό κ²°μ •ν•œλ‹€. scriptμ—μ„œλ§Œ nonce 속성이 λ…ΈμΆœλœλ‹€. Examples

    let nonce = script['nonce'] || script.getAttribute('nonce');

    getAttribute을 쓴건 κ³Όκ±° λΈŒλΌμš°μ €λ“€ 용, script['nonce'] μ΅œμ‹  λΈŒλΌμš°μ € μš©μ΄λ‹€. 졜근 λΆ€λΌμš°μ €μ—μ„œ accsessν•˜λŠ” 방법은 script['nonce'] μ΄λ ‡κ²Œ 밖에 μ—†λ‹€. nonce 데이터λ₯Ό μœ μΆœν•˜λŠ” 것을 λ°©μ§€ν•˜λŠ” 데 도움이 λœλ‹€. https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements 더 읽을 거리: https://developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_it

  • HTMLElement.spellcheck spell-checking 을 controlν•˜λŠ” Boolean이닀.. λ„€? 이런게 μžˆμ—ˆλ‹€κ³ μš”? πŸ™„

  • htmlelement.style CSSStyleDeclaration 이닀. μš”μ†Œμ˜ 인라인 μŠ€νƒ€μΌμ„ μ„€μ •ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λœλ‹€. getν•  λ•Œμ—λŠ” μš”μ†Œμ˜ 인라인 μŠ€νƒ€μΌ 속성에 μ •μ˜λœ λͺ¨λ“  μŠ€νƒ€μΌ 속성을 ν¬ν•¨ν•˜λŠ” css선언을 담은 CSSTyleDeclation 객체λ₯Ό λ°˜ν™˜ν•œλ‹€.

    Setting μ½κΈ°μ „μš©μ˜ CSStyleDeclation 객체λ₯Ό λ°˜ν™˜ν•˜κΈ° λ•Œλ¬Έμ— λ¬Έμžμ—΄μ„ 직접 ν• λ‹Ήν•˜λ©΄ μ•ˆλœλ‹€.(elt.style = "color: red" 같은 / elt.style.cssText = "color: blue; border: 1px solid black"; μ΄λ ‡κ²Œ ν•΄μ•Όν•œλ‹€. ) λ§Œμ•½ μŠ€νƒ€μΌ μ •μ˜κ°€ μ—¬λŸ¬κ°œ μžˆμ„ λ•Œ νŠΉμ • μŠ€νƒ€μΌλ§Œ λ³€κ²½ν•˜κ³ μž ν•œλ‹€λ©΄ νŠΉμ • μŠ€νƒ€μΌμ— μ ‘κ·Όν•΄μ„œ λ³€κ²½ν•˜λŠ”κ²Œ λ°”λžŒμ§ν•˜λ‹€. (elt.style.color = "..." 같이) λ˜λŠ” ( ele.setAttribute('style', '...')) μ‚¬μš©ν•˜μ—¬ μš”μ†Œ 전체λ₯Ό μž¬μ •μ˜ν•œλ‹€. kebab-caseκ°€ μ•„λ‹Œ calmel-case둜 λ˜μ–΄μžˆλ‹€. reset은 nullμ΄λ‚˜ ''λΉˆλ¬Έμžμ—΄ ν•˜μ§€λ§Œ IEλŠ” ''λΉˆλ¬Έμžμ—΄λ§Œ λ¨ΉνžŒλ‹€.

     // μ—¬λŸ¬ μŠ€νƒ€μΌμ„ μ •μ˜ ν•  λ•Œ.
     elt.style.cssText = "color: blue; border: 1px solid black";
     // Or
     elt.setAttrubute("style", "color:red; border: 1px solid black");
    
     // νŠΉμ • μŠ€νƒ€μΌλ§Œ λ°”κΏ€ λ•Œ
     elt.style.color = "blue";

    Getting 였직 인라인 μŠ€νƒ€μΌλ§Œ κ°€μ Έμ˜¨λ‹€. section μŠ€νƒ€μΌ κ·œμΉ™μ΄λ‚˜ μ™ΈλΆ€ μŠ€νƒ€μΌ sheet와 같은 λ‹€λ₯Έ κ·œμΉ™ μŠ€νƒ€μΌμ„ κ°€μ Έμ˜€μ§€ μ•ŠλŠ”λ‹€. μš”μ†Œμ˜ λͺ¨λ“  μŠ€νƒ€μΌ μš”μ†Œλ₯Ό κ°€μ Έμ˜€κ³  μ‹Άλ‹€λ©΄ window.getComputedStyle()λ₯Ό λŒ€μ‹  μ‚¬μš©ν•˜λΌ!

Last updated

Was this helpful?