0813 TIL

kimhr08ยท2021๋…„ 8์›” 13์ผ
1

์ž ๊น!โœ‹๐Ÿปcss ๊ฐ•์˜

<div> ๋ผ๋Š” ํƒœ๊ทธ๋Š” ์•„๋ฌด ์˜๋ฏธ๊ฐ€ ์—†๋Š” ํƒœ๊ทธ์ด๋‹ค. ๋Œ€์‹  css๋‚˜ js๋กœ ์ œ์–ดํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋ผ๊ณ  ํ•˜๋ฉด ๋จ. 
๊ทธ๋ฆฌ๊ณ  ํ™”๋ฉด ์ „์ฒด๋ฅผ ์“ฐ๋Š” block ํƒœ๊ทธ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚œ๋‹ค. 
<span> div์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฌด์ƒ‰๋ฌด์ทจ ํƒœ๊ทธ์ด์ง€๋งŒ, lnlineํƒœ๊ทธ ์ด๊ธฐ๋•Œ๋ฌธ์— ์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค. 

js ๊ธฐ์ดˆ ๊ฐ•์˜

์กฐ๊ฑด๋ฌธ : ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ์ด ์‹คํ–‰๋˜๋„๋ก ํ•˜๋Š” ๊ฒƒ if๋ฌธ / if else๋ฌธ ๋“ฑ
if๋Š” true ์กฐ๊ฑด์ผ ๋•Œ ์‹คํ–‰๋˜๊ณ  else๋Š” false ์กฐ๊ฑด์ผ ๋•Œ ์‹คํ–‰๋œ๋‹ค.

<input id="night_day" type="button" value="night" onclick="
        if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            document.querySelector('#night_day').value='day';
        }else{
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            document.querySelector('#night_day').value='night';
        }
">

์ฝ”๋“œํ•ด์„:
html๊ณผ javascript๊ฐ€ ํ•ฉ์ณ์ง„ ํ˜•ํƒœ. ์ผ๋‹จ ๊ฒฐ๊ณผ๋ฌผ์€ ๋ฒ„ํŠผ์ด ํ•˜๋‚˜ ์ƒ๊ธฐ๊ณ  ๊ทธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ๋•Œ๋งˆ๋‹ค ๋‹คํฌ๋ชจ๋“œ night ์™€ day ๋ชจ๋“œ๋กœ ๋ฐ”๋€๋‹ค. value๊ฐ€ night ๋‹ˆ๊นŒ ์กฐ๊ฑด์ด ์ถฉ์กฑ๋˜์„œ if๋ฌธ ์•ˆ์— ์žˆ๋Š” ๊ฒƒ๋“ค์ด ์‹คํ–‰๋œ๋‹ค. ์ด๋•Œ night๋ฒ„ํŠผ์€ day๋กœ ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ ๋‹ค์‹œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ๋•Œ๋Š” (onclick)๋Š” value(๋ฒ„ํŠผ)๊ฐ€ day์ธ ์ƒํƒœ๋‹ˆ๊นŒ false๊ฐ€ ๋˜๋ฉฐ ๋‹ค์‹œ else๋ฌธ์ด ์‹œ์ž‘๋˜์–ด day๋ชจ๋“œ๋กœ ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค. ์ด๋•Œ value๋ฒ„ํŠผ๋„ night๋กœ ๋ฐ”๋€Œ๊ณ  ๊ทธ๋Ÿผ ๋‹ค์‹œ if๋ฌธ์ด ์‹คํ–‰๋˜์–ด ๊ณ„์†ํ•ด์„œ ๋ฐ˜๋ณต๋˜๊ฒŒ ๋˜๋Š” ์ฝ”๋“œ์ด๋‹ค.

