웹 공부/javascript
코딩 스터디(모각코) 5일차 - 한 입 웹개발(JS)
윈터가든
2021. 7. 9. 22:44
✅ 오늘의 문제 : console.log()를 이용하여 객체 데이터 출력 해보기
👉 예시
✅ 오늘의 문제 풀이 인증
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript4</title>
<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=Gamja+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./4.css">
<script src="./4.js"></script>
</head>
<body>
<div class="all">
<img src="img/js.png"><br>
<button onclick="on_click()">click!</button>
</div>
</body>
</html><CSS>
.all{
border: 6px solid goldenrod;
border-radius: 20px;
width: 300px;
margin: auto;
padding-top: 5px;
padding-bottom: 5px;
}
img{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
button{
border: none;
background-color: rgb(236, 205, 29);
color: aliceblue;
width: 100px;
font-size: 2rem;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}<javascript>
var num=7;
var str="hi";
var bool=true;
var object1={name:'bob', age:8};
var asdfs;
var object2={name:'june', age:7};
function on_click(){
console.log(typeof(num));
console.log(typeof(str));
console.log(typeof(bool));
console.log(typeof(object1));
console.log(typeof(asdfs));
console.log(typeof(object2));
}<결과화면>
✅ 오늘의 한마디
<css에서 rem과 em의 차이>
- rem: 상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 지정된 배수로 변환해 표현한 크기를 의미합니다.
ex) 기준이 되는 값, 즉 html 태그의 font-size 값이 이 10px 라면 2rem 은 20px 을 의미합니다.
- em: 현재 스타일 지정 요소의 font-size 값을 지정된 배수로 변환해 표현한 크기를 의미합니다.
ex) 기준이 되는 값, 즉 현재 요소의 font-size 값이 10px 이라면 2em 은 20px 을 의미합니다.<javascript에서 undefined와 null의 차이>
- undefined: 변수를 선언하고 값을 할당하지 않은 상태를 말합니다. 즉, undefined는 자료형이 없는 상태이다.
- null: 변수를 선언하고 빈 값을 할당한 상태(빈 객체)입니다.
따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있습니다.--> 일주일 동안 알게 된 부분도 많아서 뿌듯합니다. 앞으로 더 열심히 해서 성장하고 싶습니다 ๑•‿•๑