#16 ์ ์ถ๊ฐ ์์ฑ.
bootstrap container์ ๊ธฐ๋ณธ ๊ตฌ์กฐ
: 12*12 grid ์ฒ๋ผ ์ชผ๊ฐ๋๊ณ , row, col ์ ๋ํ class ๋ฅผ ์ฃผ๋ฉด,class="col-md-4
์ซ์๋งํผ ํฉ์ณ์ง row, col ์นธ์ด ์๊ธด๋ค.
์กฐ์ฝ๋ฉ๋ ํน๊ฐ ์๊ฐ์ ํ ๊ฒ ์ฒ๋ผ mt-5 p-3์ผ๋ก ๋ง์ง, ํจ๋ฉ๋ ์์ ๊ฐ๋ฅํ๋ค. ๊ฐ์ ธ๋ค ์ธ ๋์์ธ๋ ๋ง์!
<div class="container">
<div class="row">
<!-- 4์นธ 6๊ฐ or 3์นธ 5์นธ 6์นธ ์ฒ๋ผ 12์นธ์ ๋๋๊ฑธ ๋ฃ์ผ๋ฉด ๋ง์ง๋ง๊ฒ ์์์ ๋ด๋ ค๊ฐ. -->
<!-- sm, md ๋ฑ์ ์ฌ์ด์ฆ๋ก ๋ฐ์ํ ๋์ ์ฝ๊ฒ ๊ฐ๋ฅ. -->
<div class="col-md-4 col-sm-6 b">hello world</div>
<div class="col-md-4 col-sm-6 b">hello world</div>
<div class="col-md-4 col-sm-4 b">hello world</div>
<div class="col-md-4 col-sm-4 b">hello world</div>
<div class="col-md-4 col-sm-4 b">hello world</div>
<div class="col-md-4 col-sm-12 b">hello world</div>
</div>
<div class="row">
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
</div>
</div>
์ธํ๋ฐ์์ display: grid ๊ฐ ๋์ค๊ธฐ ์ ์ ์ด๋ฐ์์ผ๋ก ๋ง๋ค์๋ค๊ณ ์ด์ผ๊ธฐ๋ฅผ ํ ๋ grid ์์ผ๋๊น ํ์ ์๋๊ฑฐ ์๋? ํ์๋๋ฐ... ์๋์๋ค........
tipsโจ
๋จ์ : custom์ด ์ด๋ ค์.
sweetalret2 ๊ฐ์ ๊ฒฝ๊ณ ์ฐฝ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ฐ์ ธ๋ค ์ธ ์ ์๋ค.
summernote, toast UI์ wysiwyg editor ๋ ์ ์ฉํด๋ณด๊ณ ,
snapappointments : ๋ถํธ์คํธ๋ฉ์์ ์๋๋ select ์์๋ค!
๊ฐ์ ธ๋ค ์ฐ๋ ๊ฒ๋ ์ฐ์ต์ด ํ์ํ๋๊น ์ฌ์ฉํด๋ณด๋ ์ฐ์ต๋ ํด๋ณด์.
// element.querySelector ๋ฅผ ํ ์ ์๋ค!!!! const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); // input์๋ value property๊ฐ ์๋ค. input์ ์ ๋ ฅ๋ ๊ฐ์ด๋ค. const value = loginInput.value
value.length # string ๊ธธ์ด ๋ฐํ.
์ ๋ ฅ๊ฐ ๊ฒ์ฌ : js๋ก ์ฝ๋๋ฅผ ์งค ์๋ ์์ง๋ง, HTML ๊ธฐ๋ฅ์ ์ฌ์ฉํ์.
<input required maxlength="50" type="text">
form์ด ์ ์ถ๋๋ฉด์ ์น์ฌ์ดํธ๊ฐ ์๋ก๊ณ ์นจ ๋จ. ๊ฐ์ด ๋ ๋ผ๊ฐ... ์๋ก๊ณ ์นจ ๋์ง ์๊ฒ ํ๋ ค๋ฉด?
-> ์ฌ์ค์ event ๊ฐ ์ผ์ด๋์ ๋ธ๋ผ์ฐ์ ๊ฐ fuction์ ๋ถ๋ฅผ ๋, ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ค ๋์์ ํ๋์ง์ ๋ํ ์ ๋ณด๋ฅผ ๋ด์ ์ธ์๋ฅผ ํ๋ ๋๊ฒจ์คfunction onLoginSubmit(event) { // ์ธ์ ์ด๋ฆ์ event๋ก ์ฐ๋๊ฒ ๊ดํ. // ํด๋น event๊ฐ ์ผ์ด๋ฌ์ ๋, ๋ธ๋ผ์ฐ์ ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋ ๋์์ ๋ง์! event.preventDefalut(); //alert("asdf"); // alert ๋ ๊ธฐ๋ณธ ๋์์ ์ ์ ๋ฉ์ถค. // ์ด ๋ค๋ก custom ํ๋ฉด ๋จ. loginForm.classList.add(HIDDEN_CLASSNAME); const username = loginInput.value; // ์๋ ๋ ๋ฌธ์ฅ์ ๊ฒฐ๊ณผ๋ ๊ฐ์. greeting.innerText = "Hello " + username; greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); } loginForm.addEventListener("submit", onLoginSubmit);
inner DB - localStorage
์๋ก๊ณ ์นจ ํด๋ ์ ์ฅํ๊ณ ์์!!localStorage.setItem('myCat', 'Tom'); const cat = localStorage.getItem('myCat'); //tom localStorage.removeItem('myCat');
์ฌ๋ฌ๋ฒ ์ฌ์ฉํ๋ ๊ฐ๊ณผ ์ฝ๋๋ ๋ณ์์ ํจ์๋ก ๋ง๋ค์ด์ ๊น๋ํ๊ฒ ํ์.
// ๋๋ฌธ์ : ์์ฃผ ์ฐ์ด๋ string. const HIDDEN_CLASSNAME = "hidden";
form, greeting ๋ฌธ๊ตฌ ์ด๋ค ๊ฒ์ด ๋ณด์ด๊ฒ ํ ์ง!
const savedUserName = localStorage.getItem(USERNAME_KEY); // ๋ ๋ค hidden ์ฃผ๊ณ ์์ํ์. if(savedUserName === null) { //show the form loginForm.classList.remove(HIDDEN_CLASSNAME); loginForm.addEventListener("submit", onLoginSubmit); } else { //show the greeting paintGreetings(savedUserName); }
fact - ๋ฌด์จ ์ผ์ด ์์๋์ง, ๋ญ ํ๋์ง
feeling - ๋ฌด์์ ๋๊ผ๋์ง,
finding - ์ด๋ค ์ธ์ฌ์ดํธ๊ฐ ์์๋์ง
future action - ์ก์ ํ๋์ด ์๋์ง
feedback
์ถํ ์ถ๊ฐ ์์ .
์ค์ค.. ์ ๋ ๊ฐ์ด ๋ฉ์ฌํ๋ํ๊ณ ์์ด์! ์ข์ ์ ๋ฆฌ๊ธ์ด๋ค์ใ ใ