ํ๋ก ์ ํฌ๋ฐ ์กฐ์ฝ๋ฉ ๋์ ์์ ์ ๋ฃ๋ ๋ ์ด์๋ค!!! ๋ถํธ์คํธ๋ฉ์ ์ด์ฉํด์ ํ๋ก์ ํธ ํ๋๋ฅผ ์งํํ๊ณ , ๋ฐฐํฌ ์์ตํ ๋ฑ๋ฑ์ ๊ณผ์ ์ ๊ฑฐ์ณค๋ค. ๋ถํธ์คํธ๋ฉ์ผ๋ก ๋์์ธ์ ์ฝ๊ฒ ๋ฃ๋๊ฒ ๊ฝค๋ ์ฌ๋ฐ์๋ค!!
๋งํฌ์ ์ ์ก๊ณ , ๋ถํธ์คํธ๋ฉ์ ์ด์ฉํ๋ค. ๋ถํธ์คํธ๋ฉ์ ํด๋์ค๋ฅผ ๋ฏธ๋ฆฌ ๋ง๋ค์ด๋ฌ์ ์น์ ๋ง๋ค๊ธฐ ํธํ๊ฒ ํด์ฃผ๋ ํ๋ ์์ํฌ์ธ๋ฐ, ๋์์ธ์ด ๋์จ ํ์ด์ง๊ฐ ์๋ ๋ ์ฌ์ฉํ๊ธฐ ์์ฒญ ํธํ ๊ฒ ๊ฐ๋ค!!
๊ฟํโจ
- ๊ธฐ๋ณธ์ ์ธ reset ๊ธฐ๋ฅ์ ๋ค์ด ์์ด์ ํ์ํ ๊ฒ๋ง ๋ ์ฐพ์ ์ฐ๋ฉด ๋๋ค!! - - margin-top ์ฃผ์ง ์๊ณ class="mt-5" ์ด๋ฐ ์์ผ๋ก ์ถ๊ฐํ๋ฉด ๋์์ด๋๋ค์ด ๋ง๋ค์ด๋์ ์ ์ ํ ๊ฐ๊ฒฉ์ด ๋จ์ด์ง๋ค!!! - - vw, vh ๋จ์๋ฅผ ์ธ ๋๋ min-width, min-height ๋ก UI ๊นจ์ง์ ๋ฐฉ์งํ์. - - ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ ๊ฟํ! ๊ฐ๋ ์์ฑ์ ๋ฐ๊ฟจ๋๋ฐ ์ ์ฉ์ด ์๋๋ฉด ์๋ก๊ณ ์นจ์ ์ฐํด๋ฆญ ํ๊ณ ์บ์ ๋น์ฐ๊ธฐ ๋ฐ ๊ฐ๋ ฅ ์๋ก๊ณ ์นจ! - - ๋ถํธ์คํธ๋ฉ์์ ์ด๋ฏธ ๋ง๋ค์ด์ง ์์ ๋์์ธ์ ๊ฐ๋ค ์ฐ๋๊ฒ .. ๋๋ฌด ํ์ ์ ์ด์๋ค...
JavaScript ๋ง๋ณด๊ธฐ
// ์ด๋ฐ์์ผ๋ก js๋ก html element์ ์ ๊ทผํ ์ ์๋ค. document.getElementById('id') document.getElementsByClassName('class')[0].checked
<input onclick="result()"> <!-- ํด๋ฆญ๋๋ฉด result๋ผ๋ ํจ์๋ฅผ ์คํ. -->
js๋ ์ฉ๋์ด ์ปค์ ๋ฐ์์ค๋๋ฐ ์๊ฐ์ด ๊ฑธ๋ ค์ ํ์ด์ง ๋ก๋ฉ์ด ๋๋๊ณ ์ ํ์ง๋๊ฒ ๋ง์ผ๋ฏ๋ก, html body ๊ฐ์ฅ ๋ฐ ๋จ์ script ํ๊ทธ๋ฅผ ๋ฃ์. defer ๊ฐ์ ์์ฑ๋ ์ฌ์ฉ ๊ฐ๋ฅ. async ๊ด๋ จ ์์ฑ
๐ฅ function ๐ค
// function ๋ค ์จ์ผ๋จ. ์ธ์ ์๋ฃํ ํ์X function sayHello(nameOfPerson, age) { console.log("Hello my name is " + nameOfPerson); return age } // // object ์ ํจ์ ์ฃผ๊ธฐ const player = { name: "ddot", sayHello: function(otherPersonName) { return "hello! " + otherPersonName } } console.log(player.name); player.sayHello("sooyoung");
- function ์ธ์ 1๊ฐ์ธ๋ฐ 10๊ฐ ๋ณด๋ด๋ฉด ์์ ๊ฐ ๋ถํฐ ์ธ์ ๊ฐ์๋งํผ ์์์ ์ฌ์ฉ
๐conditional๐โโฌ
// prompt: ์ฌ์ฉ์์๊ฒ ์ ๋ ฅ ๋ฐ์์ด. ์์ฆ์ ์ ์. ์ง์ ๋ชจ๋ฌ์ ๋ง๋ค์ด์ ์ฐ์. const age = prompt("How old are you?"); // ํญ์ string typeof ๋ณ์; typeof(๋ณ์); parseInt(age); // return ์ซ์ or NaN (Not a Number) // if(!isNaN(age)) {} else if(age < 18 || age > 50) {} else if(age >= 18 && age <=50) {} else if (age === 121) {} // === 3๊ฐ.
๋ฌธ๋ฒ๋ง ๋ณด๋ฉด C๋ ์์ฒญ ๋จผ๋ฐ ; ์ฐ์ด์ผํ๋๊ฒ ๋์ค์ ; ์ ์ฐ์ด์ ์ค๋ฅ ์์ฒญ ๋ ๋ฏ...
list, object๋ const ์ฌ๋ ์์ ์์๋ ์์ ๊ฐ๋ฅ. ์์ ์๋ก ๋์ ํ๋ ๊ฒ๋ง ๋ถ๊ฐ๋ฅ.
for๋ฌธ์ C์ ๊ฐ์ผ๋, list ๋ string์ ํด๋น๋๋ for...of(element), for...in(element ์์ property๊น์ง) ๊ฐ์ ๋ฌธ๋ฒ์ด ๋ ์๋ค.
ํ์คํ ๋งํฌ์
์ด๋ CSS ๋ ์ฝ๊ฐ์ ์คํ์ผ์ ์ฐจ์ด์ผ ๋ฟ ๋ค ๋น์ทํ๋ค๋ ๊ฒ์ ๋๊ผ๋ค. ๋ฌผ๋ก ๋ฐ์ํ ๊ฐ์ ๊ฒฝ์ฐ๋ ์ฌ์ดํธ๋ฅผ ๋ง์ ธ๋ด์ผ ์ ์ ์์ง๋ง, ๋๊ฐ ์ฌ์ดํธ๋ฅผ ๋ณด๋ฉด ์ ๋์ถฉ ์ด๋ ๊ฒ ํ๊ฒ ๊ตฌ๋ ํ๊ณ ๊ตฌ์กฐ ์ ๋๋ ์์๋ณผ ์ ์๋ ๋จ๊ณ๊ฐ ๋ ๊ฒ ๊ฐ๋ค. margin, padding ๊ฐ์ ๊ฒ๋ค์ ์ ํํ๊ฒ ๋ง๋ค๋ ค๋ฉด ๊ฐ์ ๋ง์ด ๋ฐ๊ฟ๋ด์ผ ํ๊ธด ํ์ง๋ง js๋ ๋นจ๋ฆฌ ๋ฐฐ์์ ์ ๋๋ก ๋์ํ๋ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค.