[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고(1) | jQuery, 반응형 웹, Bootstrap

1. 이번 목표:
    jQuery, media query(반응형 웹), Bootstrap 을 사용해보자! 

 

2. 배운 내용 요약

  1. jQuery

자바스크립트 언어를 간편하게 사용할 수 있도록 순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

- 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
- HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가 능
- 애니메이션 효과나 대화형 처리를 간단하게 적용
- 같은 동작을 하더라도 더욱 짧게 구현 가능
- 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

  jQuery CDN(Content Delivery Network)

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

 

    1-1. jQuery 메소드

<!-- $는 jQuery()함수의 축약 형태로, 식별자 역할을 한다.
$(선택자).동작함수();
-->

<!-- 값 가져오기 $(선택자).val() -->
let value = $("input").val();

<!-- 값 설정하기 $(선택자).val("설정할 값") -->
$('input').val("설정 완료!);

<!-- style 변경하기 $(선택자).css("속성", "속성값") -->
$("span").css("color", "blue");
// let span = document.querySelector('span');
// span.style = "color: red";

<!-- 속성 변경하기 $(선택자).attr("속성", "속성값") -->
$("#li2").attr("style", "color: red");

<!-- Text 변경하기 $(선택자).text("글자"); -->
$("span").text("안녕하세요");

<!-- HTML 변경하기 $(선택자).html("html") -->
$("P").html("<h1>jQuery</h1>");

<!-- 요소 추가 -->

<!-- $(선택자).append(요소) 선택된 요소의 자식 중 마지막으로 추가 -->
$("p").append(h1);
$("p").appendChild(h1);

<!-- $(선택자).prepend(요소) 선택된 요소의 자식 중 첫번째로 추가 -->
$("p").prepend(h1);

<!-- $(선택자).before(요소) 선택된 요소의 형제 중 이전 형제로 추가 -->
$("p").before(h1);

<!-- $(선택자).after(요소) 선택된 요소의 형제 중 다음 형제로 추가 -->
$("p").after(h1);


<!-- 요소 삭제 -->

<!-- $(선택자).remove();
  선택한 요소를 DOM 트리에서 삭제.
  인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제 -->
$(".div").remove();

<!-- $(선택자).empty();
  선택한 요소의 자식 요소를 모두 삭제.
  선택한 요소는 남아 있고 그 안이 다 비워진다.-->
$("ul").empty();



<!-- 요소 탐색 -->

<!-- $( 선택자 ).parent().함수()
바로 위에 존재하는 하나의 부모 요소 선택 -->

<!-- $( 선택자 ).parents().함수()
바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택 -->

<!-- $( 선택자 ).next().함수()
선택된 요소 바로 다음에 위치한 형제 요소 선택 -->

<!--$( 선택자 ).prev().함수()
선택된 요소 바로 이전에 위치한 형제 요소 선택 -->
 
<!-- $( 선택자 ).children().함수()
선택된 요소의 자식 요소 모두 선택 -->

<!-- 클래스 조작하기 -->
 
<!-- ( 선택자 ).addClass(“클래스명”)
 선택된 요소에 클래스 추가 -->
 
<!-- $( 선택자 ).removeClass(“클래스명”)
선택된 요소에 클래스 삭제 -->

<!-- $( 선택자 ).hasClass(“클래스명”)
선택된 요소에 클래스가 있는지 여부 확인 
Return 값은 true 와 false 로 나온다. -->

<!-- $( 선택자 ).toggleClass(“클래스명”)
선택된 요소에 클래스가 있으면 추가, 없으면 삭제 -->

<!-- $( 선택자 ).switchClass(“클래스명1”, “클래스명2”, 시간)
클래스1을 클래스2로 바꾼다.
이때, 시간은 클래스1을 클래스2로 바꿀 때 걸리는 시간을 의미 -->

 

  1-2. 이벤트 리스너

• 로딩 이벤트
  $().ready();
  $()
• 마우스 이벤트
  click()
  mouseover()
  hover()
  scroll()
• 키보드 이벤트
  keydown()
  keyup()

 

  2. 반응형 웹( media query)

반응형
  - 동일한 페이지를 보여주나 디바이스 크기에 따라 레이아웃을 달리 보여줌.
  - 모바일로 웹 사이트를 접속하는 경우가 많아 반응형은 매우 중요한 기술.

적응형
  - 사용자가 모바일 환경인지 PC 환경인지에 따라 다른 페이지를 보여줌 
    ex) 모바일: https://m.naver.com

 

  2-1. @media (미디어 쿼리)

@media 미디어유형 and (크기 규칙)
미디어 유형: All(전부) / Print(인쇄) / Screen(전부)
크기 규칙: min(최소 viewport 넓이) / max(최대 viewport 넓이)

// 화면 넓이가 480px 이하일 경우 화면에 적용
@media screen and (max-width: 480px) {
	div {
   	 	width: 100px;
    }
}

화면 넓이가 480px 이상일 경우 인쇄에 적용
@media print and (min-width: 481px) {
	div {
		width: 200px;
	}
}

// 가로 모드일 때
@media screen and (orientation: landscape) {
	body {
    	background-color: bisque;
    }
}

// 세로 모드일 때
@media screen and (orientation: portrait) {
	body {
    	background-color: tomato;
    }
}

 

 

3. Bootstrap

웹 사이트를 쉽게 만들 수 있게 도와주는 공개 HTML, CSS, JS 프레임워크.
class명을 통해 부트스트랩에 내장되어 있는 디자인을 적용시킬 수 있다.

 

// 부트스트랩 CSS CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

// 부트스트랩 JS CDN
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

// 부트스트랩 icon CDN
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z"/></svg>

 

 

 

3. 회고

드디어 오늘 프론트엔드의 기초 부분이 끝났다. 저번주에 이어 이번주까지 기존에 배우고 많이 사용했던 기본 지식이라 강의 시작을 재미있게 시작할 수 있었던 것 같다. 다음 수업 부터는 aws를 배우는 것으로 알고 있는데 매우 기대가 된다. 작년 국비를 들었을 때 aws를 배우는 타이밍에 대학병원에서 수술을 받기 위해 입원했던 터라 그 이후로 진도를 따라잡기가 매우 힘들어서 혼났던 적이 있다.

이번에는 수업 안빠지고 aws 제대로 배워서 이해라는걸 좀 하고싶다. aws를 배우고 나면 node.js도 배우고 백엔드 지식들을 많이 쌓아갈텐데 왜이렇게 기대가 되는지 모르겠다!

열심히 잘 배워서 얼른 실력있는 개발자가 되고싶다. 파이팅~