[JS] 18- HTML 제어하기

Jang·2022년 9월 8일
0

학원

목록 보기
10/26

기본용어

  • HTML 태그 : Element
  • 값이 있는 속성 : Attribute
  • 값이 없는 속성 : Property


image

<!DOCTYPE html>
<html lang="ko">
  <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>

    <style>
      .img-list {
        list-style: none;
        padding: 0;
        width: 640px;
        margin: auto;
        display: flex;
      }
      .img-list li {
        width: 20%;
        flex: 1;
      }

      .link {
        display: block;
        margin: 10px;
      }
      .img-list li img {
        width: 100%;
      }
      .viewer {
        width: 620px;
        margin: auto;
        padding: 0 10px;
      }
      #target {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <ul class="img-list">
      <li><a href="img/img01.jpg" title="테스트 이미지1" class="link"><img src="img/img01.jpg" /></a></li>
      <li><a href="img/img02.jpg" title="테스트 이미지2" class="link"><img src="img/img02.jpg" /></a></li>
      <li><a href="img/img03.jpg" title="테스트 이미지3" class="link"><img src="img/img03.jpg" /></a></li>
      <li><a href="img/img04.jpg" title="테스트 이미지4" class="link"><img src="img/img04.jpg" /></a></li>
      <li><a href="img/img05.jpg" title="테스트 이미지5" class="link"><img src="img/img05.jpg" /></a></li>
    </ul>

    <div class="viewer">
      <img src="img/img01.jpg" id="target" />
    </div>

    <script>
      document.querySelectorAll(".link").forEach((v) => {
        v.addEventListener("click", (e) => {
          // 링크에 대한 클릭 이벤트 발생 후 href 속성이 동작하게 된다.
          // 아래 구문은 링크에 대한 클릭 이벤트 동작 후,
          // href 속성이 동작하는 것을 방지한다.
          e.preventDefault();

          // 클릭된 링크가 갖는  속성값 가져오기
          // --> 링크가 가르키는 원본 이미지의 주소
          const k = v.getAttribute("href");
          const t = v.getAttribute("title");
          console.log(k);
          console.log(t);

          document.querySelector("#target").setAttribute("src", k);
          document.querySelector("#target").setAttribute("title", t);
        });
      });
    </script>
  </body>
</html>
  • flex: 1(= flex: 1 1 0)
    flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex: 1 속성은 flex: 1 1 0 속성을 의미한다.
    즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다.

  • e.preventDefault();
    a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.
    preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.

    • 주로 사용되는 경우
      1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
      2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
        (출처: https://programming119.tistory.com/100 [개발자 아저씨들 힘을모아:티스토리])

0개의 댓글