๐Ÿ”Ž HTML (5-2)

1. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ

๋ธ”๋ก์š”์†Œ๋Š” ํ•œ ๊ฐœ์˜ ๋…๋ฆฝ๋œ ๋ฉ์–ด๋ฆฌ๋กœ ํ™”๋ฉด์˜ ๊ฐ€๋กœ ํญ ์ „์ฒด๋ฅผ ์ฐจ์ง€ํ•˜๋Š” ์š”์†Œ๋“ค์„ ๋งํ•จ.
๋ธ”๋ก์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ผ์ธ์ด ๋ฐ”๋€œ.
๋ธ”๋ก์š”์†Œ๋Š” ๋ธ”๋ก์š”์†Œ์™€ ์ธ๋ผ์ธ์š”์†Œ๋ฅผ ๋ชจ๋‘ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Œ(๋‚ด๊ฐ€ ํ—ท๊ฐˆ๋ ธ๋˜ ๊ฒƒ).
๋Œ€ํ‘œ์ ์ธ ๋ธ”๋ก ์š”์†Œ๋Š” <article>, <header>, <nav>, <section>, <div>

2. ์ธ๋ผ์ธ ์š”์†Œ

์ธ๋ผ์ธ ์š”์†Œ๋Š” ์ปจํ…์ธ  ์ž์‹ ์˜ ํฌ๊ธฐ ๋งŒํผ ์˜์—ญ์„ ๊ฐ€์ง€๋Š” ์š”์†Œ๋ฅผ ๋งํ•จ.
์ธ๋ผ์ธ ์š”์†Œ๋“ค์€ ์ธ๋ผ์ธ ์š”์†Œ๋งŒ ์ค‘์ฒฉ์ด ๊ฐ€๋Šฅ.
์ธ๋ผ์ธ ์š”์†Œ์˜ ์ •๋ ฌ์€ ํ…์ŠคํŠธ ์ •๋ ฌ์˜ ์˜ํ–ฅ์„ ๋ฐ›์Œ.
๋Œ€ํ‘œ์ ์ธ ์ธ๋ผ์ธ ์š”์†Œ๋กœ๋Š” span, strong ๋“ฑ

<style>
        p {
            display: block;
            background-color: red;
        }
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <div class="one">
        <span>hello world</span>
        <span>hello world</span>
    </div>
</body>

๋ธ”๋ก์š”์†Œ VS ์ธ๋ผ์ธ ์š”์†Œ

๋ธ”๋ก์š”์†Œ๋Š” ๋†’์ด์™€ ๋„“์ด ๊ฐ’ ์กฐ์ ˆ โญ• , ์ธ๋ผ์ธ ์š”์†Œ๋Š” ๋†’์ด์™€ ๋„“์ด ๊ฐ’ ์กฐ์ ˆ โŒ

์ธ๋ผ์ธ ์š”์†Œ๋Š” ๋†’์ด์™€ ๋„“์ด ๊ฐ’ ์กฐ์ ˆ์ด ์•ˆ๋จ ๐Ÿ‘‰ <display: block > , <display: inline-block > ์„ ์‚ฌ์šฉ

display: inline-block

๋†’์ด ๋„“์ด ์กฐ์ •ํ•˜๋‚˜ ์˜†์œผ๋กœ ๋ถ™์–ด ์žˆ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ

<style>
  p{
    display: block;
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
  }
  span{
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: teal;
  }
</style>
<body>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
</body>

๐Ÿ˜ฒ inline ์š”์†Œ์˜ ๋ฌธ์ œ์ 

span ๋ฐ•์Šค๋“ค ์‚ฌ์ด์˜ ๊ณต๊ฐ„์ด ์ƒ๊ธด ์ด์œ ๋Š” ? spanํƒœ๊ทธ๋“ค ์‚ฌ์ด์˜ ์—”ํ„ฐํ‚ค ๋•Œ๋ฌธ์— ๋ฐœ์ƒ

<body>
    <p>hello world</p>
    <span>hello world</span><span>hello world</span>
</body>

