웹3 강의 정리 통합

수업 페이지

자료 - 이동

웹3

 

5/10 - 1강

Gmarket 3차메뉴 구성

코드펜 : 이동

[ 3차메뉴 구성 tip]

리스트에 관련된 서브메뉴를 구현할 때는 디테일한 레이아웃을 구현하기 전에 박스를 만들고 위치를 잡은 후 
hover를 먼저 구현해야 한다. 
1. html에 서브메뉴 구조 추가하기 (반드시 텍스트 작성)
2. css에서 fixed나 absolute 우선 적용
3. html에서 원하는 위치에 relative 작성
4. 위치속성으로 위치잡기
5. list 2번에서 서브메뉴 구조 추가하기
6. css에서 서브메뉴 display: none; 처리하기
7. hover 구현하고 list 1,2 번에서 제대로 작동하는지 확인하기
8. 확인 후 display: none;과 hover 주석처리하고 디테일한 구조 구현
9. 디테일한 구조 구현 후 나머지 list에 구조 붙여넣기 (붙여넣기 시 html에서 구조 닫은 후 안전하게 복붙하기)

 

3차메뉴 구성

[ 3차메뉴 위치잡기 ]

모든 카테고리(li) 위에 마우스를 올려도 3차메뉴의 위치가 항상 같아야 하기 때문에 .container에 position:relative;를 적용시킨 후 css에서 .g-market-3_nav에 right: 0; top: 0;을 적용해야한다

웹3 gmarket - 5/10 1강

 

---

Gmarket 3차메뉴 구성 - 2

[코드 잘못 썼을 경우]

ctrl F 누르고 잘못된 곳 찾아서 바꾸기     ***코드 잘 확인하고 바꾸기***

 

[span 특성]

다양한 용도를 가지고 있다! 응용하기
줄바꿈 방지, 강조, 불필요한 속성의 상속을 막아줌 (cursor같은 것), 각각의 텍스트에 속성을 줄 때

 

 

[css 라이브러리]

자주 사용하는 css 설정을 라이브러리로 미리 설정해 둔다.

라이브러리에 있는 css 속성이 필요할 경우 html에 적용시켜준다. (선택자인 .만 빼서 붙여넣어주면 된다)

 

**주의사항 : html에 라이브러리 파일 연결 시 다른 css파일 최상단으로 넣어줘야 함

  <link rel="stylesheet" href="style/la.css">

  <link rel="stylesheet" href="style/style.css">

  <link rel="stylesheet" href="style/gm3.css">

 

 

[cusor설정]

 <li>

              <span>패션의류.잡화.뷰티</span>

              <!-- <div class="g-market-3_nav">3차메뉴2</div> -->

            </li>

            <li><span>유아동</span></li>

            <li><span>식품.생필품</span></li>

            <li><span>홈데코.문구.취미.반려</span></li>

            <li><span>컴퓨터.디지털.가전</span></li>

            <li><span>스포츠.건강.렌탈</span></li>

            <li><span>자동차.공구</span></li>

            <li><span>여행.도서.e쿠폰</span></li>

a태그에서 span으로 바꾸는 이유: <!-- a태그에서 바꿔줌으로서 상속을 막아준다 (cusor) -->

html

.g-marget-2__nav > ul > li > span{

  /* text 속성은 상속되기 때문에 span에 직접 입력 */

  line-height: 43px;

  cursor: pointer;

  font-size: 15px; color: #fff;

}

css

초록색 바탕: li

텍스트: span

 

---

Java Script

[console 용도]

코드펜 : 이동

1. 자바스크립트에서 문자는 ""안에 작성해야한다.
2. 코드펜은 바로바로 정리하는 능력이 없기 때문에 자바스크립트 최상단에 콘솔창을 깨끗하게 사용하겠다는 console.clear(); 코드를 반드시 작성 후 사용해야한다.(가장 상단에 적어야 한다. - 아래로 쭉 실행 후 다시 돌아오기 때문)
3. console창에 자바스크립트 데이터를 출력하려면 console.log();라는 코드가 필요하다. 소괄호 안에 출력할 데이터 입력 (css의 border 역할이라고 생각하자)

 

 

[문자와 숫자 데이터]

코드펜: 이동

1. js에서 숫자는 ""없이 작성한다.
2. 숫자와 문자를 더하면 숫자가 문자화 되어서 최종적인 데이터는 문자데이터로 출력된다.

 

 

[변수]

https://codepen.io/kimhyeji324/pen/mdYPbvB/07d89199754a51610972b452a86bd04f?editors=0011

변수

 let no = 0;

1. let = 변수 이름을 짓는 코드
2. no = 변수명
3. = -> 대입연산자(오른쪽에 있는 데이터를 왼쪽에 있는 공간에 넣겠다.라는 의미로 생각)

 

