์นดํ…Œ๊ณ ๋ฆฌ ๋ณด๊ด€๋ฌผ: Html

Html

<script> ํƒœ๊ทธ๋Š” <noscript> ํƒœ๊ทธ ๋‚ด๋ถ€์—์„œ ์–ด๋–ค ์šฉ๋„๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๊นŒ? ํฅ๋ฏธ๋กœ์šด ๋””์ž์ธ๊ณผ ์ฝ˜ํ…์ธ ๋ฅผ

์ตœ๊ทผ ํฅ๋ฏธ๋กœ์šด ๋””์ž์ธ๊ณผ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์›น ์‚ฌ์ดํŠธ์—์„œ โ€œ์†Œ์Šค๋ณด๊ธฐโ€๋ฅผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์›น ์‚ฌ์ดํŠธ ์ค‘ ํ•˜๋‚˜ ์ธ Squarespace ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด <script>ํƒœ๊ทธ ์•ˆ์— ํƒœ๊ทธ ๋ธ”๋ก์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค <noscript>.

<!-- Page is at: http://squarespace.com -->
...
...
<noscript id="inline-deps">
  <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7811972/758964/css/fonts.css" />

  <script type="text/javascript" src="https://static.squarespace.com/static/ta/5134cbefe4b0c6fb04df8065/7400/assets/logomark/logomark.min.js?37"></script>
  <link rel="stylesheet" href="https://static.squarespace.com/static/ta/5134cbefe4b0c6fb04df8065/7400/assets/logomark/logomark.min.css?37" type="text/css" />
</noscript>
...
...

๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ์ด์ƒํ•˜๊ฒŒ ์—ฌ๊ธฐ๊ณ , HTML์— ์ด์ƒํ•œ ๊ธฐ๋Šฅ์ด๋‚˜ ๋ชฉ์ ์ด ์žˆ๋Š”์ง€ ์•Œ๊ธฐ ์œ„ํ•ด ์ •๋ณด๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ์ธํ„ฐ๋„ท ๊ฒ€์ƒ‰์„ ์–ป์—ˆ์ง€๋งŒ ์•„๋ฌด ์†Œ์šฉ์ด ์—†์Šต๋‹ˆ๋‹ค. ์š”์†Œ <script>์•ˆ์— ํƒœ๊ทธ๋ฅผ ๋„ฃ๋Š” ๋ฐ ์–ด๋–ค ์ข…๋ฅ˜์˜ ๋ชฉ์ ์ด ์žˆ์Šต๋‹ˆ๊นŒ <noscript>, ์•„๋‹ˆ๋ฉด ๋‚˜์œ HTML์˜ ์˜ˆ์ผ๊นŒ์š”?



๋‹ต๋ณ€

์ฝ”๋“œ๋ฅผ ๊ฒ€์ƒ‰ ํ•˜์—ฌ์ด ์ฝ”๋“œ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค (๋” ์ฝ๊ธฐ ์‰ฝ๊ฒŒํ•˜๊ธฐ ์œ„ํ•ด ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค).