ํ•˜์ง€๋งŒ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ด๋Ÿฐ์‹์œผ๋กœ ์ฝ”๋”ฉ์€ โŒโŒโŒ

๐Ÿ‘ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

  1. font-size: 0; ์ผ๋ถ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์•ˆ๋จน๋Š” ๊ฒฝ์šฐ์žˆ์Œ
  2. enter ๋ฅผ ์‚ญ์ œ (like ์œ„ ์ฝ”๋“œ => ์ข‹์ง€๋ชปํ•œ๋ฐฉ๋ฒ•)
  3. -margin์„ ์คŒ . ํฐํŠธ ์ข…๋ฅ˜๊ฐ€ ๋‹ฌ๋ผ์ง€๋ฉด ๋”ฑ ๋งž์•„ ๋–จ์–ด์ง€์ง€ ์•Š์Œ (์•„๋ž˜ ์—ฌ๋ฐฑ๋ฌธ์ œ)
  4. float
<style>
span{
    font-size: 1rem;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .one {
    font-size: 0; โœ…โœ…โœ…
  }
</style>

<div class="one">
      <span>hello world</span>
      <span>hello world</span>
</div>


์—ฌ๋ฐฑ์ด ๋‹ฌ๋ผ์ง€๋Š” ๋ฌธ์ œ์ ์ด ๋ฐœ์ƒ (os ๋งˆ๋‹ค ๋‹ค๋ฅธ ๊ฒƒ ๊ฐ€ํƒ€์š”)
ํฐํŠธ์˜ ์‚ฌ์ด์ฆˆ์— ์˜ํ•ด ์—ฌ๋ฐฑ์ด ๋‹ฌ๋ผ์ง€๋Š” ๋ฌธ์ œ

<style>
.one {
	font-size: 0;
}
.two {
    display: inline;
    font-family: 'Rubik Wet Paint', cursive;
}
.three {
    line-height: 1;
    โœ…โœ… 1 == 16px
}
</style>

<body>
  <p>p</p>
 <div class="one">
  <span>span</span>
  <span>span</span>
 </div>


 <div class="three">
  <span class="two">H</span>ello
  <span class="two">H</span>ello
 </div>

</body>

์ข‹์€ ๋ฐฉ๋ฒ• ์•„๋‹ˆ์—์š”!! ๐Ÿ‘‰ ์•Œ์•„๊ฐ€๊ธฐ

โ˜‘ ์ถ”๊ฐ€ ๋ง์”€

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <!-- Toast Editor 2.0.0๊ณผ ์˜์กด์„ฑ -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  </head>
  <body>
    <!-- ํ•ด๋‹น ์˜ˆ์ œ๋Š” bootstrap ์‹œ๊ฐ„์— ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. -->
    <div id="editor"></div>
    <script>
        const Editor = toastui.Editor;
 
        const editor = new Editor({
            el: document.querySelector('#editor'),
            height: '600px',
            initialEditType: 'markdown',
            previewStyle: 'vertical'
        });
        
        // editor.getHTML()
        // editor.getMarkdown()
    </script>
  </body>
</html>

div ํƒœ๊ทธ์ด๋‹ˆ๊นŒ ๋ฒ„ํŠผ ๋ˆŒ๋ €์„ ๋•Œ submit ๋™์ž‘ ๋ชปํ•˜๋Š”๋ฐ ์ •์ƒ์ ์œผ๋กœ submit์„ ํ•˜๊ณ  ์žˆ๋„ค ?
๐Ÿ‘‰ input hidden์€ ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉ!!
input hidden ์จ์„œ input์— data ๋„ฃ์–ด์คŒ. ์ œ์ถœ๋˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด input ๊ฐ€์ ธ์™”๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๋“ฏ

๐Ÿ™†๐Ÿปโ€โ™€๏ธ ํšŒ๊ณ 


์š”์ฆ˜ ๋„ˆ๋ฌด๋„ˆ๋ฌด ํ”ผ๊ณคํ•˜๋‹ค ใ… ใ…  ํ‘ ์ปจ๋””์…˜ ์กฐ์ ˆ ์ž˜ํ•˜๊ธฐ ~.~

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