-์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง

  • ์ฝ”๋“œ๊ฐ€ ์†ํ•ด์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ๊ฐ€๋ฅดํ‚ค๋„๋ก ์•ฝ์†๋˜์–ด์žˆ๋Š” ํŠน์ˆ˜ํ•œ ํ‚ค์›Œ๋“œ๋ฅผ this ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
  • ์ค‘๋ณต์„ ๋๊นŒ์ง€ ์ซ’์•„๊ฐ€์„œ ๋‹ค ์—†์• ๋ฒ„๋ฆฌ์ž.
<input type="button" value="night" onclick="
let target = document.querySelector('body');
        if(this.value === 'night'){
            target.style.backgroundColor='black';
            target.style.color='white';
            this.value='day';
        }else{
            target.style.backgroundColor='white';
            target.style.color='black';
            this.value='night';
        }
">

์ฝ”๋“œํ•ด์„:
document.querySelector('#night_day')๋Š” ์ฝ”๋“œ์˜ ์†ํ•ด์žˆ๋Š” ์ž๊ธฐ์ž์‹ ์˜ ํƒœ๊ทธ๋ผ์„œ this๋กœ ๋ฐ”๊ฟ” ์“ธ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  this๋กœ ๋ฐ”๊ฟจ์œผ๋‹ˆ ๋”์ด์ƒ id = 'night_day' ๋ผ๋Š” ํƒœ๊ทธ๋„ ํ•„์š”๊ฐ€ ์—†์–ด์กŒ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ์‚ญ์ œํ•˜๋Š”๋ฐ, ์‚ญ์ œํ•˜๊ณ  ์‹คํ–‰ํ•ด๋„ ์ „ํ˜€ ๋ฌธ์ œ์—†์ด ์‹คํ–‰๋˜๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๊ฑฐ๊ธฐ์— let target ์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด์„œ document.querySelector('body'); ๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ์ด์ œ
target์„ ์ง‘์–ด๋„ฃ๊ธฐ๋งŒํ•˜๋ฉด ๋ณ€์ˆ˜๊ฐ€ ์ž‘๋™ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.
๊ทธ๋Ÿฌ๋ฉด ์ฝ”๋“œ๋ฅผ ํ›จ์”ฌ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฐฐ์—ด

  • Array ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
  • '[' ๋กœ ์‹œ์ž‘๋˜์–ด ']' ๋กœ ๋๋‚œ๋‹ค.
  • ๊ฐ’๊ณผ ๊ฐ’ ์‚ฌ์ด์—๋Š” , (์ฝค๋งˆ)๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋ณ€์ˆ˜์— ๋‹ด์•„์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. (์˜ˆ: let coworkers = ["egoing", "leezche"];)
  • [] ์•ˆ์— ์žˆ๋Š” ๊ฐ’์€ index๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ธ๋ฑ์Šค๋Š” 0๋ฒˆ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • .lenth ๋ฅผ ์“ฐ๋ฉด ์ธ๋ฑ์Šค์˜ ๊ธธ์ด(์ฆ‰ ๋ช‡ ๊ฐœ)๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ผ๋•Œ๋Š” ์ธ๋ฑ์Šค๋ฅผ 0๋ฒˆ๋ถ€ํ„ฐ ์„ธ์ง€ ์•Š๋Š”๋‹ค. ๊ฐฏ ์ˆ˜๋ฅผ ์„ธ๊ธฐ๋•Œ๋ฌธ์— 1๋ฒˆ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค.
  • .push๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋์— ๋„ฃ๊ณ ์‹ถ์€๊ฑธ ์ถ”๊ฐ€ํ•œ๋‹ค.

๋ฐ˜๋ณต๋ฌธ while

document.write('<li>1</li>');
while (true) {
document.write('<li>2</li>');
document.write('<li>3</li>');
}
document.write('<li>4</li>');

