𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.04.27.수

Today I Learn 220427

오늘은 JavaScript의 Dom 조작에 대해 배웠다.

잊고있던 html&css 개념을 끄집어오려니 좀 헷갈렸다.

이번주 금요일에 다시 한 번 쓱 훑어봐야겠다.

오늘 워크샵 과제를 하는데 약간 내용이 이해가 안되어서 과제 풀이하는데 어려움이 있었다.

속성값 지정해주는건 잘 했는데, tag를 연결해 줄 때 약간 헷갈렸고

    // div#app 요소 선택
    const divTag = document.querySelector('#app')
    
    // h1 태그를 createElement 로 생성
    const h1Tag = document.createElement('h1')
    // 생성한 h1태그의 내용을 '오늘의 Todo' 로 설정
    h1Tag.innerText = '오늘의 Todo'
    divTag.append(h1Tag)
    // ul, li 태그들을 생성 및 내용 추가
    const ulTag = document.createElement('ul')
    const liTag1 = document.createElement('li')
    liTag1.innerText = 'homework하기'
    const liTag2 = document.createElement('li')
    liTag2.innerText = 'workshop하기'
    ulTag.append(liTag1, liTag2)
    divTag.append(ulTag)

부모 클래스를 잘 연결해 출력이 가능해졌다.

그리고 그 다음 과제도 약간 이해가 안되었는데, 값을 하나씩 불러와서 넣어줘야 했는데

    const cardsSection = document.querySelector('#cardsSection')

    function createCard(title, content) {
      // 여기에 카드를 작성하시오.
      const Article = document.createElement("article")
      Article.setAttribute("class","col-4")
      const Card = document.createElement("div")
      Card.setAttribute("class","card m-1")
      const CardBody = document.createElement("div")
      CardBody.setAttribute("class","card-body")
      const CardBodyTitle = document.createElement("h5")
      CardBodyTitle.setAttribute("class","card-title")
      CardBodyTitle.innerText = title
      const CardBodyText = document.createElement("p")
      CardBodyText.setAttribute("class","card-text")
      CardBodyText.innerText = content

      Article.append(Card)
      Card.append(CardBody)
      CardBody.append(CardBodyTitle,CardBodyText)
      return Article

이런식으로 넣어줬는데, 아래 방법처럼 넣어줄 수 도 있을거 같다.

  const articleAtts = cardsSection.querySelector("article").getAttribute("class")
  const newArticle = document.createElement("article")
  newArticle.setAttribute("class",articleAtts)