🎊학습한 내용

jQuery

$(function() {
	$('header').css('border', 'solid 1px red');
	$('header #masthead-id').css('color', 'red');
  
  	// $ 붙이기
	var $mastHead = $('#masthead-id');
  
  	// 주의: jQuery는 색인기준 even 0부터 시작해서 0, 2, 4 ... odd 1, 3, 5 ..
	$('.nav-item:even').css('background-color', 'blue');
	$('.nav-item:odd').css('background-color', 'green');
	$('.nav-item:eq(1)').css('background-color', 'pink');
  
  	// 주의점
	// index script 에서 사용할 라이브러리 먼저 연동, 아래쪽에 사용할 기능 입력
  
  	// 이벤트
	$('header #masthead-id').mouseenter(function() {
	// $('header #masthead-id').css('background-color', 'yellow');
	$(this).css('background-color', 'yellow');
	})
  
  	// 간소화
	$('header #masthead-id').on({
		mouseenter: function() {
			$(this).css('background-color', 'yellow');
		},
		mouseleave: function() {
			$(this).css('background-color', 'blue');
		},
		click: function() {
			$(this).css('background-color', 'pink');
		}
	})
  
	// fadeTo('fast', 1), fadeTo('fast', 0.5), hide(), show(), toggle(), slideToggle(), slideDown(), slideUp(), fadeOut(), fadeIn(), addClass(), removeClass(), 
  
  
  	// 버튼 누르면 색 변화
  	var $id = $('#masthead-id');

	$('.btn-one').click(function() {
		/*
		if($id.hasClass('blue')) {
			$id.removeClass('blue');
		} else {
			$id.addClass('blue');
		}
		*/

		$id.toggleClass('blue');
	});
	

이하 내용은 github 업로드

🎁팀 프로젝트

프런트엔드만 배운 4명이서 기업의 홈페이지를 하나 구축하는 프로젝트가 시작되었다. 팀장으로서 모든 팀원이 직접 만들어 보면서 경험하는 기회가 되었으면 좋겠다. 😀