매일 땡기는 마라 코딩

[인프런] 맛집지도 만들기 - 퀴즈 11, 퀴즈 12, 퀴즈 13 본문

클론코딩

[인프런] 맛집지도 만들기 - 퀴즈 11, 퀴즈 12, 퀴즈 13

cmkoi1 2023. 2. 2. 21:23

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

 

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

JS DOM 퀴즈

<div></div>
  • 선택된 요소의 안녕하세요 라는 글자를 추가해주세요.
  • 선택된 요소의 글자 크기를 30px로 바꿔주세요.

 

  • dom과제.html, dom과제.js 파일 생성.

 

 

과제 코드
dom과제.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>Document</title>
</head>
<body>
    <div></div>
    <script src="dom과제.js"></script>
</body>
</html>

 

과제 코드
dom과제.js

 

const divTag = document.querySelector("div");

console.log(divTag);

divTag.innerText = "안녕하세요";
divTag.style.fontSize = "30px";

 

 

 

 

JS DOM 퀴즈 풀이

풀이 코드
dom과제.js

 

const divTag = document.querySelector("div");

divTag.innerText = "안녕하세요.";
divTag.style.fontSize = "30px";

 

 

 

 

JS DOM 중첩 퀴즈

div.container 태그에서 출발하여div.inner.second 태그 내부에 있는 두번째 item 태그를 선택해보세요.

 

  • dom중첩과제.html, dom중첩과제.js 파일 생성.

 

 

과제 코드
dom중첩과제.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>Document</title>
</head>
<body>
    <div class="container">
        <div class="inner first">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
        </div>
        <div class="inner second">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
        </div>
    </div>
    <script src="dom중첩과제.js"></script>
</body>
</html>

 

과제 코드
dom중첩과제.js

 

const container = document.querySelector(".container");

console.log(container.children[1].children[1]);

 

 

 

JS DOM 중첩 퀴즈 풀이

풀이 코드
dom중첩과제.js

 

const container = document.querySelector(".container");

console.log(container.children[1].children[1]);

 

 

 

 

JS DOM 태그 추가 퀴즈

태그 추가 예제에서 productsData가 아래와 같을 때, item으로 각각 추가해보시길 바랍니다.

 

const productsData = [
  { title: "감자칩", weight: 300 },
  { title: "칙촉", weight: 100 },
  { title: "고구마칩", weight: 300 },
  { title: "오잉", weight: 50 },
];

 

  • dom태그추가과제.html, dom태그추가과제.js 파일 생성.

 

 

과제 코드
dom태그추가과제.html

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="dom태그추가과제.js"></script>
    </body>
</html>

 

과제 코드
dom태그추가과제.js

 

const productsData = [
    { title: "감자칩", weight: 300 },
    { title: "칙촉", weight: 100 },
    { title: "고구마칩", weight: 300 },
    { title: "오잉", weight: 50 },
];
 
const app = document.querySelector("#app"); 

app.innerHTML = `<div class="item">상품명 : ${productsData[0].title}, 무게 ${productsData[0].weight}g</div>`;
app.innerHTML = `<div class="item">상품명 : ${productsData[1].title}, 무게 ${productsData[1].weight}g</div>`;
app.innerHTML = `<div class="item">상품명 : ${productsData[2].title}, 무게 ${productsData[2].weight}g</div>`;
app.innerHTML = `<div class="item">상품명 : ${productsData[3].title}, 무게 ${productsData[3].weight}g</div>`;

오잉...

 

 

 

JS DOM 태그 추가 퀴즈 풀이

풀이 코드
dom태그추가과제.js

 

const productsData = [
    { title: "감자칩", weight: 300 },
    { title: "칙촉", weight: 100 },
    { title: "고구마칩", weight: 300 },
    { title: "오잉", weight: 50 }
];
 
const app = document.querySelector("#app");

let result = "";

for (let data of productsData) { //컨테이너 for-of문 사용
    result += `<div class="item">상품명 : ${data.title}, 무게 ${data.weight}g</div>`;
}

app.innerHTML = result;

 

우왕...

 

728x90

'클론코딩' 카테고리의 다른 글

[인프런] 맛집지도 만들기 (10)  (0) 2023.02.09
[인프런] 맛집지도 만들기 (9)  (0) 2023.02.09
[인프런] 맛집지도 만들기 (8)  (0) 2023.01.31
[인프런] 맛집지도 만들기 - 퀴즈 7, 퀴즈 8, 퀴즈 9, 퀴즈 10  (0) 2023.01.31
[인프런] 맛집지도 만들기 (7)  (0) 2023.01.31
'클론코딩' Related Articles more