학습한 내용
이론 메모
*review(css)
- background-image: url(https://picsum.photos/1024); - 배경화면을 링크에 있는 이미지로 변경
- background-size: cover; - 가로 세로 비율을 유지하면서 배경 영역이 배경 이미지로 완전히 덮이도록 이미지 크기를 조정. 전체 영역이 커버됨. 그러나 크기 조정 된 이미지의 너비 / 높이가 너무 크면 이미지의 일부가 보이지 않을 수 있음.
*style.css파일 따로 만들기
- html - head에 <link rel="stylesheet" href="style.css">식으로 연결해주어야 함.
* 제어문
- 조건문(conditional statements)
- 반복문(loop statements)
-> 조건문의 조건, 반복이 계속되는 조건. boolean, 비교.
* Boolean
- 데이터 타입 : true, false
- boolean이 의미가 생기려면 연산자를 봐야 함
- 논리 연산자, 비교 연산자
*비교 연산자
- >, <, ==, ===(더 정확하게), !==등logic
<html>
<body>
<h1>Boolean</h1>
<script>
console.log(true);
console.log(false);
</script>
<h1>Comparison Operator</h1>
<script>
console.log(1>1); //false
console.log(1===1); //true
console.log(1!==1); //false
</script>
<h1>Conditional Statements</h1>
<script>
console.log(1);
if(true){
console.log('2 - true');
}
else {
console.log('2 - false'); //if문 안에 true값이기 때문에 2 - true 출력
}
console.log(3);
console.log(4);
if(false){
console.log('5 - true');
}
else {
console.log('5 - false'); //if문 안에 false값이기 때문에 5 - false 출력
}
console.log(6);
</script>
</body>
</html>login
<html>
<body>
<script>
let input_id = prompt('아이디?'); //변수 선언
//만약 input_id가 jihye와 같다면 인사 실행
if(input_id ==='jihye'){
alert(input_id+'님 안녕하세요 ^^');
}
//만약 input_id가 jihye와 다르면 누구세요 실행
else{
alert(input_id+'님 누구시죠?');
}
</script>
</body>
</html>응용 - 버튼 하나로 day/night모드 조절. 버튼 이름도 변경됨
<!doctype html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
<style>
h1{
border-bottom: 10px solid red;
padding: 30px;
}
#container{
display: grid;
grid-template-columns: 150px 1fr;
}
@media all and (min-width: 700px){
body{
background-color:green;
font-family: 'Lobster', cursive;
}
}
@media all and (max-width: 700px) {
body{
background-color:rgb(255, 117, 202);
font-family: 'Lobster', cursive;
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Smokum&display=swap" rel="stylesheet">
</head>
<body>
<input type="button" id="dnbtn" value="night" onclick="
let button = document.querySelector('#dnbtn');
//만약 현재 버튼의 value가 night라면 아래 코드를 실행해
if(button.value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='orange';
button.value = 'day'; //현재 버튼의 value를 day로 변경해
}
//그렇지 않다면 아래 코드를 실행해
else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='blue';
button.value = 'night'; //현재 버튼의 value를 night로 변경해
}
">
<input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='black';document.querySelector('body').style.color='yellow';">
<input type="button" value="day" onclick="document.querySelector('body').style.backgroundColor='white';document.querySelector('body').style.color='black';">
<h1><a href="index.html">WEB</a></h1>
<div id="container">
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>Welcome!</h2>
Hello <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">WEB</a>
</div>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://daegu-ai-school.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</body>
</html>어려웠던 점 또는 해결못한 것들
따로 없었다.
해결방법 작성
따로 없었다.
학습 소감
몰랐던 부분을 추가로 알게 되어서 좋았고, 역시 코딩은 재미있는 것 같다.
hello