์ฝ”๋“œํ•ด์„ :
์ฒซ๋ฒˆ์งธ ์ค„์ด ๋จผ์ € ์‹คํ–‰๋œ๋‹ค์Œ, ๊ทธ ๋‹ค์Œ while ๋ฌธ์„ ๋ณด๋Š”๋ฐ true๋ฉด ์ค‘๊ด„ํ˜ธ ์•ˆ์— ์žˆ๋Š”๊ฑธ ํ•˜๋‚˜์”ฉ ์‹คํ–‰์‹œ์ผœ์„œ false๊ฐ€ ๋‚˜์˜ค๋ฉด ๊ทธ๋•Œ ๋๋‚˜๋ฉด์„œ while๋ฌธ ๋ฐ–์— ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค. ์ €๋ ‡๊ฒŒ ์‹คํ–‰์‹œํ‚ค๋ฉด ๋ฌดํ•œ๋ฐ˜๋ณต์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

3๋ฒˆ๋งŒ ๋ฐ˜๋ณต๋˜๊ฒŒ ํ•˜๊ณ ์‹ถ์„ ๋•Œ

document.write('<li>ํ•˜๋‚˜</li>');
let i = 0;
while (i < 3) {
document.write('<li>๋‘˜</li>');
document.write('<li>์…‹</li>');
i += 1;
}
document.write('<li>๋„ท</li>');

์ฝ”๋“œํ•ด์„:
์ผ๋‹จ ์ œ์ผ ๋จผ์ € ๋งจ ์œ„์— ์žˆ๋Š” 'ํ•˜๋‚˜'๊ฐ€ ์‹คํ–‰๋œ๋‹ค. i ๋Š” ํ˜„์žฌ 0์ด๋‹ค. ๊ทธ๋ž˜์„œ i๋Š” while ( i < 3 ) ์ด๋ผ๋Š” ๊ฐ’์ด ์ถฉ์กฑ์ด ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด์„œ ์ฒซ๋ฒˆ์งธ '๋‘˜,์…‹'์ด ์ฐํžŒ๋‹ค. i(0) + 1์„ ํ•˜๋‹ˆ๊นŒ i๋Š” ์ด์ œ 1์ด๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋‹ค์‹œ while์ด ์‹คํ–‰๋œ๋‹ค. ์—ญ์‹œ (1<3) ์ถฉ์กฑ๋˜๋‹ˆ๊นŒ ๋‹ค์‹œ '๋‘˜,์…‹'์ด ์ฐํžŒ๋‹ค. 1+1 ํ•˜๋‹ˆ๊นŒ i ๊ฐ€ 2๊ฐ€๋˜๊ณ  ๋‹ค์‹œ while๋ฌธ ์‹คํ–‰. (2<3) ์ถฉ์กฑ๋˜๋‹ˆ๊นŒ ๋‹ค์‹œํ•œ๋ฒˆ ๋” '๋‘˜,์…‹'์ด ์ฐํžŒ๋‹ค.
ํ•˜์ง€๋งŒ ์ด ์ดํ›„์— 2+1 ์€ 3์ด ๋˜์–ด๋ฒ„๋ฆฌ๋‹ˆ๊นŒ while๋ฌธ์ธ (3<3)์€ ์ถฉ์กฑ์ด ๋˜์ง€๋ชปํ•˜๊ณ  false๊ฐ€ ๋˜์–ด๋ฒ„๋ ค์„œ ์ฝ”๋“œ๊ฐ€ ๋ฉˆ์ถ”๊ฒŒ ๋˜๊ณ  while๋ฌธ ์ค‘๊ด„ํ˜ธ ๋ฐ–์— ์žˆ๋˜ ๋งˆ์ง€๋ง‰ '๋„ท' ์ด ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด๋‹ค.

  • ํŒ
    ๊ตฌ๊ธ€๋ง์„ ์—ด์‹ฌํžˆ ํ•˜์ž. ์ž๊ธฐ์ฃผ๋„์ ํ•™์Šต์ด ํ•„์š”ํ•˜๋‹ค.
profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋Š” ๋„ํ™”์ง€ ์œ„๋ฅผ ๋‹ฌ๋ฆฌ๋Š” ์—ฌ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€