요소의 속성값 제어

1. 속성값 읽기

• html 태그 요소의 특정 속성값을 얻기 위해서는 attr() 함수를 사용
  let 변수 = $("셀렉터").attr("속성이름");

2. 속성값 변경 / 추가하기

• HTML 태그 요소의 특정 속성값을 지정할 경우에도 attr() 함수를 사용
  $("요소").attr("속성이름", "값");
  $("요소").attr(
  "속성이름" : "값",
  "속성이름" : "값",
  "속성이름" : "값"
  );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        /* 전체 여백 제거 */
        *  { margin: 0; padding: 0; }

        /* 목록정의 태그 */
        ul { list-style: none; }

        /* float 처리용 클래스 및 마감제 클래스 정의 */
        .pull-left { float: left; }
        .clearfix:after { display: block; content: ''; clear: both; float: none; }
        
        /* 바깥의 박스 */
        .preview-box { margin: auto; width: 470px; border: 3px solid #d5d5d5; padding: 10px; }

        /* 큰 이미지 영역 */
        .preview { width: 100%; height: 470px; margin-bottom: 5px; }

        /* 목록정의 아이템 크기, 여백설정(왼쪽마진) */
        .item { width: 70px; height: 70px; margin-left: 10px; }

        /* 목록정의 첫 번째 항목은 왼쪽마진 제거 */
        .item:first-child { margin-left: 0; }

        /* 작은 크기의 이미지 사이즈 설정 및 마우스 커서 모양 설정 */
        .thumbnail { width: 100%; height: 100%; cursor: pointer; }
    </style>
</head>
<body>
    <div class='preview-box'>
        <img src="img/1.jpg" class="preview" id="target" />
        <ul class="list clearfix">
            <li class='item pull-left'><img src="img/1.jpg" class='thumbnail'/></li>
            <li class='item pull-left'><img src="img/2.jpg" class='thumbnail'/></li>
            <li class='item pull-left'><img src="img/3.jpg" class='thumbnail'/></li>
            <li class='item pull-left'><img src="img/4.jpg" class='thumbnail'/></li>
            <li class='item pull-left'><img src="img/5.jpg" class='thumbnail'/></li>
            <li class='item pull-left'><img src="img/6.jpg" class='thumbnail'/></li>
        </ul>
    </div>

    <script>
        $(".thumbnail").click(function(){
            // 클릭한 요소의 src 속성값 가져오기
            let img = $(this).attr('src');
            $("#target").attr('src', img);
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <!-- 베너영역 -->
    <div id="banner">
        <a href="#" id="banner-link" target="_blank">
            <img src="" id="banner-img" width="320" />
        </a>
    </div>
    <script>
        let banner = [
            {img : 'img/1.jpg', url : 'https://kh-academy.co.kr'},
            {img : 'img/2.jpg', url : 'https://www.naver.com'},
            {img : 'img/3.jpg', url : 'https://www.daum.net'},
            {img : 'img/4.jpg', url : 'https://www.google.com'}
        ];

        // n1 ~ n2 사이의 랜덤값을 리턴하는 함수
        function random(n1, n2) {
            return parseInt(Math.random()*(n2-n1+1) + n1);
        }

        // banner 배열에서 임의의 요소 하나를 선택하여 banner 영역에 적용하는 함수
        function random_banner(){
            // 0~배열길이 -1 사이의 랜덤값 얻기
            let rand = random(0, banner.length-1);

            // 데이터 중 하나 선택
            let item = banner[rand];

            // 베너 적용하기
            $("#banner-link").attr('href', item.url);
            $("#banner-img").attr('src', item.img);
        }

        // 페이지가 열린 후 호출될 함수
        $(function(){
            // 베너 적용 함수 호출
            random_banner();

            // 3초마다 베너 변경을 위해서 타이머 가동
            setInterval(function(){
                random_banner();
            }, 3000);
        });
    </script>
</body>
</html>

3. 페이지가 로드될 때

1. javascript
   window.onload = function() {
   ...
   }

2. jQuery
   $(document).ready(function() {
   ...
   });

3. jQuery 축약 버전
   $(function() {
   ...
   });