1) 학습한 내용
1. style 지정
(1) !important 사용
<head> <style> h1{ border-bottom: 15px solid yellow !important; } </style> </head><body> <h1 style="border-bottom: 10px solid green;"><a href="index.html">web</a></h1> </body>
!important:우선순위를 높여준다
-원래는 body태그안 내용이 먼저 실행
but 여기서는 head태그안 내용이 먼저실행
(2) style.css 파일 만들기
<head> <title>web</title> <link rel="stylesheet" href="style.css"> </head>
style.css 파일을 만든 후 head 안에 내용을 저렇게 바꾸기
:링크연결한 부분은 style.css안 내용이 다 설정된다
2. 유용한 사이트
링크텍스트
:랜덤이미지 제공 사이트
링크텍스트
:다양한 색상,색상조합 추천 사이트
3. 조건문,boolean 활용
(1)Comparison Operator
<h1>Comparison Operator</h1> <script> console.log(1<1); console.log(1===1); //엄격하게 같은지 console.log(1==1); //모호하게 같은지 console.log(1!==1); </script>
(2)Conditional statements
<h1>Conditional statements</h1> <script> <div> console.log(1); if(true){ console.log(2); } console.log(3); //true면 실행 console.log(4); if(false){ console.log(5); } console.log(6); //false면 실행안함 </div><div> console.log(1); if(true){ console.log('2-true'); } else{ console.log('2-false') } console.log(3); console.log(4); if(false){ console.log('5-false'); } else{ console.log('5-true') } console.log(6); </div> </script>
(3)if문 활용
<html> <body> <script> let input_id = prompt('아이디?'); alert(input_id+'님 안녕하세요!!'); if(input_id==='서이'){ alert(input_id+'님 반가워요!'); } else{ alert(input_id+'님 안녕하세요!!'); } </script> </body> </html>
prompt('아이디?') 아이디를 입력하는 창을 띄움
입력한 아이디가 '서이'일 경우 서이님 반가워요!라고 뜨고
아닐경우 '~~'님 안녕하세요!!라고 뜨게 됨
(4) 다크모드 버튼 하나로 만들기
<!-- 버튼 하나로 합치기#1 --> <input type="button" id="dnbtn" value="night" onclick=" let button = document.querySelector('#dnbtn'); if (button.value ==='night'){ document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; button.value='day'; } else{ document.querySelector('body').style.backgroundColor = 'white'; document.querySelector('body').style.color = 'black'; button.value='night'; } ">
<!-- 버튼 하나로 합치기#2 --> <input type="button" value="night" onclick=" let button = this; if (button.value ==='night'){ document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; button.value='day'; } else{ document.querySelector('body').style.backgroundColor = 'white'; document.querySelector('body').style.color = 'black'; button.value='night'; } ">
4.배열,반복문
(1)배열(Array)
<h1>배열(Array)</h1> <script> var topics = ['html','css','js']; var members = ['egoing','seoyi','sehyun'] console.log(topics.length); // topics배열에 들어있는 갯수 console.log(topics[0]) //topics 1번째 element 가져옴 </script>
"배열은 서로 연관된 데이터를 그룹화해서 이름을 붙인 것"
-element들을 하나의 배열로 정리
-배열에는 순서가 정해져있음
-배열의 순서는 0부터 시작
(2)반복문(Loop)
<h2>반복문(Loop)</h2> <script> console.log(1); for(let i=0;i<3;i=i+1){ console.log(2); console.log(3); } console.log(4); </script>
for(초기값;끝값;값변화){실행문} : 반복문의 구조
(3)Array+Loop
<h1>Array+Loop</h1> <script> var topics=['html','css','js']; for(let i=0;i<topics.length;i=i+1){ console.log('i는', topics[i]); //콘솔창에 표시 document.write('<li>'+topics[i]+'</li>'); //웹페이지에 표시 } </script>
2) 학습내용 중 어려웠던 점
if문과 for문형식을 정확히 몰라서 해결하는데 시간이 걸렸다3) 해결방법
강의를 들으면서 설명을 해주셔서 강의따라하면서 해결하였다4) 학습소감
반복문,조건문,배열 등을 이해하기 위해선 수학적 지식이 어느정도 필요한 것 같다
0개의 댓글