var DepLoader = (function () {
  function init() {
    var dependencies = document.getElementById("inline-deps");
    if (!dependencies || JS.hasClass(document.body, "deps--loaded")) {
      webfontsReady();
    } else {
      var html = dependencies.innerText || dependencies.textContent;
      JS.addClass(document.body, "deps--loaded");
      processRaw(html);
    }
  }

  function isListed(a, b) {
    for (var i = 0; i < b.length; i++) {
      if (a.indexOf(b[i]) !== -1) {
        return true;
      }
    }
    return false;
  }

  function webfontsReady() {
    JS.fireCustom("webfontsReady");
  }

  function processRaw(html) {
    var el = document.createElement("div");
    el.innerHTML = html;

    var scripts = el.querySelectorAll("script");
    var styles = el.querySelectorAll("link");
    var common, signup, dialog, systemPage, commerce;
    var others = [];
    var inline = [];
    var styleWhiteList = ["site.css", "dialog-", "signup-", "logomark"];
    var scriptBlackList = ["management-", "ckeditor-"];

    for (var i = 0; i < styles.length; i++) {
      var style = styles[i];
      if (style.href.indexOf("fonts.css") !== -1) load(style, webfontsReady);
      if (isListed(style.href, styleWhiteList)) load(style);
    }

    for (var i = 0; i < scripts.length; i++) {
      var script = scripts[i];
      var src = script.src;

      if (!src && script.getAttribute("data-sqs-type") !== "dynamic-assets-loader" && script.innerHTML.indexOf("SQUARESPACE_ROLLUPS") === -1) {
        eval(script.innerHTML);
      }
    }

    if (window.SQUARESPACE_ROLLUPS) {
      for (var key in SQUARESPACE_ROLLUPS) {
        var rollup = SQUARESPACE_ROLLUPS[key];
        var js = rollup.js;
        var css = rollup.css;

        if (key.indexOf("common") !== -1) {
          common = js;
        } else if (key.indexOf("commerce") !== -1) {
          commerce = js;
        } else if (key.indexOf("signup") !== -1) {
          signup = js;
        } else if (key.indexOf("dialog") !== -1) {
          dialog = js;
        } else if (key.indexOf("system-page") !== -1) {
          systemPage = js;
        } else if (key) {
          others = others.concat(js);
        } else {
          inline = inline.concat(js);
        }
      }
    }

    for (var i = 0; i < scripts.length; s++) {
      var script = scripts[i];
      var src = script.src;

      if (!isListed(src, scriptBlackList)) {
        if (src.indexOf("common-") !== -1) {
          common = script;
        } else if (src.indexOf("commerce-") !== -1) {
          commerce = script;
        } else if (src.indexOf("signup-") !== -1) {
          signup = script;
        } else if (src.indexOf("dialog-") !== -1) {
          dialog = script;
        } else if (src.indexOf("system-page-") !== -1) {
          systemPage = script;
        } else if (src) {
          others.push(script);
        } else {
          inline.push(script);
        }
      }
    }

    function loadOthers() {
      for (var i = 0; i < inline.length; i++) {
        if (inline[i].getAttribute("data-sqs-type") !== "dynamic-assets-loader") {
          load(inline[a]);
        }
      }

      for (var i = 0; i < others.length; i++) {
          load(others[i]);
      }

      JS.fireCustom("dependenciesLoaded");
    }

    var loadSystemPage = load.bind(this, systemPage, loadOthers, "system page");
    var loadSignup = load.bind(this, signup, loadSystemPage, "signup");
    var loadCommerce = load.bind(this, commerce, loadSignup, "commerce");
    var loadDialog = load.bind(this, dialog, loadCommerce, "dialog");
    var loadCommon = load.bind(this, common, loadDialog, "common");

    loadCommon();
  }

  function load(tag, callback, label) {
    var head = document.head;

    if (Array.isArray(tag)) tag = { nodeName: "SCRIPT", src: tag[0] };

    if (!tag) {
      if (callback) callback();
      return;
    }

    if (tag && (tag.src || tag.href)) {
      var child;
      if ("SCRIPT" === tag.nodeName) {
        child = document.createElement("script");
        child.src = tag.src;

        if (child.src.indexOf("combo") !== -1) {
          callback = function () {
            Y.Squarespace.FrontSite.Core.domReady(true)
          };
        }
      } else {
        if ("LINK" === tag.nodeName && "stylesheet" === tag.rel) {
          child = document.createElement("link");
          child.href = tag.href;
          child.rel = "stylesheet";
          child.tyle = "text/css";
        }

        if (child) {
          child.onload = callback;
          head.appendChild(child);
        }
      }
    } else {
      try {
        eval(tag.innerHTML);
      } catch (e) {}
    }
  }

  return { init: init, webfontsReady: webfontsReady };
})();

๋ณด์‹œ๋‹ค์‹œํ”ผ <noscript>ํƒœ๊ทธ์—๋Š” ID๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.#inline-deps ๊ฐ€ ์žˆ์œผ๋ฉฐ, ์ฝ”๋“œ (๋ผ์ธ 3)์—์„œ ์ฐธ์กฐํ•˜์—ฌ ์ข…์†์„ฑ์„ ๋น„๋™๊ธฐ์‹ ๋ฐ ์ฃผ๋ฌธํ˜•์œผ๋กœ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

์•„๋งˆ๋„ <noscript>์š”์†Œ๋ฅผ ๋ฌธ์ž์—ด์ด๋‚˜ ์ฃผ์„์— ๋ฐฐ์น˜ํ•˜๋Š” ๋Œ€์‹  DOM ์š”์†Œ์— ์ง์ ‘ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค (์ฃผ์„์€ ์‹ค์ œ ์ •๋ณด๋ฅผ ์˜๋ฏธํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํŠนํžˆ ๋‚˜์˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค). ๋˜ํ•œ ํŠน๋ณ„ํžˆ๋กœ๋“œ ๋  ๋•Œ๊นŒ์ง€ ์Šคํฌ๋ฆฝํŠธ ๋ฐ CSS ์Šคํƒ€์ผ์˜ ์‹คํ–‰์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ด๊ฒƒ์ด <noscript>ํƒœ๊ทธ ์˜ ๋‚จ์šฉ์„ ๋ฐœ๊ฒฌํ•ฉ๋‹ˆ๋‹ค . ๊ทธ๊ฒƒ์ด ์œ ํšจํ•œ HTML5 ์ฝ”๋“œ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋ฆฝํŠธ ๋กœ๋”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ JavaScript ๊ฐ์ฒด์—์„œ ์ข…์†์„ฑ์„ ์„ ์–ธํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.


๋‹ต๋ณ€


์ด ๊ธ€์€ Html ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ๋ถ„๋ฅ˜๋˜์—ˆ๊ณ  ๋‹˜์— ์˜ํ•ด ์— ์ž‘์„ฑ๋์Šต๋‹ˆ๋‹ค.