console.log(name);

1. name이라는 공간에 어떤 데이터가 들어있는지 확인하는 코드 (console에 뜸)
2. 변수 데이터를 사용할때는 ""없이 사용 해야한다.

 

변수명 특징

1. 같은 변수명은 사용 할 수 없다.
2. 대시(-)는 사용할 수 없다. -> 오류
3. 언더바(_)만 사용 가능하다.
4. 변수명으로 사용할 수 없는 단어들이 있다.
5. 뒷단어 첫 글자는 대문자로 작성한다.(가독성을 위해)  ex. name_Age

 

 

 

[연산자와 피연산자]

연산자를 제외한 것들을 피연산자라고 부른다.

 

1. 사칙 연산자

더하기(+)
빼기(-)
곱하기(*)
나누기(/)

 

2. 나머지연산자 - 몫이 아닌 나머지

0 -> 짝수
1 -> 홀수

2 % 2 -> 0
3 % 2 -> 1

짝수 % 2 -> 0
홀수 % 2 -> 1

 

3. 대입연산자

대입연산자(=) : 오른쪽에 있는 데이터를 왼쪽에 있는 피연산자에 대입할때 사용한다.
ex) let no(피연산자)    =(대입연산자)     1(데이터); 

4. 연결연산자

연결 연산자(+)
ex) "1" + 1

 

5. 복합대입연산자

+=
-=
*=
/+

 

6. 비교연산자

- 왼쪽 오른쪽 데이터를 비교하는 연산자

데이터 == 데이터 (같다)
데이터 > 데이터 (왼쪽에 있는 데이터보다 오른쪽에 있는 데이터가 더 작다)
데이터 >= 데이터 (왼쪽에 있는 데이터보다 오른쪽에 있는 데이터가 더 작거나 같다.)
데이터 < 데이터 (왼쪽에 있는 데이터보다 오른쪽에 있는 데이터가 더 크다.)
데이터 <= 데이터 (왼쪽에 있는 데이터보다 오른쪽에 있는 데이터가 더 크거나 같다.)

 

7. 논리연산자

- 양 쪽 데이터를 비교해서 참과 거짓으로 구분하는 연산자

데이터 && 데이터 (양 쪽 데이터가 전부 참일때 참을 반환)
데이터 || 데이터 (양 쪽 데이터 중 하나만 참이여도 참을 반환)
! (반환 값 반전)

 

 

[if문]

if (10 >= 10) {	console.log("if실행");  }    //실행 O
if (10 >= 20) {	console.log("if실행");  }    //실행 X

()안에 내용이 진짜면 if문 실행, ()안에 내용이 가짜면 if문 실행X

 

 

 

[함수]

function init() {
	console.log("실행");
}

init();

// console 창에 "실행"이라고 뜸

 1. 함수명 특징은 변수명 특징과 동일하다.
 2. 이벤트 안에서 생략된 형태를 사용할 수 있지만 생략하지 않을때는 함수명이 반드시 필요하다.
 3. 함수는 호출되기 전까지 실행문이 실행되지 않는다.
 4. 함수 호출시 실행문이 호출되는것이 아니라function부터 호출된다.
 5. 호출 코드 -> 함수명();

 

 

 

 

[제이쿼리]

https://codepen.io/kimhyeji324/pen/WNBwbeQ/caf1712fbb1ab84cc9560c6522486882?editors=1011

제이쿼리

// html 제이쿼리 연결
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

 cdnjs에서 js 연결(링크)

 

$().이벤트();

 1. $ -> 제이쿼리 식 시작

 2. 첫번째 소괄호() : 선택자(태그 선택자, 클래스 선택자, 아이디 선택자 등... this, 변수명)

 3. .이벤트 : 제이쿼리 이벤트

 4. 두번재 소괄호() : 이벤트와 관련된 실행코드들이 들어온다. 이벤트에 따라서 구조가 달라진다. 보통 함수를 먼저 쓴다.

 

 

 

[제이쿼리 연결 확인하는 코드]

$(document).ready(function(){

  console.log("js연결완료")

});

 

 

[제이쿼리 활용법]

제이쿼리에서 css를 이벤트로 만드는 건 좋지 않다. (코드도 길어지고 무거워짐)

css에서 선택자로 속성을 만든 후 제이쿼리에서 켜주는 식으로 사용해야한다. (click, addClass)

//css

.box.active {
	background-color: red;
	width: 300px; height: 300px;
	font-size: 20px; text-align: center;
	line-height: 300px;
}

// js

$("div").click(function () {
	$("div").addClass("active");
});

 

 

 

 

[자바스크립트 클릭이벤트]

