문자열의 길이만큼 div 생성하기

// TODO: 조건에 맞는 div 요소를 생성하는 함수 createDiv를 작성하고, createDiv를 str의 길이만큼 호출하세요.
let str = '0123456';
const body = document.querySelector('body');

function createDiv(content, backgroundColor) {
  const div = document.createElement('div');
  // 조건1. div 요소의 textContent와 배경색은 외부에서 입력받은 content, backgroundColor가 되어야 합니다.
  div.textContent = content; // 외부에서 입력받은 content
  div.style.backgroundColor = backgroundColor; // 외부에서 입력받은 // backgroundColor
  // 조건2. div 요소의 padding 값은 상하 10px, 좌우 20px이 되어야 합니다.
  div.style.padding = '10px 20px'; // div.style.스타일명 = '';
  // 조건3. div 요소의 margin은 상 5px, 우 2px, 하 3px, 좌 8px가 되어야 합니다.
  div.style.margin = '5px 2px 3px 8px';
  // 조건4. div 요소의 글자색은 'white'가 되어야 합니다.
  div.style.color = 'white';
  // 여기에 코드를 작성하세요.
  body.append(div); // div를 body에 append한다.
  return;
}
// TODO: for 반복문을 사용하여 createDiv를 호출하세요.
// 원하는 매개변수를 넣어보세요.
for (let i = 0; i < str.length; i++) { // str(문자열).length(길이) 
  createDiv('안녕하세요', 'skyblue');
  // 여기에 코드를 작성하세요.
}

 

처음 과제를 봤을땐 멘붕이었다. 

함수 중 가장 어려워하는 인자에 관한 과제였고

div 요소의 textContent와 배경색은 외부에서 입력받은 content, backgroundColor가 되어야 합니다.

라는 말이 이해가 안갔다.

인자를 사용해서 호출해야 하는 내용인데 전혀 응용하지 못하고 전전긍긍했다.

그러다 책의 함수 인자부분을 읽고 몇번의 시행착오를 겪어 1개의 div를 호출했다.

내가 원한건 str.length 만큼의 div였는데, 1개만 노출이 됐다.

// TODO: 조건에 맞는 div 요소를 생성하는 함수 createDiv를 작성하고, createDiv를 str의 길이만큼 호출하세요.
let str = '0123456';
const body = document.querySelector('body');

function createDiv(content, backgroundColor) {
  const div = document.createElement('div');
  // 조건1. div 요소의 textContent와 배경색은 외부에서 입력받은 content, backgroundColor가 되어야 합니다.
  div.textContent = content; // 외부에서 입력받은 content
  div.style.backgroundColor = backgroundColor; // 외부에서 입력받은 // backgroundColor
  // 조건2. div 요소의 padding 값은 상하 10px, 좌우 20px이 되어야 합니다.
  div.style.padding = '10px 20px'; // div.style.스타일명 = '';
  // 조건3. div 요소의 margin은 상 5px, 우 2px, 하 3px, 좌 8px가 되어야 합니다.
  div.style.margin = '5px 2px 3px 8px';
  // 조건4. div 요소의 글자색은 'white'가 되어야 합니다.
  div.style.color = 'white';
  // 여기에 코드를 작성하세요.
  body.append(div); // div를 body에 append한다.
  return;
}
createDiv('안녕하세요', 'skyblue');
// TODO: for 반복문을 사용하여 createDiv를 호출하세요.
// 원하는 매개변수를 넣어보세요.
for (let i = 0; i < str.length; i++) { // str(문자열).length(길이) 
  createDiv();
  // 여기에 코드를 작성하세요.
}

이렇게 써서 문제였다.

createDiv의 인자를 다 작성하고 for 문 안에 넣어 돌렸어야 했다.

그런데 저 소스에서는 createDiv('안녕하세요', 'skyblue') 1개만 호출하여 1개만 노출되는 것이었다. 

 

복잡했던 과제 완!