20220530 TIL

과제 점검 1

    const titleList = document.querySelector('.title_list');
    const title = document.querySelectorAll('.title_list>li')
    const contentBox = document.querySelector('.tab_contents')
    const content = document.querySelectorAll('.tab_content')
    titleList.addEventListener('click', e => {
        const selectedTitle = e.target; 👈
        console.log(e.target)
        title.forEach((ele)=>{
            ele.classList.remove('on');
        })
        e.target.classList.add('on');
        selectedContent(selectedTitle) 👈
    })
    const selectedContent = (selectedTitle) => {
        content.forEach((ele) => {
            ele.style.display='none'
        })
        let titleIndex = selectedTitle.dataset.num 👈
        console.log(titleIndex)
        content[titleIndex].style.display='block'
    }

1. 하위요소인 a가 선택됨 : css에 pointer-events: none; 속성을 주어 li가 선택될 수 있도록 함.
2. selectedContent 함수가 호출될때 클릭한 li 넘겨준다.
3. 클릭한 li의 datanum

과제 점검 2

📌 클릭한 요소의 배경색과 이미지 소스를 가져와 왼쪽에 보여줌.

<script>
    const animals = document.querySelector('.animal');
    const animal = document.querySelectorAll('.animal>li');
    const cover = document.querySelector('.cover');
    const bigImg = document.querySelector('#bigImg');
    animals.addEventListener('click', e =>{ 👈
        const selected = e.target;
        selectedTab(selected) 
    }) 
    const selectedTab = (selected) =>{
        let bg = window.getComputedStyle(selected).backgroundColor; 👈
        console.log(bg)
        cover.style.backgroundColor=bg
        let src = selected.firstChild.getAttribute('src');
        console.log(src);
        bigImg.setAttribute('src', src)
    }
</script>

1. e =>{} = function(e){}
2. window.getComputedStyle(대상).스타일속성 : css파일에 있는 스타일 값을 가져올 때.
3. 도큐먼트 오브젝트.style.스타일속성 = > 인라인으로 적용되어있을때/주입할때

text 읽어오기

 const h1 = document.querySelector('h1');
        const innerH = h1.innerHTML
        const innerT = h1.innerText
        const textC = h1.textContent
        console.log(innerH)
        console.log(innerT)
        console.log(textC)

1. innerHTML : 요소 노드의 콘텐츠 영역에 포함된 모든 HTML마크업을 문자열로 반환.
2. innerText : 공백 제거, 텍스트만 불러옴. style 적용된 것 읽어옴
3. textContent : html element 안읽어옴, 공백 읽어옴, style 적용안됨.

📌예제

  const wall = document.querySelector('#wall');
  const title = document.querySelector('h1');
  const papers = document.querySelector('.list');
  const paper = document.querySelectorAll('.list>li');
  papers.addEventListener('click' , e =>{
    const selectedPaper = e.target;
    console.log(selectedPaper)
    seletedTab(selectedPaper)
    paper.forEach((ele) => {
      ele.classList.remove('on');
    })
    //selectedPaper.classList.add('on');
    e.target.classList.add('on')
  })
  const seletedTab = (selectedPaper) =>{
    let src = selectedPaper.childNodes[0].getAttribute('src');
    console.log(src);
    let titleTxt = selectedPaper.firstChild.getAttribute('alt');
    console.log(titleTxt);
    title.innerText=titleTxt; 👈
    wall.style.backgroundImage=`url(${src})`;👈
  }

1. h1의 텍스트를 alt로 치환
2. background-image : url(src) 의 형식으로 표현하기 위해 url(${src})로 표기.

모달, 팝업

1.팝업 : 페이지가 열릴 때 다른 윈도우 창이 하나 더 뜨는것.

2.모달 : 페이지 안에서 뜨는 것.(새 창이 열리는 것이 아님.)
(dim : 배경 어둡게 하는 것.)


📌예제

1. 클릭하면 모달으로 이미지 src 보내기
2. 모달 제외한 영역 클릭하면 모달 닫기

    const imgbox = document.querySelector('.imgbox')
    const imglist = document.querySelectorAll('.imgsrc')
    const modal = document.querySelector('#modal_bg')
    const cngImg = document.querySelector('#cngImg')
    const body = document.querySelector('body')
    imgbox.addEventListener('click', (e)=>{
        const select = e.target
        let src = select.getAttribute('src');
        cngImg.setAttribute('src', src);
        modal.style.display='block'
    })
    body.addEventListener('click',(e)=>{
        const selected = e.target;
        let state = window.getComputedStyle(selected).display;
        console.log(state) 👈
        if(state==='block' && !(selected.closest('#modal_center'))){👈
            modal.style.display='none'
        }
    })

1. window.getComputedStyle(selected).display : 클릭한 영역이 inline인지 block인지 알려줌. 모달영역이 inline이므로 block 영역에 클릭하면 display =none으로 설정.

2. element.closest() : 설정한 아이디나 클래스 중 가장 가까운 조상을 선택함.
   element.parentNode : 바로 위 부모 선택 , element, comment(주석), text(공백) 모두 포함해서 부모로 여기기 때문에 에러 가능성이 있음.

아코디언 메뉴

📌예제
1. 해 클릭하면 초승달로 바뀌면서 나이트 모드로 바꿈.
2. 메뉴 제목을 클릭하면 내용이 펼쳐짐.
3. 제목을 다시 클릭하면 내용이 접힘.

    <script>
       const star = document.querySelectorAll('.star');
       const body = document.querySelector('body');
       const moon = document.querySelector('#moon');
       const contentList = document.querySelector('.content_list');
       const content = document.querySelectorAll('.content');
       const contentBody = document.querySelectorAll('.acco-body');
       //해와 달 전환 night, on
       star.forEach((ele) =>{
           ele.addEventListener('click', ()=>{
               let isNight = body.classList.contains('night');
               console.log(isNight) //false
               if(isNight){
                   body.classList.remove('night');
                   moon.classList.remove('on');
               }else{
                    body.classList.add('night');
                    moon.classList.add('on');
               }
           })
       }) 
       //메뉴아코디언
       contentList.addEventListener('click', e =>{
        let isActive = e.target.classList.contains('active');
        console.log(e.target.childNodes)
        e.target.childNodes.forEach((ele)=>{
          if(ele.tagName == 'P'){//태그이름 대문자로 적어야함.
            ele.classList.remove('open')
          }
        })
        if(isActive){
          e.target.classList.remove('active')
        }else{
            content.forEach((ele)=>{
              ele.classList.remove('active');
            })
            e.target.classList.add('active');
            contentBody.forEach((ele)=>{
              ele.classList.remove('open');
              //ele.style.display='none'
            })
            let index = e.target.dataset.num;
            contentBody[index].classList.add('open')
            //ele.style.display='block'(height 변경 애니메이션 없는 경우)
        }
       })