๐ŸŒ’ Pre) ์›น๊ฐœ๋ฐœ ์ข…ํ•ฉ๋ฐ˜_1

์›น๊ฐœ๋ฐœ ์ข…ํ•ฉ๋ฐ˜ 1์ฃผ์ฐจ ์ˆ˜์—… ์ž๋ฃŒ

๋งํฌ : https://www.notion.so/1-59315708468149fc9cb2877ca0784f65

  • HTML : ๋ผˆ๋Œ€
    ๋ฌธ์„œ ํ˜•ํƒœ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•จ.
    <๊บฝ์‡ ๋Š” ํƒœ๊ทธ๋ผ๊ณ  ํ•จ>

  • CSS : ๊พธ๋ฏธ๊ธฐ

  • JavaScript : ์›€์ง์ด๊ฒŒ ํ•˜๋Š”๊ฑฐ
    ์œ ์ผํ•˜๊ฒŒ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด

  • html ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ์ฐธ๊ณ : https://blog.naver.com/so2eej/222327286087

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ | HTML ๊ธฐ์ดˆ</title>
</head>

<body>
    <!-- ๊ตฌ์—ญ์„ ๋‚˜๋ˆ„๋Š” ํƒœ๊ทธ๋“ค -->
    <div>๋‚˜๋Š” ๊ตฌ์—ญ์„ ๋‚˜๋ˆ„์ฃ </div>
    <p>๋‚˜๋Š” ๋ฌธ๋‹จ์ด์—์š”</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- ๊ตฌ์—ญ ๋‚ด ์ฝ˜ํ…์ธ  ํƒœ๊ทธ๋“ค -->
    <h1>h1์€ ์ œ๋ชฉ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๋งˆ๋‹ค ํ•˜๋‚˜์”ฉ ๊ผญ ์จ์ฃผ๋Š” ๊ฒŒ ์ข‹์•„์š”. ๊ทธ๋ž˜์•ผ ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์ด ์ž˜ ๋˜๊ฑฐ๋“ ์š”.</h1>
    <h2>h2๋Š” ์†Œ์ œ๋ชฉ์ž…๋‹ˆ๋‹ค.</h2>
    <h3>h3~h6๋„ ๊ฐ์ž์˜ ์—ญํ• ์ด ์žˆ์ฃ . ๋น„์ค‘์€ ์ž‘์ง€๋งŒ..</h3>
    <hr>
    span ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: ํŠน์ • <span style="color:red">๊ธ€์ž</span>๋ฅผ ๊พธ๋ฐ€ ๋•Œ ์จ์š”
    <hr>
    a ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: <a href="http://naver.com/"> ํ•˜์ดํผ๋งํฌ </a>
    <hr>
    img ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: <input type="text" />
    <hr>
    button ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: <button> ๋ฒ„ํŠผ์ž…๋‹ˆ๋‹ค</button>
    <hr>
    textarea ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค: <textarea>๋‚˜๋Š” ๋ฌด์—‡์ผ๊นŒ์š”?</textarea>
</body>

</html>

๊ฐœ๋ฐœ์ž ๋„๊ตฌ(f12)๊ฐ€ ์กด์žฌํ•˜๋Š” ์ด์œ  : ์™”๋‹ค๊ฐ”๋‹คํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์„ ์ค„์ด๊ธฐ ์œ„ํ•ด

  • ํ•จ์ˆ˜ (function) : ๋ถ€๋ฅด๋ฉด ์ •ํ•ด์ง„ ๋™์ž‘์„ ํ•œ๋‹ค. ํ•จ์ˆ˜ ์†์˜ 'return' ์€ ๋‚˜๋ฅผ ๋ณ€์‹ ์‹œ์ผœ์ค˜ ๋ผ๋Š” ์˜๋ฏธ. ์ค„์˜ ์ˆœ์„œ๋Œ€๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.
    console.log() : ์ฝ˜์†” ์ฐฝ์— ํ”„๋ฆฐํŠธ ํ•ด์ค€๋‹ค.
    && : and
    || : or
    .length : list ๊ธธ์ด ๋‚˜์˜ด

even % 2 : 2๋กœ ๋‚˜๋ˆˆ ๋‚˜๋จธ์ง€๊ฐ€ 0์ž…๋‹ˆ๋‹ค.
odd % 2 " 2๋กœ ๋‚˜๋ˆˆ ๋‚˜๋จธ์ง€๊ฐ€ 1์ž…๋‹ˆ๋‹ค.

++ : ํ•˜๋‚˜์”ฉ ๋”ํ•ด์ค€๋‹ค. \

list[] : ์ˆœ์„œ ์ค‘์š”
dict {} : ์ˆœ์„œ ์ค‘์š” x
๋”•์…”๋„ˆ๋ฆฌ๊ฐ€ ๋ฆฌ์ŠคํŠธ ์•ˆ์— ๋“ค์–ด ๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

list์•ˆ์— dict๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ ๋“ค์–ด๊ฐ€ ์žˆ๋‹ค? ์ „ํ˜•์ ์ธ for๋ฌธ

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