๐ 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>
ํ์ง๋ง ํด๊ฒฐํ๊ธฐ ์ํด ์ด๋ฐ์์ผ๋ก ์ฝ๋ฉ์ โโโ
๐ ํด๊ฒฐ๋ฐฉ๋ฒ
- font-size: 0; ์ผ๋ถ ๋ธ๋ผ์ฐ์ ์์ ์๋จน๋ ๊ฒฝ์ฐ์์
- enter ๋ฅผ ์ญ์ (like ์ ์ฝ๋ => ์ข์ง๋ชปํ๋ฐฉ๋ฒ)
- -margin์ ์ค . ํฐํธ ์ข ๋ฅ๊ฐ ๋ฌ๋ผ์ง๋ฉด ๋ฑ ๋ง์ ๋จ์ด์ง์ง ์์ (์๋ ์ฌ๋ฐฑ๋ฌธ์ )
- 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 ๊ฐ์ ธ์๋ค๊ณ ์๊ฐํ๋ฉด ๋ ๋ฏ
๐๐ปโโ๏ธ ํ๊ณ
์์ฆ ๋๋ฌด๋๋ฌด ํผ๊ณคํ๋ค ใ ใ ํ ์ปจ๋์ ์กฐ์ ์ํ๊ธฐ ~.~
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ HTML (5-2)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@skh9797/HTML-5-2์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค