0324

1. 학습내용

css 선택자 게임
https://flukeout.github.io/

보기-명령팔레트-wrap-약어로 래핑-단축키 설정
div
#container

ipsum image
https://picsum.photos/
랜덤 이미지

querySelector('a')하면 a 중에 처음 것만
querySelectorAll('a')하면 전체

onclick 말고 onmouseover 등도 있음

style.css에 내용 넣고
h1{
    border-bottom:10px solid red;
}       
#container{
    display:grid;
    grid-template-columns:200px 1fr;
}
body{
    background-image:url(https://picsum.photos/1024);
    background-size:cover; 
}

스타일 적용시키고 싶은 곳 head에 추가
<link rel="stylesheet" href="style.css">

로그인/조건문
       <script>
           let input_id = prompt('ID?');
           if(input_id==='a'){
                alert(input_id+'님 안녕하세요');
           } else {
                alert('out');
           }
        </script>

다크모드/데이모드 버튼
        <input type="button" id="aaa" value="night" onclick="
        /* let button = document.querySelector('#aaa'); */
        let button = this;
        if(button.value === 'night'){
            document.querySelector('body').style.backgroundColor='black'; 
            document.querySelector('body').style.color='white';
            button.value = 'day';
            document.querySelector('#a1').style.color='white';
        } else {
            document.querySelector('body').style.backgroundColor='white'; 
            document.querySelector('body').style.color='black';
            button.value='night';
        }
        ">

배열/반복문
        <script>
            topics=['html', 'css', 'js']
            for(let i=0; i<topics.length; i=i+1){
                console.log(topics[i]);
                document.write('<li>'+topics[i]+'</li>')
            }    
        </script>

2. 어려웠던 점

.

3. 해결방법

.

4. 학습소감

기본적인 반복문까지는 모든 언어가 다 비슷