웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5

티스토리 뷰

유료강의/국비지원

웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5

2021bong 2021. 10. 19. 19:10

옵션을 선택하면 이미지가 바뀌도록 하기

<!DOCTYPE html>
<html lang="en">
<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">
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-3.form.js"></script>
  <title>Document</title>
</head>
<body>
  <select>
    <option value="../img/img-01.jpg">강아지</option>
    <option value="../img/img-02.jpg">고양이</option>
  </select>
  <div>
    <img src="../img/img-01.jpg">
  </div>
</body>
</html>

제이쿼리

$('select').on('change', function(){
  let url = $(this).val();
  $('div').html(`<img src="${url}">`)
  $('div img').attr('src', `${url}`);
});

바닐라

const select = document.querySelector('select')

select.onchange = function(){
  let url = this.value;
  document.querySelector('div').innerHTML = `<img src="${url}">`;
}

DOM제어에 기본적인 바닐라 자바스크립트 코드

document.querySelector('div').classList.textContent = '';
document.querySelector('div').classList.style = '';
document.querySelector('div').classList.add('active')
document.querySelector('div').classList.remove('active')
document.querySelector('div').classList.contains('active') // active클래스가 들어있는지 확인할 때 사용 > 불리언 값 반환
document.querySelector('div').classList.toggle('active')

선택한 컬러에 따라서 보더 색상이 달라지게 하기

<!DOCTYPE html>
<html lang="en">
<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">
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-3.form.js"></script>
  <title>Document</title>
</head>
<body>
  <select>
    <option value="../img/img-01.jpg">강아지</option>
    <option value="../img/img-02.jpg">고양이</option>
  </select>
  <div>
    <img src="../img/img-01.jpg">
  </div>

  <input type="color" name="b_color">
  <button>적용</button>
</body>
</html>

$('select').on('change', function(){
  let url = $(this).val();
  $('div').html(`<img src="${url}">`)
  $('div img').attr('src', `${url}`);
});
$('button').on('click', function(){
  let color = $("input[name='b_color']").val();
  $('div').css({border:`solid 5px ${color}`});
});

 // 제이쿼리는 선택자를 하나로 두고 여러 메소드 실행가능
 $('div')
  .html(`<img src="${url}">`)
  .css({border:`solid 5px ${color}`});

matchMedia() 찾아보기

객체의 키 값 설정

코드의 가독성이 떨어지니 비추천

카멜표기법이나 _를 사용

let data = [
  {"url-01":"../img/img-01.jpg", name:"사진1"} // 객체의 키 값에 -나 공백을 사용할 땐 문자열로 처리
];
console.log(data[0].name, data[0]['url-01']); // 사용할 때는 []를 사용하고 .를 생략

배열에 넣은 값을 옵션에 추가하고 사진 추가하기

<!DOCTYPE html>
<html lang="en">
<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">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-4.form.js"></script>
  <title>Document</title>
</head>
<body>
  <style>
    .list {
      width: 80%;
      margin: 100px auto;
      text-align: center;
    }
    .list div {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
    }
    .list div figure {width: 30%;}
    .list div figure img {width: 100%;}
  </style>
  <article class="list">
    <h2>이미지 리스트</h2>
    <p>
      <select>
      </select>
      <button>추가</button>
    </p>
    <div>
      <figure>
        <img src="../img/img-01.jpg">
        <figcaption>이미지제목</figcaption>
      </figure>
    </div>
  </article>
</body>
</html>

*배열에 객체를 사용할 때 : 주의, = 하면 실행안됨

option 태그 추가

let data = [
  {url:"../img/img-01.jpg", name:"사진1"},
  {url:"../img/img-02.jpg", name:"사진2"},
  {url:"../img/img-03.jpg", name:"사진3"},
  {url:"../img/img-04.jpg", name:"사진4"},
  {url:"../img/img-05.jpg", name:"사진5"},
  {url:"../img/img-06.jpg", name:"사진6"},
  {url:"../img/img-07.jpg", name:"사진7"},
];

$.each(data, function(i){ // 선택자없이 each 메소드 사용, 받아올 값으로 data 지정
  $('.list select').append(
      `<option value="${data[i].url}">${data[i].name}</option>`
  );
});

html에 option태그가 없기때문에 선택자없이 그냥 each 메소드 사용

data를 받아와서 돌리기 때문에 data를 받아올 값으로 지정

each메소드는 value도 받아 올 수 있어서 이렇게도 가능

// 제이쿼리
$.each(data, function (i, v) { // 제이쿼리 index, value
  $('.list select').append(
    `<option value="${v.url}">${v.name}</option>`
  );
});

// 바닐라
data.forEach(function(v, i){ // 바닐라 자바스크립트 value, index
  let select = document.querySelector('.list select');
  select.innerHTML += `<option value=${v.url}>${v.name}</option>`
});

//또는
data.forEach(function(v, i){ // 자바 스크립트 value, index
  let select = document.querySelector('.list select');
  let newOp = document.createElement('option');
  newOp.value = v.url;
  newOp.append(v.name);
  select.append(newOp);
});

사진 추가

data.forEach(function (v, i) {
  let select = document.querySelector('.list select');
  select.innerHTML += `<option value="${i}">${v.name}</option>` // ${i}로 수정
});

$('.list button').on('click', function () {
  let sVal = $('.list select').val();
  let name = data[sVal].name;
  let url = data[sVal].url;
  $('.list div').append(
    `<figure>
    <img src="${url}">
    <figcaption>${name}</figcaption>
    </figure>`
  );
});

전체 추가 버튼

  <article class="list">
    <h2>이미지 리스트</h2>
    <p>
      <select>
      </select>
      <button class="add">1개 추가</button> // class 추가
      <button class="all">전체 추가</button> // 버튼 추가
    </p>
    <div>
    </div>

$('.list .add').on('click', function () {
  let sVal = $('.list select').val();
  let name = data[sVal].name;
  let url = data[sVal].url;
  $('.list div').append(
    `<figure>
    <img src="${url}">
    <figcaption>${name}</figcaption>
    </figure>`
  );
});

$('.list .all').on('click', function () {
  $('.list option').each(function (i) {
    $('.list div').append(
      `<figure>
        <img src="${data[i].url}">
        <figcaption>${data[i].name}</figcaption>
        </figure>`
    );
  });
});

같은 사진은 또 추가되지 않게 하기

728x90

저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 8일차 - 스토리지+로드 예제 1, 2, 3 (0)	2021.10.21
웹퍼블리셔 활용 7일차 - 폼 예제 6, 7, 8 (0)	2021.10.20
웹퍼블리셔 활용 5일차 - 폼 예제 1, 2 (0)	2021.10.18
웹퍼블리셔 활용 4일차 - 스크롤 예제 3, 제이쿼리UI (0)	2021.10.14
웹퍼블리셔 활용 3일차 - 스크롤 예제 2 (0)	2021.10.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

봉보로봉봉

티스토리 뷰

웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5

'유료강의 > 국비지원' 카테고리의 다른 글

티스토리툴바