[SeSACX코딩온] js - jQuery, media query

jQuery

- html dom을 더 쉽고 짧은 문장으로 사용하기 위한 자바스크립트 라이브러리
- download방식과 cdn방식으로 사용가능
- $('선택자').동작함수(); 형태로 사용
수업중에는 jQuery3X minified cdn을 이용하여 작성함

1. jQuery 메소드

- 일반 js와 기능적으로 유사, 축약된 형태
- 변수를 생성하지 않고 $()안에 작성하여 html요소에 바로 접근할 수 있다.

	//input 값 반환, 설정
	$('input').val();
	$('input').val('설정할 값');

	//스타일, 속성 변경
	$('a').css('color', 'red');
	$('a').attr('style', 'color: red');

	//text, html 변경
	$('a').text('변경할 텍스트입니다');
	$('a').html('<strong>강조</strong>');

	//요소 추가, 삭제
	$('a').append('b');
	$('a').prepend('b');	//자식으로 추가
	$('a').before('b');
	$('a').after('b');	//형제로 추가
	$('a').remove();	//a를 삭제
	$('a').empty();	//a의 자식을 모두 삭제

	//js vs jQuery
	let li = document.createElement('li'); //생성
	li.innerText = '새로추가'; //내용 넣기
	let ul = document.querySelector('ul') //부모 가져오기
    ul.append(li); //요소 추가

	$('ul').append('<li>쉬운추가</li>');

	//요소 탐색
	$('a').parent().함수()
    $('a').parents().함수() //모든 조상 요소
    $('a').next().함수()
    $('a').prev().함수()
    $('a').children().함수() //모든 자식 요소

	//class 조작
	$('a').addClass('클래스명');
	$('a').removeClass('클래스명');
	$('a').hasClass('클래스명'); //true or false
	$('a').toggleClass('클래스명');
	$('a').switchClass('클래스명'); //jqueryui cdn을 첨부해야 사용가능
	

2. jQuery EventListener

- 이벤트의 종류는 js참고
- $('a').click(function(){형태1})
- $('a').on('click', function(){형태2})
- 함수 내에서 this를 활용 가능

	//이벤트 종류 - js참고
	$('a').ready(); //로딩 시
	$('a').click();
	$('a').mouseover();

	$('a').on('keydown',function(){
    	console.log(this); //현재 이벤트가 걸려있는 a요소 반환
      	console.log($(this).text()); //a요소에 입력되어 있는 text값 반환
    })
	//전역변수 설정 후 this요소를 저장하여 다른 함수에서 사용하는 등
	//다양한 활용이 가능하다

3. media query

- 반응형 웹페이지를 만들기 위해 사용
- 기기의 Viewport 기준
- @media 미디어유형 and (크기규칙) {}
- 미디어유형: all(전부), print(인쇄), screen(전부, 기본값)
- 크기 규칙: min(최소 넓이, 이상), max(최대 넓이, 이하)
- Breakpoint(중단점)을 정하고 layout변경
- 가로세로: orientation: landscape(가로), portrait(세로)

<div class='container'>
  <div class='item'>box</div>
</div>	
<style>
  .item {
  	width: 100px;
  	height: 100px;
  	background-color: skyblue;
  }
  
  <!-- 500px '이상'일 경우 배경색을 pink로 만듬 -->
  <!-- 중단점 두개: 300px <= width <= 700px 부등호표현 가능 -->
  @media screen and (min-width: 500px) {
  	.item {
  		background-color: pink;
  	}
  }
  <!-- 세로 모드로 변경할 경우 배경색을 gray로 만듬 -->
  @media (orientation: portrait) {
  	.item {
  		background-color: gray;
  	}
  }
</style>

* css변수

- 보통 :root {}안에 작성하여 전역변수로 사용할 수 있다
- 변수명은 --변수명(대소문자구분)
- 속성: var(변수명) 속성값을 대신해서 사용하여 반복되는 값을 쉽게 수정, 관리할 수 있다

	:root {
    	--height-screen-lg: 600px;
        --height-screen-sm: 300px
    }
    
    /* (중략) */
    .container {
    	height: var(--height-screen-lg);
    }
    .item {
    	line-height: var(--height-screen-lg);
    }