fragment

웹4 - 7/3

rkdmsrla — Wed, 3 Jul 2024 21:11:29 +0900

[flex-grow와 flex-basis]

flex-grow: 1; flex-basis: 0; = basis가 grow를 도와주는 역할

flex-grow: 0; flex-basis: 0; = 너비가 0이다

.back-img-list{flex-grow: 1 flex-basis: 0;}

@media screen and (max-width:1650px) {.back-img-list-5{flex-grow: 0;}}

1650px 이하에서는 미디어쿼리에 걸려있는 코드가 힘이 더 강하다.

웹4 - 3강 (6.14)

rkdmsrla — Fri, 14 Jun 2024 19:16:21 +0900

[반응형과 고정형]

반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.
반응형 사이트는 특정한 상황을 제외하고 대부분 %로 구현된다.

[앱과 반응형 사이트]

앱은 플레이스토어에서 판매하는 상품이고반응형 사이트는 플랫폼에서 판매하는 앱이 아닌
url 주소로 접속하는 모바일 기기에 반응할 수 있는 사이트이다.

즉, 앱은 설치를 해야하고 반응형 사이트는 웹페이지이지만 모바일에서도 사용할 수 있도록 만든 것.

이 두가지는 개발되는 방식이 완전히 다르다.

[반응형 이미지]

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

6.14 반응형 이미지

...

codepen.io

[높이가 고정된 반응형 이미지]

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

6.14 높이가 고정된 반응형 이미지

...

codepen.io

[미디어 쿼리]

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

6.14 미디어 쿼리

...

codepen.io

[max-width 주의사항과 해결방법]

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

6.14 max-width 주의사항과 해결방법

...

codepen.io

[원하는 느낌]

이미지

분위기 참고 - https://www.gdweb.co.kr/sub/view.asp?displayrow=60&Txt_key=all&Txt_word=&Txt_agnumber=&Txt_fgbn=5&Txt_bcode1=&Txt_gbflag=&Txt_bcode2=&Txt_bcode3=&Txt_bcode4=050610001&Txt_bcode5=&Page=1&str_no=22084

분위기+ 모션위주 참고 - https://www.gdweb.co.kr/sub/view.asp?displayrow=60&Txt_key=all&Txt_word=&Txt_agnumber=&Txt_fgbn=5&Txt_bcode1=&Txt_gbflag=&Txt_bcode2=&Txt_bcode3=&Txt_bcode4=050610001&Txt_bcode5=&Page=1&str_no=22084

웹4 - 2강 (6.12)

rkdmsrla — Wed, 12 Jun 2024 07:17:15 +0900

웹4 - 1강 (6.10)

rkdmsrla — Wed, 12 Jun 2024 07:16:03 +0900

[스와이퍼 복습]

코드펜 - 스와이퍼 복습 + 버튼 커스텀

6.10스와이퍼 복습 + 버튼 커스텀

...

codepen.io

[스와이퍼 버튼 여백]

버튼 위치 설정 시 중요 포인트 (상단 코드펜에 적혀있음)

1. container에 relative를 설정해 주어야 함.

2. swiper-box와 button이 container 안에 들어가야 함.

- 이유: container 밖으로 button이 나갈 시 개발자모드 기본 설정인 overflow: hidden; 처리가 되어 사라질 수 있기 때문.

스와이퍼 버튼 여백 설정과 커스텀 코드펜 이동

translate를 활용한 absolute 중앙정렬 코드펜 이동

웹3 - 9강 (6.5)

rkdmsrla — Wed, 12 Jun 2024 07:15:27 +0900

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

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

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

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

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

프리뷰 클릭

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

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

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

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

...

codepen.io

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

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

스와이퍼 데모버전 사용

...

codepen.io

[스와이퍼 반응형]

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

스와이퍼 반응형

...

codepen.io

[스와이퍼 반응형 활용]

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

스와이퍼 반응형 활용

...

codepen.io

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

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

스와이퍼 양쪽 버튼 커스텀 (1단계: 버튼구조 밖으로 빼기)

...

codepen.io

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

CodePen Home 스와이퍼 양쪽 버튼 커스텀 (2단계: relative 설정 후 버튼 위치 조정)

...

codepen.io

웹3 - 8강 (6.3)

rkdmsrla — Mon, 3 Jun 2024 20:39:53 +0900

[지난시간 복습]

- if else 복습
- 애니메이션 복습
- 형제 복습
- this는 내가 선택한 것이 동작하도록 만들어줌
- hasClass
if ($(this).hasClass("active"))
- 내가 선택한 this가 active를 가지고 있다면 if 실행, 가지고 있지 않다면 else 실행
$(this).find(".a-box").slideUp(300);
- if가 선택되면 a박스를 찾아서 애니메이션(속도)를 실행한다

스와이퍼

[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

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

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

스와이퍼 시작하기

...

codepen.io

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

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

스와이퍼 구조 활용하기

...

codepen.io

웹3 - 7강 (5.31)

rkdmsrla — Fri, 31 May 2024 19:34:11 +0900

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

$(document).ready(function(){

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

});

[hasClass]

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

hasClass

...

codepen.io

.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초이다.

웹3 - 6강 (5/29)

rkdmsrla — Wed, 29 May 2024 20:33:07 +0900

[this]

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

5.29 js - this

...

codepen.io

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

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

웹3 - 5강 (5/27)

rkdmsrla — Mon, 27 May 2024 19:40:03 +0900

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]

stopPropagation

...

codepen.io

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태그 함께 사용시 특히 주의)

웹3 - 4강 (5/22)

rkdmsrla — Mon, 27 May 2024 18:59:29 +0900

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

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

js- click

...

codepen.io

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

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

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

[else]

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

js - else

...

codepen.io

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

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

나머지 연산자를 활용한 토글형태 구현

...

codepen.io

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