https://codepen.io/kkkge/pen/RwmRwEJ

Click
조건1: 버튼을 클릭하면 노란색 선 안에 배경색이 초록색으로 변경된다.

1. addClass이벤트를 작성할 때 대문자 C로 작성해야한다.
2. addClass에 관련된 소괄호에는 ()html에 강제로 입력할 문자를 작성한다. 작성할 때 점(.)을 함께 작성하면 점까지 html class 속성값에 추가된다.

removeClass
조건2: 배경색 제거 버튼을 클릭하면 .box배경색이 다시 흰색으로 변경

 

[else]

https://codepen.io/kkkge/pen/gOJMbMy

 

 

[나머지 연산자 토글형태]

https://codepen.io/kkkge/pen/NWVrPjq

목적: 버튼을 한번 클릭하면 배경색이 초록색으로 다시 클릭하면 흰색으로 변경

 

 

POPUP 2

[수업내용 코드펜]

있는 그대로 복붙했으나 팝업이 안뜸..

 

[배경 클릭 시 팝업 닫힘]

1. 배경을 클릭했을 때에도 닫히게 하기 위해선 button(태그)뒤에 .popup-section(클래스)를 추가해준다.
    > 이 때 웹상에서 검사 기능을 활용하여 구조를 찾아준다.

$("button, .popup-section").click(function () {

  $(".popup-section").removeClass("active");

});

   > 이때 팝업창을 눌러도 닫히는 문제가 발생한다.
2. .popup-content를 클릭하면 .popup-content는 클릭되고 부모인 .popup-section은 클릭되면 안된다.
   > 따라서 popup-section의 하위엘리먼트인 .popup-content의 클릭이벤트에 return false;를 넣어 클릭을 방지해준다. (return false의 특성)

// .popup-content

// click (o)

// return false

// function

$(".popup-content").click(function (){

  return false;

});

 

 

[stopPropagation]

name은 약간 라이브러리처럼 생각할 수 있다.

 

 

[이름생략]

add_Popup이라는 이름이 굳이 필요하지 않다 어짜피 이벤트를 발동하면 바로 함수가 실행되기 때문이다.
따라서 이름을 생략하여 함수식을 소괄호 안에 넣어줄 수 있다.

$(".popup-open").click(add_Popup);

function add_Popup() {

  $(".popup-section").addClass("active");

}

add_Popup 삭제

$(".popup-open").click(function () {

  $(".popup-section").addClass("active");

});

마지막 줄에서는 소괄호가 바깥쪽에 있어야 한다. (); 안에 함수식(){};;이 들어갔기 때문.

 

 

[return false]

1. 클릭을 막아주는 역할을 한다. (끊어주는 역할)
2. return false가 걸려있는 선택자는 클릭되고 상위엘리먼트 부터 클릭되지 않는다.
     ex) body - section - div - article - nav - span이 있는 경우 div에 걸면 section, body가 클릭되지 않는다.
3. return false를 사용하지 않도록 html, css구조 구현하는 것이 좋다.(a태그 함께 사용시 특히 주의)

 

 

 

[this]

https://codepen.io/kkkge/pen/vYwgLOm

$(".box-list").click(function (){
  $(this).addClass("active");
});

공통된 box-list를 가져와서 this를 사용하면 내가 선택하는 것대로 실행된다.

 

 

[hasClass]

https://codepen.io/kkkge/pen/zYQZYyb

• .hasClass(className): 선택된 요소가 특정 클래스를 가지고 있는지 확인합니다.
• 불리언 값을 반환하며, 요소가 클래스를 가지고 있으면 true, 그렇지 않으면 false를 반환합니다.
• 여러 요소를 선택하고 순회할 때도 사용할 수 있습니다.
• 이 메서드는 동적 클래스 변경이 필요한 애플리케이션에서 매우 유용합니다. 예를 들어, 특정 클래스가 있는지 확인한 후, 그에 따라 다른 스타일이나 동작을 적용할 수 있습니다.

 

[아코디언]

js_acod_5.31 vscode에 내용 정리 되어있음

 

[주요 내용]

1. ul> li > q-box + a-box의 구조
2. 여백, 모서리는 4배수 단위로 만들어주는게 좋다.
3.사라지는 구조가 있다면 사라지는 구조에 여백값을 적용하여 여백이 같이 사라지도록 해야한다. -> q-box에 있는 margin-bottom을 top으로 바꾼 후 a-box로 옮겨준다. 
4. 300은 0.3초이다. (js)

 

 

[제이쿼리 형제 선택자]

• .siblings() 형제들
• $(this).siblings(".active") = 내가 선택한 것의 형제(active가 추가되어 있는) -> 다 선택자임
• 형제 함수식이 hasClass가 있는 함수식보다 먼저 와야한다.

 

