[ jQuery ] 제이쿼리. 버튼의 서로 다른 디자인 만들기(transition 활용)

※ nth-child(n) / nth-of-type(n) 사용법

 

- nth-child(n)는 부모의 모든 자식중에서 n번째 자식을 찾는다.

- nth-of-type(n)은 부모의 자식 중 해당하는 특정 타입의 n번째 자식을 찾는다.

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button>버튼1</button>
<button>버튼2</button>
<button>버튼3</button>

button {
  font-size:3rem;
  display:block;
  margin-bottom:50px;
  transition: font-size 1s;
}

body {
  transition:background-color 1s;1
}

$('button:nth-of-type(1)').click(function(){
  $('button').css('font-size', '3rem');
  $('button:nth-of-type(1)').css('font-size', '7rem');
  $('body').css('background-color', 'green');
});

$('button:nth-of-type(2)').click(function(){
  $('button').css('font-size', '3rem');
  $('button:nth-of-type(2)').css('font-size', '7rem');
  $('body').css('background-color', 'blue');
});

$('button:nth-of-type(3)').click(function(){
  $('button').css('font-size', '3rem');
  $('button:nth-of-type(3)').css('font-size', '7rem');
  $('body').css('background-color', 'gold');
});