1)배열안에 객체넣을 수 있다.

var products = [{
    name: '농구공',
    description: '농구 황제 마이클 조던이 사용한 농구공입니다',
    price: 100000,
}, {
    name: '축구공',
    description: '축구 황제 메시가 사용한 축구공입니다',
    price: 50000
}]

---

2)함수명 짓는 방법

• 직관적으로 지어라
  • 배열의 갯수를 출력하는 함수
  • const getArrayLength = {}

---

3) 꼭 함수에 return을 넣지 않아도 된다.

var products = [{
    name: '농구공',
    description: '농구 황제 마이클 조던이 사용한 농구공입니다',
    price: 100000,
		seller: '민수'
}, {
    name: '축구공',
    description: '축구 황제 메시가 사용한 축구공입니다',
    price: 50000,
		seller: '철수'
}]

const getProductsPrice = function(array){ 
    for(let i=0;i<array.length;i++){
        console.log(array[i].price);
    }
}

• 배열안에 객체의 price를 출력하는 함수를 만들었다.
• return을 쓰지않고, console.log();를 이용하여 결과를 출력하도록 했다.

---

4)객체안에 이미지 url넣기

const products = [
  {
    name: "농구공",
    price: 100000,
    seller: "조던",
    imageUrl: "images/products/basketball1.jpeg",
  },
  {
    name: "축구공",
    price: 50000,
    seller: "메시",
    imageUrl: "images/products/soccerball1.jpg",
  },
  {
    name: "키보드",
    price: 10000,
    seller: "그랩",
    imageUrl: "images/products/keyboard1.jpg",
  },
];

---

5).innerHTML html tag를 js로 선택하고, 내부에 html tag 설정하기

document.querySelector("#product-list").innerHTML = "<p>안녕</p>";

• 주의사항 : 해당 코드는 #product-list tag보다 아래에 작성되어 있어야 한다.
  • js과 html연결하는 코드가 id가 product-list인 것보다 밑에 있어야 한다.
  • 만약 위에 작성되어있다면, document.querySelector("#product-list")은 빈 값이 되기 때문에, 오류가 뜬다.
  • 오류가 뜨는 이유는 위에서 아래로 코드를 읽기 때문이다.
  • 결론 <script></script>를 body tag 밑에 두자

---

6) .innerHTML` html tag를 js로 선택하고, 내부에 html tag 많이 설정하기

const products = [
  {
    name: "농구공",
    price: 100000,
    seller: "조던",
    imageUrl: "images/products/basketball1.jpeg",
  },
  {
    name: "축구공",
    price: 50000,
    seller: "메시",
    imageUrl: "images/products/soccerball1.jpg",
  },
  {
    name: "키보드",
    price: 10000,
    seller: "그랩",
    imageUrl: "images/products/keyboard1.jpg",
  },
];

let productsHtml = "";
for (let i = 0; i < products.length; i++) {
  productsHtml +=
    '<div class="product-card">' +
    "<div>" +
    '<img class="product-img" src="images/products/basketball1.jpeg" alt="농구공"/>' +
    "</div>" +
    '<div class="product-contents">' +
    '<span class="product-name">농구공 1호</span>' +
    '<span class="product-price">50000원</span>' +
    '<div class="product-seller">' +
    '<img class= "product-avatar" src="images/icons/avatar.png" alt="" />' +
    "<span>그랩</span>" +
    "</div>" +
    "</div>" +
    "</div>";
}

document.querySelector("#product-list").innerHTML = productsHtml;

1. html tag 복붙
2. 한 줄씩 ''로 감싼다.
3. 한 줄씩 맨 끝에 +를 붙인다.
4. 맨 마지막 tag에는 +없이 ;붙인다.

---

7) js에서 html tag 작성시에 문자열 형태여야 한다.

• 반드시 작은 따옴표로 감싸야 한다. ''
• 여러개 작성시에는 +도 붙여야한다. 6)참고
  document.querySelector("#product-list").innerHTML = "<p>안녕</p>";

---

8)실수 / js 코드 작성시에는 순서가 매우 중요하다

document.querySelector("#product-list").innerHTML = productsHtml;

let productsHtml = "";
for (let i = 0; i < products.length; i++) {
  productsHtml +=
    '<div class="product-card">' +
    "<div>" +
    '<img class="product-img" src="images/products/basketball1.jpeg" alt="농구공"/>' +
    "</div>" +
    '<div class="product-contents">' +
    '<span class="product-name">농구공 1호</span>' +
    '<span class="product-price">50000원</span>' +
    '<div class="product-seller">' +
    '<img class= "product-avatar" src="images/icons/avatar.png" alt="" />' +
    "<span>그랩</span>" +
    "</div>" +
    "</div>" +
    "</div>";
}

• id가 product-list인 html tag에 html tag를 작성하려고 했는데, document.querySelector("#product-list").innerHTML = productsHtml; 코드가 productsHtml 변수 선언보다 위에 있기 때문에, productsHtml 변수는 빈 값이므로 화면에 나타나지 않았다.

---

9)실수 / img가 안뜬다

• <img class="product-img" src="images/products/basketball1.jpeg alt="농구공"/>
  src attribute에서 닫는 큰따옴표가 지워져 있어서 오류가 떳다.

<img src="폴더명/파일명.파일종류" alt="이미지 설명" />
<img src="images/icon/avatar.jpg" alt="이미지 설명" />

• /images/icon/avatar.jpg 맨 앞에 / 붙여서 오류떳음

---

10)html attribute에 js 변수 넣기

'<img class="product-img" src="' + product.imageUrl + '" alt="농구공"/>'

1. attribute안에 '' 넣는다
2. ''안에 ++넣는다
3. ++사이에 js 변수를 넣는다

---

11)html contents에 js 변수 넣기

'<span class="product-name">' +product.name +' 원</span>'

• 10) 방법이 동일하다.
• ''밖에 단어를 입력하면, js변수와 단어가 연결된다.

---

13) overflow: hidden;의미

• 설정하는 곳 -> 부모
• 의미 : 자식이 부모의 공간을 침범했을 때, 부모에다가 사용하면, 자식이 부모의 공간을 침범한 부분이 사라진다.
• 예시 : border-radius 적용했는데 이미지는 네모이기 때문에, 각이 뾰족할 때,