[제이쿼리 후손선택자]

• .find() 이벤트는 css 후손선택자와 동일한 효과를 가지고 있다.
• .find()는 반드시 오른쪽 소괄호에 선택자가 선택 되어 있어야 한다. -> .find(".a-box")

 

[애니메이션]

• 제이쿼리 애니메이션 이벤트는 한쪽만 사용하면 안된다. 예를 들어 slideUP을 사용했다면 slideDown도 사용해야한다. 
• 또한 html구조가 나오거나 삭제되기 전에 애니메이션을 먼저 적용해야한다. (즉 addClass, removeClass 이벤트 위에 와야한다.)
• 300은 0.3초이다.

---

스와이퍼

 

[chat GPT 활용하기]

(1)스크롤 내리면 엘리먼트 배경색 초록색으로 다시 올리면 흰색으로 변하는 제이쿼리 코드 알려줘

 

(2)$(window) 이거는 뭐하는 코드야?

 

(3)윈도우의 크기를 조정했을때 body배경색이 그레이색으로 바뀌는 코드 알려줘

 

(4)$(window).resize를 활용한 예제 몇개만 알려줘

 

[라이브러리 시작시 주의사항]

(1)모든 라이브러리는 시작 하기전에 모든html,css를 파악하고 시작한다.

파악하는 방법은 개발자 모드에 있는 숨겨진 코드를 전부 꺼내놓는 방법이 있다.

 

(2)라이브러리를 사용할때 개발자모드에 있는 css가 css파일에 있는 css보다 힘이 강하다라는 사실을 알고 선택자를 활용해서 css코드를 커스텀 해야한다.

[예시]

(틀린 형태).swiper{margin: 0;}

(맞는 형태1)선택자 > .swiper{margin: 0;}

(맞는 형태2)선택자 .swiper{margin: 0;} 등등..

[스와이퍼]

[스와이퍼 라이브러리 연결하는 링크] → 필수구조

 

[스와이퍼 html구조] → 필수구조

 

[스와이퍼 css구조] → 필수구조는 아님

 

[스와이퍼 JS구조] → 필수구조

 

[스와이퍼 API 활용하기] →

클릭

 

[스와이퍼 가져오기 링크]

https://swiperjs.com/get-started

1. CDN - 스와이퍼 라이브러리 연결하는 링크 - html에 연결
2. html 구조 가져오기
3. css구조 가져오기 - 필수 구조는 아님
4. js 가져오기

 

 

[스와이퍼 라이브러리 시작 시 주의사항]

1. 모든 라이브러리는 시작하기 전에 모든 html, css를 파악하고 시작한다. 파악 방법은 개발자 모드에 숨겨져있는
    코드를 전부 꺼내놓는 방법이 있다.
2. 개발자 모드에서 구조 파악 무조건 해야한다
3. 라이브러리를 사용할 때 개발자 모드에 있는 css가 css파일에 있는 css보다 힘이 강하다는 사실을 알고
    선택자를 활용해서 css 코드를 커스텀 해야한다.
     [예시]
    (틀린형태) .swiper{margin: 0;}
    (맞는형태1) 선택자 > .swiper{margin: 0;}
    (맞는형태2) 선택자 .swiper{margin: 0;} 등등

 

 

[스와이퍼 시작하기]

https://codepen.io/kkkge/pen/NWVjPLB?editors=1010

 

 

[스와이퍼 구조 활용하기]

https://codepen.io/kkkge/pen/pomPJGy?editors=1100

 

 

주요 내용은 코드펜에 적혀있음

 

[스와이퍼 개발자 모드 기본설정]

***스와이퍼 가져온 후 개발자 모드에서 기본 설정되어 있는 CSS 설정들 잘 확인하기***

기본 설정 때문에 커스텀이 되지 않을 수 있기 때문

커스텀 해야하는 부분들 가져와서 기본 설정 변경해주기

프리뷰 클릭

\

ctrl U 누르면 코드 보여줌 가져다 쓸 수 있음.

 

 

[스와이퍼 마켓컬리 상품리스트 구현]

https://codepen.io/kkkge/pen/dyERyOq

 

 

[스와이퍼 데모버전 사용]

https://codepen.io/kkkge/pen/qBGjEaG

 

 

 

[스와이퍼 반응형]

https://codepen.io/kkkge/pen/KKLqwWQ

 

 

[스와이퍼 반응형 활용]

https://codepen.io/kkkge/pen/ExzXadq

 

 

[스와이퍼 버튼구조 밖으로 빼기]

1단계 -  https://codepen.io/kkkge/pen/MWdowgR

2단계 -  https://codepen.io/kkkge/pen/pomwJjY