import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    ol: "ol",
    li: "li",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["JSX는 예제에서 보는 바와 같이 HTML과 구문이 유사하며, Solid에서 컴포넌트를 빌드하는데 핵심입니다.\nJSX는 ", jsx(_components.code, {
        children: "{ }"
      }), " 구문을 사용하여 HTML 내에 변수와 함수를 참조할 수 있는 동적 표현식을 추가합니다.\n이 예제에서는 ", jsx(_components.code, {
        children: "div"
      }), " 안에 ", jsx(_components.code, {
        children: "{name}"
      }), "을 사용하여 HTML 내에 ", jsx(_components.code, {
        children: "name"
      }), " 문자열을 포함합니다. 같은 방식으로 ", jsx(_components.code, {
        children: "svg"
      }), " 변수에 할당된 HTML 엘리먼트를 포함합니다."]
    }), "\n", jsx(_components.p, {
      children: "JSX를 사용하는 다른 프레임워크와는 달리, Solid는 가능한 한 HTML 표준에 가깝게 유지하려고 노력합니다. 이 덕분에 스택오버플로우나 디자이너의 템플릿 빌더에 있는 코드를 복사/붙여넣기하는 방식이 가능합니다."
    }), "\n", jsx(_components.p, {
      children: "JSX와 HTML 사이에는 JSX가 HTML의 상위집합이 되지 못하는 3가지 주요 차이점이 있습니다:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX는 void 엘리먼트가 없습니다. 즉, 모든 엘리먼트는 닫는 태그 또는 자체 닫기가 있어야 합니다. ", jsx(_components.code, {
            children: "<input>"
          }), " 또는 ", jsx(_components.code, {
            children: "<br>"
          }), " 엘리먼트를 복사할 때 이 점을 염두에 둬야 합니다."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "JSX는 단일 엘리먼트를 반환해야 합니다. 여러 최상위 엘리먼트를 반환하고자 한다면, 다음과 같이 Fragment 엘리먼트를 사용해야 합니다:"
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-jsx",
            children: ["<>\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Title", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              })]
            }), "\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              }), "Some Text", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              })]
            }), "\n</>\n"]
          })
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX는 HTML 주석(", jsx(_components.code, {
            children: "<!--...-->"
          }), ") 이나 ", jsx(_components.code, {
            children: "<!DOCTYPE>"
          }), " 같은 특별한 태그를 지원하지 않습니다."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "하지만 JSX에서 SVG는 지원합니다. 아래와 같은 SVG를 컴포넌트에 추가해봅시다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<svg height=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"300\""
        }), " width=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"400\""
        }), ">\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "id"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"gr1\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"5%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,255,3);stop-opacity:1\""
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,0,0);stop-opacity:1\""
            }), " />"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          })]
        }), "\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ellipse"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"125\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cy"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"150\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ry"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fill"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"url(#gr1)\""
            }), " />"]
          })
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Sorry"
        }), " but ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "this"
        }), " browser does not support inline ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "SVG"
        }), ".\n</svg>\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-1491580e.js.map
