youngee_316.log

[JavaScript] - 객체/배열

Mon, 21 Nov 2022 07:26:20 GMT

🎈 객체 지향 언어인 javascript에서의 '객체'인 object property는 그런 object의 속성을 뜻하며, 이름(name/key)과 값(value)의 연결로 이루어진다. 둘의 관계는 object는 property의 모음이라고 생각하면 쉽다.

const superman{
    name : 'clark',
    age : 33,
}

✔ 각 property는 쉼표로 구분해주며, 마지막 쉼표는 생략가능하나 있는게 수정,삭제시 용이함

Object - 접근,추가,삭제

🎈접근

const superman = {
  name : 'clark',
  age : 33,
}

console.log(superman.name); 👈🏻 점
console.log(superman.['age']); 👈🏻 대괄호

🎈추가

const superman = {
  name : 'clark',
  age : 33,
}

superman.hairColor = 'black';
superman['hobby'] = 'football';
console.log(superman);

🎈삭제

const superman = {
  name : 'clark',
  age : 33,
}

delete superman.age;
console.log(superman);

Object - 단축 property

ex)이름과 나이를 받아서 객체를 반환하기

function makeObject(name, age){
  return {
     name, //name : name,
     age, //age : age,
    hoby : 'football',
  }
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

Object - property 존재여부확인

function makeObject(name, age){
  return {
    name,
    age,
    hoby : 'football',
  }
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

console.log('age' in Mike);
console.log('birthdat' in Mike);

✔ in연산자를 사용해 property가 있는지 확인 : 어떤값이 넘어올지 확신할수없을때 사용

함수인자로 받거나
API통신을 통해 데이터를 받을때

ex)나이를 확인해서 성인인지 아닌지 구분하기

function isAdult(user){
  if(user.age < 20){
    return false;
  }
  return true;
};

const Mike = {
  name : "Mike",
  age : 30,
};

const Jane = {
  name : "Jane",
};

console.log(isAdult(Mike));

👇🏻 결과값

function isAdult(user){
  if(!('age' in user ) || //user에 age가 없거나

  ✨'age' in user 있으면 true인데 !(NOT)을 이용해 반대로 뒤집어주어 
   > user에 age가 없거나로 인식 👉🏻 false

    user.age < 20){ // 20살 미만이거나
    return false;
  }
  return true;
};

const Mike = {
  name : "Mike",
  age : 30,
};

const Jane = {
  name : "Jane",
};

console.log(isAdult(Jane));

for...in반복문

const Mike = {
  name : "Mike",
  age : 30,
};

for(key in Mike){
  console.log(key);
  =console.log(Mike[key]); // 결과값 동일
}

👇🏻 결과값

🎈method: 객체 property로 할당된 함수

let boy = {
  name : "Mike",
  showName : function () {
    console.log(boy.name)
  }
};

let man = boy;
man.showName();

👇🏻결과값

🎈this

✔ 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음 ✔ 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴 : 객체의 method를 작성할때, 왠만하면 화살표함수 사용안하는게 좋음(오류발생)

let boy = {
  name : "Mike",
  showName : function () {
    console.log(boy.name)
  }
};

let man = boy;
boy = null; 👈🏻 man으로만 접근가능

man.showName();

👇🏻결과값

🎈해결방안

let boy = {
  name : "Mike",
  showName : function () {
    console.log(this.name) 👈🏻 method의 this는 해당객체를 가르킴
  }
};

let man = boy;
boy = null; 

man.showName();

👇🏻결과값

🎈Array(배열) : 순서가 있는 리스트이며, 문자 뿐만 아니라 숫자,객체,함수 등도 포함가능

length : 배열의 길이
push : 배열 뒤에 요소를 추가
pop : 배열 끝에 요소를 제거
shift / unshift : 배열 제일 앞에 제거/추가

let days = ['mon','thu','wed'];
console.log(days);

👇🏻결과값 ex)2번째 요소를 찍었을때

let days = ['mon','thu','wed'];
console.log(days[1]);

👇🏻결과값 ex)2번째 요소를 바꿨을때

let days = ['mon','thu','wed'];
days[1] = '화요일'
console.log(days);

👇🏻결과값 ex)4번째에 목요일을 추가했을때

let days = ['mon','thu','wed'];
days.push('thu');
console.log(days);

✨ 반복문(for)

let days = ['mon','thu','wed'];
days.push('thu');
days.unshift('sun');

console.log(days);

for(let index = 0; index < days.length; index++){
  console.log(days[index]);
}

👇🏻결과값

✨ for.. of 사용(결과동일)

let days = ['mon','thu','wed'];

days.push('thu');
days.unshift('sun');

for(let day of days){
  console.log(day);
}

[JavaScript] - 화살표함수

Mon, 21 Nov 2022 05:48:20 GMT

🎈함수선언문 : 어디서든 호출가능

function sayHello(){
  console.log('Hello');
}
sayHello();

🎈함수표현식 : 코드에 도달하면 생성

let sayHello = function(){
  console.log('Hello');
}
sayHello();

🎈화살표 함수(arrow function)

let add = (num1, num2) =>{
return num1 + num2; 
}

👇🏻 동일
let add = function(num1, num2){
    ㅇreturn num1 + num2; 
}

ex)함수표현식

showError();

let showError = function(){
  console.log('error');
}

👇🏻 결과값

ex)함수선언문1 showError();

function showError(){ console.log('error'); } 👇🏻 결과값

✍🏻 화살표함수로 바꾸면

let showError = () => {
  console.log('error');
}

ex)함수선언문2

const sayHello = function(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}

✍🏻 화살표함수로 바꾸면

const sayHello = (name) => {
  const msg = `Hello, ${name}`;
  console.log(msg);
}

ex)함수선언문3(인수가 2개이고, return문이 있을때)

const add = function (num1, num2){
  const result = num1 + num2;
  return result;
};

✍🏻 화살표함수로 바꾸면

const add = (num1, num2) => {
  return = num1 + num2;
};
👇🏻
const add = (num1, num2) => (
  num1 + num2;
); 중괄호 > 괄호
👇🏻
const add = (num1, num2) => num1 + num2;
return문이 한줄이기 때문에 더 간결하게 줄일 수 있음

[JavaScript] - 함수

Mon, 21 Nov 2022 04:56:13 GMT

✍🏻 기본문법 : 함수명 뒤에 괄호를 넣어 호출

function sayHello(name){
  console.log(`Hello, ${name}`);
 }

🎈함수작성

function showError(){
  alert('에러가 발생했습니다. 다시 시도해주세요.');
}
showError();

결과값👇🏻 🎈매개변수가 있는 함수작성

function sayHello(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}
sayHello('Mike');

결과값👇🏻

✔ 만약 로그인하지않아서, 사용자의 이름을 모를때

function sayHello(name){
  const msg = `Hello, ${name}`; 👈🏻조건문으로 처리
  console.log(msg);
}
sayHello();

🙆🏻‍♀️ 최종작성

function sayHello(name){
  let msg = 'Hello';
  if(name){
  msg += ' ,' + name; 👈🏻 = msg += `,${name}` 
  }
  console.log(msg);
}
sayHello();
sayHello('Mike');

👇🏻 구현화면

let msg = 'Hello'; 👈🏻 전역변수
console.log('함수 호출 전');
console.log(msg);

function sayHello(name){
  if(name){
  msg += `,${name}` 
  };
  console.log('함수 내부');
  console.log(msg);
}
sayHello('Mike');
console.log('함수 호출 후');
 console.log(msg);

👇🏻 구현화면

✔ 지역변수 : 함수 내부에서만 사용가능(locla varable) ✔ 전역변수 : 어디서나 접근가능한 함수(global varable)

ex)

let msg = "welcome"; 👈🏻 전역변수
console.log(msg);

function sayHello(name){
  let msg = "Hello"; 👈🏻 지역변수
  console.log(msg + ' ' + name);
}

sayHello('Mike');
console.log(msg);

ex)

let name = "Mike";

function sayHello(name){
  console.log(name);
}

sayHello(); 👈🏻 매개변수로 받은값은 복사된 후, 함수의 지역변수가 됨
sayHello('Jane');

ex) OR

function sayHello(name){
  let newName = name || 'friend';
  let msg = `Hello, ${newName}`;
  console.log(msg);
}

sayHello();
sayHello('Jane');

default값 설정 = 결과동일

function sayHello(name = 'friend' ){ 👈🏻기본값설정
  let msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello();
sayHello('Jane');

ex) return으로 값 반환

function add(num1, num2){
  return num1 + num2;
}

const result = add(2,3);
console.log(result);

✔ 한번에 한 작업에 집중 ✔ 읽기 쉽고 어떤 동작인지 알 수 있게 쉽게 네이밍

[JavaScript] - switch

Mon, 21 Nov 2022 03:58:38 GMT

switch

✔ 모든 switch문은 if&else문으로 바꿀수있음 ✔ case가 다양할 경우 보다 간결하게 작성가능

✍🏻 기본코드

switch(평가){
case A:
//A일때 코드
case B:
//B일때 코드
...
}

👇🏻if&else문으로 바꿔보면

if(평가 == A){
 // A일때 코드
}else if(평가 == B){
 // B일때 코드
}

ex) 사고싶은 과일 물어보고, 가격알려주기

let fruit = prompt('무슨 과일을 사고 싶나요?');

switch(fruit){
  case '사과' :
    console.log('100원 입니다.');
  case '키위':
    console.log('200원 입니다.');
  case '바나나':
    console.log('300원 입니다.');
  case '포도' : 
    console.log('400원 입니다.');
  case '오렌지' :
    console.log('500원 입니다.');
}

✔ 이렇게만 작성하면, 선택한 과일 아래의값이 다 나오기때문에, break를 넣어줘야함

🙆🏻‍♀️올바른예시

let fruit = prompt('무슨 과일을 사고 싶나요?');

switch(fruit){
  case '사과' :
    console.log('100원 입니다.');
    break;
  case '키위':
    console.log('200원 입니다.');
    break;
  case '바나나':
    console.log('300원 입니다.');
    break;
  case '포도' : 
    console.log('400원 입니다.');
    break;
  case '오렌지' :
    console.log('500원 입니다.');
    break;
  default : 👈🏻else와 동일(case에 없는 과일을 입력했을때)
    console.log('그런 과일은 없습니다');
}

📝 만약 같은 가격이 여러개있다면 case '메론': case '키위': console.log('200원 입니다.'); break; 👉🏻 break가 없다면, 그 이후 줄을 실행하기 때문에 둘 다 실행가능

[JavaScript] - loop/for/while

Mon, 21 Nov 2022 03:35:58 GMT

🎈 반복문 loop ex) 1부터 10까지 로그를 찍어주세요

✔ 그런데, 만약 1부터 100까지 혹은 10000까지 로그를 찍어달라고한다면? : 이럴때 반복문 loop사용(동일한 작업을 여러번 반복)

for

for(let 1 = 0; i < 2.; i++){
//반복할코드
}

i = 0 i가 10보다 작으므로 👉🏻코드실행 i값 1증가

i = 1 i가 10보다 작으므로 👉🏻코드실행 i값 1증가

(반복...)

즉, 초기값 지정 > 조건이 true이면 > 코드를 실행 > 괄호 3번째 부분 작업을 진행 > 다시 조건을 확인 > 코드를 실행 > 괄호 3번째 부분 작업을 진행(1-7번)

조건을 확인해서 false이면 > 반복문을 빠져나옴(8,9번)

✍🏻코드작성 : 1부터 10까지 로그

for(let i = 0; i < 10; i++){
  console.log(i); 👈🏻1-9까지나옴
  console.log(i+1); 👈🏻1-10까지 나옴
}

while

let i = 0;

while ( i < 10) {
//코드
👉🏻i값이 0이기때문에 무한반복후, 브라우저 꺼짐
}

while ( i < 10) {
//코드
i++; 👈🏻 해결방법
}

do.. while

let i = 0;

do{
i++;
}while(i < 10)

✔ while과 비슷한데, 조건문을 아래로 옮길 수 있음 ✔ 코드를 실행하고, 조건을 체크(while과 가장 큰 차이: 적어도 코드실행을 한번함)

🎈반복문을 빠져나오는 기능

break

: 멈추고 빠져나옴

while(true){ 👈🏻참고로 무한반복 조심해서 사용할것
   let answer = confirm('계속 할까요?');
   if(!answer){
     break;
   }
}

확인누르면 무한반복 > 취소누르면 반복문을 빠져나옴

continue

: 멈추고 다음 반복으로 진행

for(let i = 0; i < 10; i++){
  if(i%2){
    continue;
  }
  console.log(i)
}

📝Tip : 명확한 횟수가 있다면 for문 / 그게아니라면 while문 사용

[JavaScript] - 논리연산자

Mon, 21 Nov 2022 03:03:54 GMT

🎈 논리연산자

|| OR

:여러개 중 하나라도 true면 true 즉, 모든값이 false일때만 false를 반환

&& AND

:모든값이 true면 true 즉, 하나라도 false면 false를 반환 (단, age가 10이거나 이름이 'Mike'가 아니라면)👇🏻

! NOT

true면 false false면 true 즉, true와 false를 반대값으로 바꿔줌

ex)스티븐 잡스는 한국인 이거나(OR),남자이다. 👉🏻 true(둘중하나라도 true이기때문) ex)스티븐 잡스는 한국인 이고(AND),남자이다. 👉🏻 false(한국인이 아니기때문에 false)

✔ OR 와 AND의 차이 OR는 첫번째 true를 발견하는 즉시 평가를 멈춤 ex)스티븐 잡스는 남자이거나(OR),한국인 이거나(OR),군인이거나(OR)... 👉🏻 true(첫번째:남자라는 정보가 true) AND는 첫번째 false를 발견하는 즉시 평가를 멈춤 ex) 스티븐 잡스는 남자이고(AND),한국인 이며(AND),군인인 동시에(AND)... 👉🏻 false(한국인이라는 정보가 false)

📝Tip ex) 운전면허가 있고 시력이 좋은 여군인 사람을 작성할때 운전면허:80 시력좋은60 여군7 👈🏻 전체비율 작성: 여군인데 시력이 좋고 운전면허가 있는 사람 👉🏻 성능에 최적화

✔ 비교연산자에도 우선순위가 있다 ex)성별이 남자이고, 이름이 Mike이거나 성인이면 '통과', 아니면 '돌아가' 이유 : AND가 OR보다 우선순위가 높기때문에 먼저 평가됨(원하는 의도X)

if(gender === 'M' && name === 'Mike' || isAdult)
👉🏻((gender === 'M' && name === 'Mike') || isAdult){
console.log('통과')
} else{
console.log('돌아가')
}

✍🏻의도대로 작성한다면 : 남자이고, 동시에 이름이 'Mike'이거나 성인

if(gender === 'M' && (name === 'Mike' || isAdult)){
console.log('통과')
} else{
console.log('돌아가')
}

[JavaScript] - 변수

Mon, 21 Nov 2022 02:16:04 GMT

🎈 JavaScript

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현
주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용가능
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음

[참고사이트] https://youtu.be/KF6t61yuPCY

🎈변수

변수는 문자와 숫자, $와 _만 사용
첫 글자는 숫자가 될수없음
예약어는 사용할수없음
가급성 상수는 대문자로 알려주기
변수명은 읽기 쉽고 이해할수있게 선언

✔ 문자는 항상 따옴표로 감싸주어야함 ✔ 예약어 사용X(자바스크립트에서 이미 사용하는언어 ex)class)

alert 👉🏻 경고창 console.log 👉🏻 로그를찍는창

let 👉🏻 한번선언후에 다른값으로 바꿀수있음 ex) let grade = "F"; grade = "A+"; (let생략가능) const : 절대로 바뀌는 않는 상수 수정X 파이,최댓값,생일 👉🏻 대문자로 선언하는게좋다(다른개발자에게 상수라고 알려줌) ex) const PI = 3.14; const SPEED_LIMIT = 50; const BIRTH DAY = '2020-01-01'; 📝Tip : 모든변수 const > 변할수있는것만 let

🎈자료형

Boolean : 논리적인 요소, true와 false값이 있다.
null : 빈 값
undefined : 값을 할당하지 않은 변수가 가지는 값
Number : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님)값을 포함한다.
String : 문자열

백틱 : 문자열 내부에 변수를 표현해줄때 사용하면 편리 ex) const message = My name is ${name}; console.log(message); 결과값 : "My name is Mike"

🎈typeof 연산자

다른 개발자가 작성한 변수의 타입을 알아야하거나
API통신을 통해 받아온 데이터를 타입에 따라 다른방식으로 사용해야할때 typeof null; // "object" 객체형
문자형 + 숫자형 > 문자형으로 변경됨

🎈대화상자 alert =알려줌 / 메세지를 보여줌 prompt = 입력받음 / 디폴트값도 입력가능 / 사용자에게 메세지를 보여주고 어떤값을 입력받을수있음 필드를 제공함 confirm = 확인받음 / 사용자에게 확인을 받기위한 용도

📝단점:

스크립트 일시 정지(창을 닫기전에는 이후동작에 제한을받음)
스타일링X(위치와 모양을 정할수없음 > 디자이너들이 안좋아함)

prompt

ex) 디폴트 / 2개의 인수를 받을수있음 함수를 실행하는 괄호안의값 = 인수
const name = prompt("예약일을 입력해주세요.","2020-10-18"); alert("환영합니다." + name + "님"); "2020-10-18" > 입력받을 디폴트값(미리들어가있으면 안내or힌트를 줄수있음)

ex) const name = prompt("이름을 입력하세요."); alert(안녕하세요. ${name}님. 환영합니다.);

confirm

alert과 다른점 > alert는 확인버튼만있지만 confirm은 취소/확인버튼이 같이있음 확인 👉🏻 true / 취소 👉🏻 false

그 외

String() 문자형으로 변환 Number() 숫자형으로 변환 ex) Number("문자") // NaN Number(null) // 0 prompt에서 취소버튼을 누르면 null할당 > 숫자0 Number(undefined) // NaN(잘기억해두기)

📝차이점 및 기억해둘것 Number(0) // false Number('0') // true 문자형0 Number(") // false 비문자열 Number(' ') // true 공백이 들어가있으면 Boolean() 불린형으로 변환 👉🏻false 숫자 0, 빈 문자열 ", null, undefined, NaN << 제외하고는 true

ex)수학과 영어의 점수를 입력받아 평균을 구하는것(수학90/영어80) const mathScore = prompt("수학 몇점?"); const engScore = prompt("영어 몇점?"); const result = (mathScore + engScore) / 2; 결과값 : 4540 숫자형이 아니더라도 / 나누기의 값이 들어가면 숫자형으로 변환되어 사용 👉🏻 자동 형변환

✍🏻평균값:85 !codepen[youngee/embed/qBKVNwO?default-tab=html%2Cresult]

✔ 참고로 알아둘것

console.log(
   Number(true); 1
   Number(false); 0
)

🎈연산자

나머지(%)를 어디에 쓸까? ex) 홀짝 홀수 : X % 2 = 1 짝수 : Y % 2 = 0 ex) 어떤 값이 들어와도 5를 넘기면 안됌 X % 5 = 0 ~ 4 사이의 값만 반환

✔ 거듭제곱 const num = 2**3; console.log(num); // 8

✔ 연산자 줄여서 쓰기 ex) let num = 10; num = num+5; console.log(num); // 15 👇🏻 let num = 10; num += 5; 변수에 5를 넣어서 다시 위의식에 넣어주는것 console.log(num); // 15

✔ 증가 연산자, 감소 연산자 (값을 1만큼 증가 혹은 감소) let num = 10; num++; num--; console.log(num); 11 / 9

✔ 비교연산자

a == 3 > a가 3이랑 같은가 a != 3 > a가 3이랑 다른가 반환값은 // true or flase

[Mercedes-benz]

Tue, 15 Nov 2022 09:10:01 GMT

💻 Mercedes-benz coding

사이트명 : Mercedes-benz 사용언어 : html / css / js 분류 : 적응형 PC

🎈 Mercedes-benz HOMEPAGE https://www.mbusa.com/en/home

Check Point

data-속성 태그컨트롤
gsap 콜백함수

1. data-속성 태그컨트롤

🎈 기본원리 div 또는 요소에 여러 데이터 속성을 포함하여 원하는 작업을 수행 : 아래동영상 참고(js적용) https://youtu.be/XtEs0SZ_4Y0

👇🏻 구현해야되는 모습 해당영역에 스크롤이 감지될때, 텍스트가 아래에서 위로 올라오는 효과적용 ✍🏻 코드작성

 👈🏻date속성 적용
  
    
      The new 2024
        
    
      Mercedes C63 S E
    
  
 
   
     ingenuity to pave the
   
   
     way for unrelenting hybrid power.

line-effect를 적용 -> data-slideUp="true" 전체를 wrap으로 감싸주고, 적용할 text에 line이라는 클래스명을 주었다

js로 컨트롤

function lineEffect(){

  $('[data-slideUp=true]').each(function(i,el){ 👈🏻모든요소에서
      child = $(this).find('.line'); 👈🏻적용대상찾기1
      line = $(this).find('.border-line'); 👈🏻적용대상찾기2
      gsap.to(line,{ 👈🏻width:0 > width:100%
          scrollTrigger:{
              trigger:el,
              start:"top 50%",
              end:"bottom top",
              // markers:true,
              toggleActions: "restart none reverse none",
          },
          width:"100%",
          stagger:0.1,

      })
      gsap.to(child,{ 👈🏻translateY:100% > translateY(0%)
          scrollTrigger:{
              trigger:el,
              start:"top 50%",
              end:"bottom top",
              toggleActions: "restart none reverse none",
          },
          transform: 'translateY(0%)',
          stagger:0.1,
      })
  })
}

공용으로 적용되는 애니메이션이기 때문에, common.css에 코드작성

[data-slideUp=true] .wrap{overflow: hidden; display: block;}
[data-slideUp=true] .line{ display: inline-block; transform: translateY(100%);}
[data-slideUp=true] .border-line{position: absolute; top: 0; left: 0; width: 0%; height: 1px; background: #fff}

이렇게 작성 후, 적용시키고 싶은 부분에 data-속성 추가

✔ each(function(i,el) : object 와 배열 모두에서 사용할 수 있는 일반적인 반복함수 여기에선 $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 객체를 전달. 1.객체를 전달받으면 index는 객체의 key(property)를 가리키고 2.el(해당선택자의 객체)은 키의 값을 가지고옴

2. gsap 콜백함수

GSAP Callback (트윈 제어 - 콜백 함수) : callback은 이벤트에 전달해주는 콜백 함수 GSAP는 함수를 호출하고 파라미터를 넘기는 과정을 편하게 제어가능함

🎈 onInit : 애니메이션(Tween)이 시작되기 바로 전에 함수를 호출 onStart와 별 차이가 없지만, 당연히 onStart 보다 빨리 호출됨

🎈 onStart : 애니메이션(Tween)이 시작될때 호출

🎈 onComplete : 애니메이션(Tween)이 종료되었을 때 함수를 호출 GSAP 콜백 함수 중 가장 사용빈도가 높음

🎈 Event(함수) + Params : 애니메이션(Tween) 중 호출하고자 하는 함수 뒤에 Params 파라미터를 붙여 줄 수 있음

✍🏻 코드문법 ✔ 배열의 형태로 값을 넘겨주어야 함 ✔ 자기 자신의 값을 넘겨줄 때에는 "{self}"라고 값을 주어야 함




    
    GSAP - onComplete

!codepen[youngee/embed/WNyOVRe?default-tab=html%2Cresult]

🎈onUpdate : 애니메이션(Tween)이 계속 진행되는 동안 호출 🎈onRepeat : 애니메이션(Tween)이 반복될 때마다 호출 🎈onReverseComplete : 애니메이션(Tween)이 반전(Reverse) 된 후 모션이 완료되었을 때 호출

👇🏻 구현해야되는 모습 : 스크롤감지에 따라, 스크롤이되면서+문단도 동시에 넘어감 ✍🏻 코드작성

 👈🏻스크롤
  
     👈🏻왼쪽박스
       👈🏻내용
        
        
          01
        
        1. Multipoint Inspection
        
        A Mercedes-benz Approved (CPO) Vehicle has been
        inspected in compliance with our 111-point checklist
        to ensure they meet the minimum mechanical and
        cosmetic standards and the vehicle meets the
        preparation standards. All work has been performed by
        Mercedes-benz trained technicians and only Genuine
        Mercedes-benz parts have been used.
       
      
    
       👈🏻다음문단
        
          2. CPO Limited Warranty Coverage
        
      
  
    👈🏻비디오재생

gsap.timeline설정

gsap.timeline({
     defaults:{
         ease:'none', 👈🏻motion에 있는 굴곡없어짐
     },
     scrollTrigger:{
         trigger:'.sc-program',
         start:"top top", 
         end:"+=300%", 👈🏻영역을 길게만듬(강제스크롤:영역3배)
         scrub:1, 👈🏻애니메이션을 재사용 할 수 있는 기능
         pin:true, 👈🏻영역이 벗어나는것을 방지   
     },
})

.to('.program-scroll',{
     height:'100%'
 })

☝🏻스크롤

.addLabel('a')
.to(.box01),{opacity:1,visibility:'visible'},'a')
.to(.box01),{opacity:0,visibility:'hidden'},'a+=1')
.to(.box02),{opacity:1,visibility:'visible'},'a+=1')
.to(.box02),{opacity:0,visibility:'hidden},'a+=2')
.to(.box03),{opacity:1,visibility:'visible'},'a+=2')

☝🏻영역 문제점:문단영역과 스크롤이벤트가 동시적용이 안됨

gsap - onUpdate [참고사이트] https://greensock.com/docs/v3/Plugins/ScrollTrigger/progress 🎈기본원리 onUpdate: self => console.log("progress:", self.progress) ☝🏻console로 찍었을때 => : function과 같음
```
onUpdate : function(self){
if(self.progress > 0.666)
 $('.box03').addClass('active').siblings().removeClass('active')
}else if(self.progress > 0.333){
 $('.box02').addClass('active').siblings().removeClass('active')
}else {
 $('.box01').addClass('active').siblings().removeClass('active')
}
}
```
✔ 조건문을 줄때, 역순으로 줘야함 : 예를들어, 0.333부터 주게되면 조건이 만족하는순간 조건비교가 안됨

Issue Point

video-control
grid로 영역잡기

1. video-control

🎈 기본원리 [참고사이트] https://blog.edit.kr/entry/video-tag-%EB%A9%88%EC%B6%94%EA%B2%8C-%ED%95%98%EA%B8%B0-vdget0pause-%EC%B2%98%EB%A6%AC

👇🏻 구현해야되는 모습 mouseover -> 선택한 비디오만재생 mouseleave -> 재생멈춤

✍🏻 코드작성

function autoVideo(){

    $('.gallery-item').mouseover(function(){
        $(this).find('video').get(0).play(); 
    })
    $('.gallery-item').mouseleave(function(){
        $(this).find('video').get(0).pause(); 
    })
}

✔ 선택자를 정확히 적어줘야 전체적용이 안됨(주의!)

2. grid로 영역잡기

👇🏻 구현해야되는 모습 ✍🏻 코드작성

.sc-order .content .right-inner{display: grid; grid-template-columns: 60px 1fr; gap:30px; padding: 30px; align-items: center; border-radius: 10px; background: #060f10;} 
.sc-order .right-inner .thumb-img{position: relative; grid-row-start: 1; grid-row-end: span 2; overflow: hidden; border-radius: 5px; width: 65px; height: 65px; justify-content: center; }
.sc-order .right-inner .thumb-img img{object-fit: cover; position: absolute; top: 0; left: 0;}
.sc-order .content .right-inner .txt1{font-size: 25px;}
.sc-order .content .right-inner .txt2{margin-top: -25px;}
.sc-order .right-inner .btn-order{grid-column-start: 1; grid-column-end: 3; height: 60px;border-radius: 50px; padding: 40px 0; display: inline-flex; justify-content: center; position: relative; align-items: center; font-weight: bold; text-align: center; background: #fff; color: var(--theme-color2);}

🤣 flex나 position으로도 구현가능한데, 왜 grid로 잡았을까..

[HYBE]

Wed, 02 Nov 2022 19:16:05 GMT

💻 HYBE coding

사이트명 : HYBE 사용언어 : html / scss / js 분류 : 적응형 PC / 반응형

🎈 HYBE HOMEPAGE https://hybecorp.com/kor/company/artist

Check Point

loading-page
text-animation
gsap - scrollTrigger

1. loading-page

🎈 기본원리 : gsap플러그인을 사용하여, 순차적인 애니메이션을 구현함

✍🏻 코드작성

text가 순차적으로 나와야하기 때문에, wrap으로 전체를 묶어 위치를 잡아주고 class명을 다르게 주었다.

.wrap{
     overflow: hidden;
     padding: 0 10px;
     transform: translateX(20%);
 }
 span{
     font-size: 15vw; 
     font-weight: 900;
     color: $color-main;
     display: inline-block;
     transform: translateY(100%);
 }

gsap.timeline적용 : 로딩페이지 이벤트 후, 사라지면서 아래의 visual이 나타남

✍🏻 코드작성

const intro = gsap.timeline({ 
        defaults:{
        },
        onComplete:function(){ 👈🏻 완료된후에
            scaleIntro.play();
        }
    })
    intro
    .addLabel('a')
    .to('#loading .first',1,{yPercent: -95},'a')
    .to('#loading .sec',1,{yPercent: -95, stagger:0.1},'a+=0.2')
    .to('#loading .wrap',0.5,{xPercent:-20},'a+=0.5')
    .to('#loading',1,{height:0})

    const scaleIntro = gsap.from('.sc-visual .visual-bg img',0.5,{
        scale:1.2,
        paused:true,
    })

✔ gsap.timeline : gsap를 한꺼번에 묶어 순차적으로 실행하는 메서드 ✔ addLabel : gsap를 그룹으로 묶어, 동시에 애니메이션 적용하는 메서드

2. text-animation

🎈 기본원리 : 아래동영상을 참고하여 코드적용 !youtube[gR0-eb5ncEU]

👇🏻 구현해야되는 모습 : text-in과 text-out으로 컨트롤하여 계속 롤링되게 하여야함 ✍🏻 코드작성


   
       
          BTS
          LEE HYUN
          LE SSERAFIM
          NewJeans
          SEVENTEEN
          ENHYPEN
          TXT
       
       HYBE ARTIST

변수선언

const txts = document.querySelector('.title-list').children;
txtsLen = txts.length;
let index = 0;

for반복문('text-in', 'text-out')

function aniMate1() {
    for (let i = 0; i < txtsLen; i++) {
        txts[i].classList.remove('text-in', 'text-out');
    }
    txts[index].classList.add('text-in');
}
function aniMate2() {
    txts[index-1].classList.add('text-out');
}

setInterval() 적용 ✍🏻 setTimeout / setInterval 차이점 setTimeout() : 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우에 사용 setInterval() : 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용
```
setInterval(function () {
 aniMate2()
}, 3500);
```

setInterval(function () { if (index == txtsLen - 1) { index = 0; } else { index++; } aniMate1() }, 3000);


### 3. gsap - scrollTrigger

🎈 기본문법
: 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과가 목적

scrollTrigger:{ trigger:"기준이될태그", start:"top top", 👈🏻 기준태그의 시작지점, 윈도우기준 시작지점 end:"bottom top" 👈🏻 기준태그의 끝지점, 윈도우기준 끝지점 markers:true, 👈🏻 인디케이터를 표시 scrub:1 👈🏻 되감기(스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능) }

👇🏻 구현해야되는 모습
![](https://velog.velcdn.com/images/youngee_316/post/773e1929-f75e-4628-a17f-ab60f0bb9d01/image.jpg)

1. GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현
: 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현

const viewSlide = gsap.timeline({ defaults:{ ease:'none', }, scrollTrigger:{ trigger:'.sc-view', start:'top top', end:'+=800%', 👈🏻 값이 클수록 스크롤이 천천히됌 scrub:1, markers:true, 👈🏻 시작과 끝위치 확인 pin:true, 👈🏻 고정 }, })

2. gsap.set({})기초셋팅

gsap.set('.sc-view .img-item .item01',{ scale:1.3 }) gsap.set('.sc-view .img-item .item02',{ rotate:30, }) gsap.set('.sc-view .img-item .item03',{ rotate:-10,scale:0.8 }) gsap.set('.sc-view .img-item .item05',{ rotate:-50,scale:1.5 }) gsap.set('.sc-view .img-item .item05',{ scale:1.1 }) gsap.set('.sc-view .img-item .item07',{ rotate:-120}) gsap.set('.sc-view .img-item .item08',{ rotate:20,scale:1.2 }) gsap.set('.sc-view .img-item .item09',{ rotate:45}) gsap.set('.sc-view .img-item .img',{ yPercent:-50})

3. .addLabel('a')로 그룹으로 효과적용

.addLabel('a') .to('.sc-view .title',{ xPercent:-20 },'a') .to('.sc-view .img-item',{ xPercent:-110 },'a') .to('.sc-view .img-item .img',{ yPercent:100, stagger:0.02 },'a') .to('.sc-view .img-item .item01',{ rotate:-90 },'a') .to('.sc-view .img-item .item02',{ rotate:0 },'a') .to('.sc-view .img-item .item03',{ rotate:0 },'a') .to('.sc-view .img-item .item04',{ rotate:60 },'a') .to('.sc-view .img-item .item05',{ rotate:0 },'a') .to('.sc-view .img-item .item06',{ rotate:30 },'a') .to('.sc-view .img-item .item07',{ rotate:0 },'a') .to('.sc-view .img-item .item08',{ rotate:0 },'a') .to('.sc-view .img-item .item09',{ rotate:0, left:'100px', bottom:'-150px' },'a+=.1')

객체의 위치를 잡는게 point였다. 

# Issue Point
- 영역안에서 mousemove/mouseout
- GSAP ScrollTrigger - 3D Transforms
### 1. 영역안에서 mousemove/mouseout

🎈 기본원리

[참고사이트]
https://zzzmh.tistory.com/13
!codepen[youngee/embed/PoaNQxP?default-tab=html%2Cresult]

👇🏻 구현해야되는 모습
![](https://velog.velcdn.com/images/youngee_316/post/dad30a00-3b48-4985-acdc-048a8b18371a/image.jpg)

✍🏻 코드작성

function menuOpen() { var target = document.querySelector('.menu'); var motion = document.querySelector('.open-btn'); target.addEventListener('mousemove', (event) => { let x = (event.layerX * 0.1); let y = (event.layerY * 0.1);

    motion.style.transform = `translate(${x}px,${y}px)`
})
target.addEventListener('mouseout', (event) => {
    motion.style.transform = '';
})

}


✔ MouseEvent.layerX읽기 전용 속성:  현재 레이어를 기준으로 이벤트의 수평 좌표를 반환
✔ MouseEvent.layerY읽기 전용 속성:  현재 레이어를 기준으로 이벤트의 수직 좌표를 반환

👉🏻 마우스 이벤트가 발생할 때 마우스 포인터의 x 좌표에 대한 정수 값이 나옴

### 2. GSAP ScrollTrigger - 3D Transforms
🎈 기본원리
[참고사이트]
https://codepen.io/jonathan/pen/XXdNjR
👇🏻 구현된 모습
![](https://velog.velcdn.com/images/youngee_316/post/3b7f0317-adae-4e49-92f8-c82e3ef269ce/image.png)
![](https://velog.velcdn.com/images/youngee_316/post/d7bc2a90-5f06-451d-9fb9-26d5098a1006/image.png)
1. transform-origin속성적용

HYBE is committed to satisfying customers with the 'content' leading the global trend and our 'fans'

.title{ transform-origin: top left; }

👈🏻 효과를 주기위해 class명을 넣어줌

[참고사이트]
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
![](https://velog.velcdn.com/images/youngee_316/post/f56d3a9e-ff34-43ce-89d8-db93582b6cf1/image.png)

2. 스크립트 작성

gsap.set(".sc-intro .effect", { 👈🏻 기초셋팅 rotationX: -45, transformStyle: "preserve-3d", transformOrigin: "0% 50% -100%", opacity: 0, yPercent: 110, });

const introEffect = gsap.to('.sc-intro .effect', {
    scrollTrigger:{
        trigger:'.sc-intro',
        start:'top 50%',
        end:'bottom top',
    },

    transformStyle: "preserve-3d",
    rotationX: 0,
    duration:1,
    opacity: 1,
    yPercent: 0,
    transformOrigin: "50% 50%",
    stagger:0.1,
});


3. css에 perspective(원근감)추가

perspective: 400px;

✔ 부모에게 perspective 속성을 주고, 이벤트 대상에는 transform을 시킨 모습
✔ 여기에서의 400px은 '내가 얼마나 떨어져서 보고 있는가'를 나타낸다고 할 수 있음
✔ 값이 작으면 작을 수록 더 가까이에서 보는 것으로 처리
[참고사이트]
https://nykim.work/26

[대광건영]

Wed, 02 Nov 2022 19:06:00 GMT

💻 대광건영 clone coding

사이트명 : 대광건영
사용언어 : html / scss / js
분류 : 적응형 PC

Check Point

swiper-pagination - fraction
swiper-navigation - gauge
slide영역 width값 잡기

1. swiper-pagination - fraction

🎈 기본원리

control해줄대상을 하나로묶음


 1
 /
 1

스크립트작성

✔ swiper에도 custom은 있지만 소스가 정해져있기때문에 스타일적용이 힘듬 ex)slash

pagination: {
   el: ".fraction",
   type: "custom", 👈🏻 만들어서 사용
   renderCustom:function(swiper, current, total){
         return `
         1 👉🏻 current
         /
         1`; 👉🏻 total
   },
}

✍🏻 코드작성

pagination: {
   el: ".fraction",
   type: "custom", 👈🏻 만들어서 사용
   renderCustom:function(swiper, current, total){
         return `
         ${current} 
         /
         ${total}`; 
   },
}

.fraction{width: auto;} 👈🏻 width값이빠짐

🎈 구현화면

gauge만들기

🎈 기본원리 !codepen[youngee/embed/XWYdMdm?default-tab=html%2Cresult] ✍🏻 코드작성

function auto(){
   $('.gauge span').css('width',0).animate({width:'100%'},2000,function(){
     swiper1.slideNext(); ☝🏻 width값 초기화 후, 다음 슬라이드로 넘어감
   })
}

slide-Change후 호출

swiper1.on('slideChange',function(){
auto(); // 슬라이드가 바뀌었을때 다시실행
})

function auto(){ $('.gauge span').css('width',0).animate({width:'100%'},2000,function(){ swiper1.slideNext(); }) } auto();

문제점: 일시정지를 눌렀을때 gauge도 중간에 멈춰야하는데 구현하기어려움

🎈 gsap로 하는방법

const auto = gsap.to('.gauge span',3,{ ease:'none', width:'100%', onComplete:function(){👈🏻 완료되었을때 gsap.set('.gauge span',{width:0}) 👈🏻 기초값셋팅 swiper1.slideNext(); }, paused:true, })

auto.play();

swiper1.on('slideChange',function(){ auto.restart(); 👈🏻 슬라이드 넘어가고 재실행 })

---
3. 재생/멈춤

$('.autoplay').click(function(){ if($(this).hasClass('active')){ $(this).removeClass('active') auto.resume(); 👈🏻 진행 }else{ auto.pause(); $(this).addClass('active') })

active는 가상으로 만든 클래스 > 스크립트 컨트롤용도로 만듬
(위 사이트에서는 클릭이벤트시 재생/멈춤으로 'active'사용) 
![](https://velog.velcdn.com/images/youngee_316/post/27c3bfe4-f2fc-4228-acee-8e3cef69db1c/image.png)

### 3. slide영역 width값 잡기

🎈 기본원리

1. .project-content와 .project-img의 width:50%와 float를 이용해 영역을 잡는다.

.project-content{ width: 50%; float: left; display: flex; justify-content: flex-end; } .project-img{ width: 50%; float: right;
}

![](https://velog.velcdn.com/images/youngee_316/post/080fafc9-4fb5-4e3e-8c94-4a27f26272e0/image.jpg)

2. content의 영역만큼 양쪽을 밀어준다.

.project-content{ width: calc(50% - 340px); float: left; display: flex; justify-content: flex-end; } .project-img{ width: calc(50% + 340px); float: right;
}

![](https://velog.velcdn.com/images/youngee_316/post/5866b2c5-ce85-4cc4-b4e0-495ba444cb01/image.jpg)

3. 각각의 여백값을 계산해서 레이아웃을 완성시켜준다.
(box-sizing이 들어가있기때문에 margin으로 여백주면됨)

![](https://velog.velcdn.com/images/youngee_316/post/498092a2-1f17-485d-83f1-ff788bebe692/image.jpg)

✍🏻 마우스 호버시 영역이 잘리는경우 
-> swiper에는 overflow:hidden수치가있기때문에 여백을 만들어주면됨

.swiper{ padding-bottom: 60px; }

![](https://velog.velcdn.com/images/youngee_316/post/6d84bc5c-4d9f-43d7-8573-391c119e7467/image.jpg)

# Issue Point
- serch-box
- menu-list 
- scss 미디어쿼리 적용방법

### 1. serch-box

🎈 기본원리
:호버나 클릭했을때 나오는 대상의 좌표값만 잘잡아주고 이벤트를 걸어주면됨
![](https://velog.velcdn.com/images/youngee_316/post/d3782155-c78a-410c-a816-be9a97388433/image.jpg)

```

✔ html코드는 동일 문제점: z-index값이 낮아선택이되지않아 이벤트자체가 적용이 안되었음 -> 이벤트 대상자인 .btn-search의 z-index값을 조절해 해결함

function menuSearch(){

  $('.menu-area .btn-search').click(function(e){
      e.preventDefault();
        $('.search-box2').css({'display':'block'})
    });
}

🎈 기본원리 : click -> side-menu가 나올수있도록 !codepen[youngee/embed/jOKWgpE?default-tab=html%2Cresult] ✍🏻 코드작성

  $('.depth').click(function(e){
    e.preventDefault();

    if ($(this).siblings('.sub-menu-list').css('display')=='none') { 
      $('.depth').removeClass('active');
      $(this).addClass('active');
      $('.sub-menu-list').removeClass('show');
      $(this).siblings('.sub-menu-list').addClass('show');
     } else { 
      $('.sub-menu-list').removeClass('show');
      $('.depth').removeClass('active');
    }
})

문제점: 대메뉴를 클릭했을때, 소메뉴가 계속 겹쳐서나옴 -> .depth가 'active'될때, 전체에 .removeClass를 주고 클릭한메뉴의 소메뉴만 나오게함

🎈 최종화면

3. scss 미디어쿼리 적용방법

mixins.scss폴더에 mediapoint를 변수로 할당하고, 미디어쿼리 기본 문법을 작성해준 뒤, 다른 scss폴더에서 적은 스타일이 적용되도록 @content를 같이 적어준다.

🎈 예시 🎈 미디어쿼리 적용예시

[JSON]

Wed, 02 Nov 2022 08:15:47 GMT

🎈 JSON

JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식(단순히 데이터를 표시하는 표현 방법)이다.
태그로 표현하기 보다는 중괄호({}) 같은 형식으로 하고, 값을 ','로 나열하기에 그 표현이 간단하다.
JSON으로 가져올 수 있는 데이터는 해당 자바스크립트가 로드된 서버의 데이터에 한정된다.

🎈 API

응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.
Application Programing Interface라는 용어로써, 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미함. 예를들어 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 하는것이다.

ex)youtube에 '먹방'을 검색했을때의 API https://www.googleapis.com/youtube/v3/search?part=snippet&q=%EB%A8%B9%EB%B0%A9&maxResults=20&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs

✍🏻 data만들기(배열)

 {
   "items":[
     {
      "name":"철수",
      "age":"30",
      "문신":true
     },
     {
     "name":"영희",
     "age":"20",
     "문신":false
     },
     {
     "name":"민수",
     "age":"15",
     "문신":true
     }
   ]

}

✍🏻 fecth(비동기통신:페이지 전환없이 데이터를 통신)

fetch('./data.json')
.then((response) => response.json())
.then((json) => {
    x = json.items
})

✍🏻 가져오고싶은 data

 
   
   이름:ㅇㅇㅇ
   나이:ㅇㅇㅇ

console.log(json);

 data = json.items

 data.forEach(element => { 👈🏻 반복문
     console.log(element); 
 });

console.log(element);

✍🏻 += : 내가 가지고있는 변수+1 + 변수 + 변수 : 즉, 배열의 갯수만큼 담을 수 있음

console.log(html);

✔ 결과1(json)

data = json.items

    let html ='';
    data.forEach(element => {
        html += `${element.name}`;
        console.log(html);
    });

    $('.list1').html(html);

✔ 결과2(javascript)

data = json.items

    let html ='';
    data.forEach(element => {
        html += `${element.name}`;
        console.log(html);
    });

    document.querySelector('.list1').innerHTML = html;

ex)age추가

data = json.items

    let html ='';
    data.forEach(element => {
        html += `${element.name},나이는 = ${element.age}`;
        console.log(html);
    });

    // document.querySelector('.list1').innerHTML = html;
    $('.list1').html(html);

ex)age가 20살이상이면 '성인'이하면 '미성년자'

data = json.items

    let html ='';
    data.forEach(element => {

        if(element.age >= 20){
            isAdult = '성인';
            ☝🏻isAdult(변수생성)
        }else{
            isAdult = '미성년자';
        }
        html += `
                ${element.name}
                ${isAdult} 
                `;
    });

    // document.querySelector('.list1').innerHTML = html;
    $('.list1').html(html);

🎈 if문 짧은조건일때 한줄로 쓰는방법(위의 결과와같음)

 isAdult = (element.age >= 20) ? '성인' : '미성년자';

(element.age >= 20) : if ? '성인' : 맞다면 '성인' : '미성년자'; : 그렇지않다면 '미성년자'

ex)문신이있다면 ${element.name}(나쁜친구) 넣어주기

isBad = (element.문신) ? '나쁜친구' : '착한친구';
                                    ☝🏻''(빈칸가능)
        html += `
                ${element.name}${isBad}
                ${isAdult} 
                
`;

🎈 Youtube_example

✍🏻 가져오고싶은 data

fetch('https://www.googleapis.com/youtube/v3/search?part=snippet&q=%EB%A8%B9%EB%B0%A9&maxResults=20&key=AIzaSyCvA0JdmROOxx3C60fBqO6geUp8B7xFAMs')
.then((response) => response.json())
.then((json) => {
    data = json.items;
    // console.log(json.items);

    html = '';

    data.forEach(el => {
        html +=`
                
                ${el.snippet.title}
                `;               
    });
    $('.list1').html(html);
})

👇🏻 결과

[오늘의집]

Tue, 01 Nov 2022 15:47:49 GMT

💻 오늘의집 clone coding

사이트명 : 오늘의집(mobile) 사용언어 : html / css / js 분류 : mobile

Check Point

header scroll
tab-menu
menu-click-event
반응형 슬라이더 Swiper
JSON

1. header scroll

스크롤에 반응하는 sticky header : 스크롤을 내릴 때는 header를 숨기고, 스크롤을 올릴 때는 다시 header를 보여줌

🎈 기본원리 !codepen[youngee/embed/qBKbeOr?default-tab=html%2Cresult]

✍🏻 코드작성

.header{width: 100%; position: fixed; top: 0; left: 0; z-index: 10; background: #fff; transition: all .3s;}
.header.hide{transform: translateY(-100%);}
.header.active{background: #fff;}

function headerScroll(){

    let lastScroll = 0;

    $(window).on('scroll',onScroll);

    function onScroll(){

        var headerTop = $(window).scrollTop(); 
        👉🏻 스크롤 세로좌표(맨 위 -> 0으로 시작)

        if(headerTop > lastScroll){
            $('.header').addClass('hide');
        }else{
            $('.header').removeClass('hide');
        }
        👉🏻 스크롤 내렸을때, .header에 .hide라는 클래스를 추가해서
        {transform: translateY(-100%);}으로 숨김



        if(headerTop >= $(window).height()){
            $('.header').addClass('active');
        }else{
            $('.header').removeClass('active');
        }
        👉🏻 스크롤을 다시 올렸을때(background나 color를 변경할수있음)
        lastScroll = headerTop;
    }
}

🎈 기본원리 !codepen[youngee/embed/OJEMzgd?default-tab=html%2Cresult] ✍🏻 코드작성

.header .header-bottom .gnb-item a.active{color: #35c5f0;}

$('.header-bottom .gnb-item a').click(function(e){
   e.preventDefault();
        target = $(this).data('target');
        👉🏻 data-class 가상의 클래스로 데이터를 넣어사용
        $(this).addClass('active').parent().siblings().find('a').removeClass('active');
        $(target).addClass('active').siblings().removeClass('active');
})

✔ a태그의 기능 -> #을 사용하여 각각의 위치로 이동시켜줌 ✔ e.preventDefault() -> a태그는 새로고침 및 이동속성이있기때문에 클릭이벤트 사용시 넣어줘야 a 태그의 href 속성이 중단된다.

click(function(e){
    e.preventDefault();

🎈 다른방법

 
   탭1
   탭2
   탭3
 
 
   내용1
   내용2
   내용3

✔ tab이라는 name을 공통으로 넣어줌 -> 동시 컨트롤이 가능해짐

$(function(){

 $('.tab-nav a').click(function(e){
    e.preventDefault(); //새로고침X 이동을막아줌

    target = $(this).attr('href')👈🏻속성값을 가지고올수있음
    $(this).addClass('active').siblings().removeClass('active');
    $(target).addClass('active').siblings().removeClass('active');
    👉🏻$(바뀌어야되는값).addClass('active').siblings().removeClass('active');
 })

})

🎈 기본원리 !codepen[youngee/embed/jOKWgpE?default-tab=html%2Cresult] ✍🏻 코드작성

.menu-inner .menu-area .depth{width: 100%; height: 40px; padding: 0 40px 0 14px; display: block; position: relative; font-weight: 700;}
.menu-inner .menu-area .depth.active{background: rgba(255,255,255);} 
☝🏻 menu-slide
.menu-area .depth .close-arrow::before{content: "\e96c";}
.menu-area .depth .close-arrow.open::before{content: "\e978";}
☝🏻 arrow-updown

if($(this).siblings('.sub').css('display') === 'none'){ 👈🏻처음클릭
    $('.depth1').removeClass('active');
    $(this).addClass('active');
}else{ 👈🏻두번째클릭(열고닫힘 or 다른 depth클릭)
    $('.depth1').removeClass('active');
}

   $('.sub').stop().slideUp(); 
   $(this).siblings('.sub').stop().slideToggle();

✔ Toggle -> 열고닫고 문제점: active가 안빠짐

$(this).siblings('.sub').stop().slideToggle();

✔ Toggle+slideUp -> 열고닫고 + 다른메뉴클릭시 닫히고열리고 문제점: 열린지닫힌지 모르기때문에, 내가 원하는 특정모션(조건)을 주지못함 ex)화살표,alert

$('.sub').stop().slideUp();
$(this).siblings('.sub').stop().slideToggle();

✔ Toggle+slideUp+if -> 열고닫고 + 닫히고열리고 + 조건문가능

if($(this).siblings('.sub').css('display') === 'none'){ 
   $('.depth1').removeClass('active');
   $(this).addClass('active');
}else{ //재클릭
 $('.depth1').removeClass('active');
}

5. 반응형 슬라이더 Swiper

🎈 기본원리

1.link , script 주소 가져오기(1번만) 2.마크업 구조짜기 3.스크립트 실행문 가져오기 4.옵션수정

🎈 주의사항

클래스명 swiepr,swiper-wrapper,swiper-slide 절대로 건드리지말것 (단, 코드 가져왔을때 mySwiper <- 클래스명 그대로 쓰지말것)
스크립트 실행문의 타켓과 스와이퍼의 타겟이 일치한가
.swiper는 높이가없음 -> 자식들은 높이를 상속받음

https://swiperjs.com/ Demos -> 원하는구현 > core > 스크립트 실행문 가져오기

✍🏻 navigation / pagination -> custom가능

navigation: {
  nextEl: ".next",
  prevEl: ".prev",
pagination: {
  el: ".swiper-pagination",
  clickable: true,
},

✔ swiper안에있을때, 위치 컨트롤하기쉽다. ✔ custom했다면, 스크립트에서 반드시 클래스명을 바꿔줘야 적용된다.

6. JSON

🎈 구현화면


  오늘의 인기사진

✍🏻 data만들기(배열)

{
    "items":[
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166547727078651432.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        },
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166548234298947120.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        },
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166545882450511476.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        },
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166547509725909118.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        },
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166547819058852579.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        },
        {
            "link":"경로",
            "thumbnail":"https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/166546278300246529.jpeg?gif=1&w=512&h=512&c=c&webp=1"
        }
    ]
}

✍🏻 fecth

fetch('./asset/data/todayphoto.json')
    .then((response) => response.json())
    .then((json) => {
            data = json.items;
            let html = '';
            isNumber = '${index++}';
            index = 1;

            data.forEach(el => {

                if(index < 4){
                    isNumber = `${index++}`;
                }else{
                    isNumber = '';
                }

                html+= `
                         
                          
                         ${isNumber}
                        `;
            });
            $('.photo-list').html(html)
    })

Issue Point

menu
transiton 효과적용되는 대상에맞게적용
flex로 영역쉽게잡기
가로/세로 스크롤컨트롤
OhouseIcon

dimmed -> menu

.menu.active{left: 0; transition: all .3s;}
.dimmed.show{display: block;}

$('.header .btn-menu').click(function(e){
    e.preventDefault()
    $('.menu').addClass('active');
    $('.dimmed').addClass('show');
})

$('.dimmed').click(function(e){
    e.preventDefault()
    $('.menu').removeClass('active');
    $('.dimmed').removeClass('show');
})

2. transiton 효과적용되는 대상에맞게적용

:animation이 부드럽게 작용하려면 hover가되는 대상에 transition을 정확히 적용해주어야 한다.

🙅🏻‍♀️ 틀린예시 - 뚝뚝끊김 !codepen[youngee/embed/JjZXbKZ?default-tab=html%2Cresult]

🙆🏻‍♀️ 올바른예시 - 부드러움 !codepen[youngee/embed/ExRKNXL?default-tab=html%2Cresult]

3. flex로 영역쉽게잡기

🎈 구현화면 ✍🏻 코드작성

.sc-story .story-inner{display: flex; justify-content: space-between; flex-wrap: wrap;} 👈🏻 container
.sc-story .story-item{width: calc(50% - 5px); 👈🏻 container-item
.sc-story .story-item.home-tip{display: flex; flex-direction: column;} 👈🏻 container

!codepen[youngee/embed/JjZXbKZ?default-tab=html%2Cresult]

-> 사이여백값만 알수있다면 flex로 영역을잡는게 편함(반응형)

4. 가로/세로 스크롤컨트롤

🎈 가로/세로 스크롤표시O ✍🏻 코드작성

overflow: hidden; overflow-x: auto; (가로)
overflow: hidden; overflow-y: auto; (세로)

단, 모바일화면에서는 스크롤표시가 없어져야함(touch) 🎈 가로/세로 스크롤표시X ✍🏻 코드작성

-ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ 👈🏻 해당영역에 추가 
해당영역::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

5. OhouseIcon

'오늘의집'은 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미지를 하나의 큰 이미지에 포함시킨 배경 이미지로 제작하여 단 한번의 HTTP 요청을 통해 문서에 삽입하는 방법을 사용하였다(아이콘폰트)

🎈장점 하나의 글꼴에 다양한 문자(아이콘)을 넣어 두고 이를 호출해 사용할수있음

font-family: OhouseIcon;
    vertical-align: top;

실제로 사용할때는 가상요소에 폰트번호만 적어주면됨

클래스명::before{content: "\ea05";}

[NAVER]

Tue, 01 Nov 2022 14:16:11 GMT

💻 Naver clone coding

사이트명 : 네이버
사용언어 : html / css
분류 : 적응형 PC

Check Point

시맨틱 마크업
의미있는 클래스명 짓기
웹 접근성을 고려한 blind 기법
float 해제 방법
IR, IS 기법

1. 시맨틱 마크업

: 태그 자체에 의미를 부여하여 마크업을 구성하는 것.

✍🏻 시맨틱태그 장점

SEO(search engine optimization) 최적화에 유리함 : 검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 함
웹 접근성에 효율적 : 스크린리더 환경에서는 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있음
유지보수의 용이성 : 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능한 정리된 마크업은 코드 식별이 용이

✍🏻 시맨틱태그의 구성 및 사용용도

: header / main / footer

header : h1(logo),nav(menu)
main : section(메인컨텐츠),article(독립적인컨텐츠)
footer : address -> 사이트의 연락처나 정보를 기입

strong : 문장강조 게시글에서 제목급 em: 단어강조 게시글에서 카테고리,분류급 p : 문장,단락,내용 유의미한 텍스트 span : 의미없거나 단순 텍스트 i : 디자인

2. 의미있는 클래스명 짓기

의미없이 영역을 구성할 때 group-flex column-left,column-right col-left,col-right row-top,row-bottom
의미있게 영역을 구성할 때 섹션: sc-class 영역: class-area 리스트: ul -> class-list , li -> class-item a태그 : 링크이동 -> link-목적, 특정한 액션 btn-더보기(스크립트작용)
class작성이 4단계 이상은 지속X

🙅🏻‍♀️[틀린예시 - 작성하기 힘들고 자식이 겹칠 수 있음] .section-visual ul{} .section-visual ul li{} .section-visual ul li a{} .section-visual ul li a img{}

🙆🏻‍♀️[올바른예시 - 간결하고 정확함] .sc-visual .txt-list{} .sc-visual .txt-item{} .sc-visual .link-item{} .sc-visual .link-item img{}

웹 접근성을 고려한 콘텐츠 숨기기를 위한 기법
display:none, visibility:hidden 등 여러 기법을 사용하여 콘텐츠를 숨길 수 있지만 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 발생함 -> 즉, 화면에는 보이지 않지만 스크린 리더에는 읽히는 기법을 사용해야한다.

🎈 example

.blind {
    /* 레이아웃에 영향을 끼치지 않도록 */
  position: absolute;

    /* 스크린 리더가 읽을 수 있도록 */
  width: 1px;
  height: 1px;

    /* 눈에 보이는 부분을 제거 */
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
}

4. float 해제 방법

: 자식요소에 float를 적용 시 태그가 붕- 뜨게되면서, 부모는 자식이 없다고 판단하고 height값을 잃기때문에, 해제를 해주어야 한다.

부모요소에 overflow:hidden; 주기 영역 밖으로 넘치는 디자인이 있다면 사용X(단순 디자인일때만 사용)
가상요소 ::after에 clear처리

🎈 example

  float된 요소의 부모태그::after {
   content:'';
   display:block;
   clear:both;
 }

5. IR, IS 기법

IR(Image Replacement) 의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법으로써 화면 낭독기를 사용하는 시각 장애인이 텍스트 데이터에 접근 할 수 있도록 함
IS(Image Sprite) 조각난 이미지 파일들을 하나의 파일로 병합 후 배경처리해서 웹 문서 전송 속도를 높이는 기법. 이 때 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용됨

🎈 example

-> 공통으로 쓰이는 영역 코드작성후, 해당 클래스와 좌표만 추가해주면됨

  .class명:after{
  background-image: url(../images/sp-bg.png);
  background-size: 457px;
  background-repeat: no-repeat;
}

https://spritegen.website-performance.org/ https://www.toptal.com/developers/css/sprite-generator

Issue Point

flex사용하여 gnb영역잡기
뉴스영역 border 디자인
Text 말줄임표시

1. flex사용하여 gnb영역잡기

   
     
       메일
       카페
       블로그
       지식iN
       쇼핑

.header .gnb-area .gnb-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .gnb-area .gnb-item {
  font-size: 15px;
  font-weight: bold;
  line-height: 52px;
  color: #19ce60;
}

🎈 flex 참고사이트

https://studiomeal.com/archives/197

2. 뉴스영역 border 디자인

전체 content박스만 border 1px solid 처리 -> 그외 나머지 수직선과 수평선은 i태그를 활용하여 position:absolute;로 위치 고정 시킴

수직선과 수평선을 각각 코딩하여 위치 고정을 시킨 이유 : 각 li에 border처리를 했다고 가정했을 때, 만약 미디어의 리스트가 부족한 경우 디자인 레이아웃이 망가지기 때문에

👉🏻 수직선은 left값으로 조절 
.sc-news .vt-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background: #dae1e6;
  top: 0;
}

.sc-news .vt-line.vt1 {
  left: 124px;
}

👉🏻 수평선은 top값으로 조절 
.sc-news .hr-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #dae1e6;
  left: 0;
}

.sc-news .hr-line.hr1 {
  top: 65px;
}

3. Text 말줄임표시

한 줄 단위로 텍스트 말줄임 표시법

.box{
display:block; -> 말줄임 처리를 위해 글자 출력할 공간이 필요함
white-space:nowrap; -> 텍스트가 부모너비보다 넓어지면 자동으로 줄바꿈
overflow:hidden; -> 넘치는 텍스트 숨김처리
text-overflow:ellipsis; -> 말줄임 ... 표시
}

2줄이상 텍스트 말줄임 표시법

.box{
width:200px;
/*특정 단위로 텍스트를 자르기 위한 구문*/
white-space: normal; -> nowrap 해제
display:-webkit-box; -> 블록을 수직,수평으로 배치 혹은 역순배열 임의 배치 순서 바꿀 수 있는 특성
-webkit-line-clamp:3; -> 블록 컨테이너의 컨텐츠를 지정한 줄 수 만큼 제한하는 속성 
-webkit-box-orient:vertical; -> 콘텐츠를 가로 또는 세로로 배치할지 여부를 결정하는 속성
overflow:hidden; -> 넘치는 텍스트 숨김처리
}

IE에서 말줄임 표시법 : -webkit-box-와 text-overflow 지원X

.box{
width:200px;
white-space: normal; 
display:-webkit-box;
-webkit-line-clamp:2; 
-webkit-box-orient:vertical; 
overflow:hidden;
/*추가*/
line-height:1.2;
max-height:2.4; -> line-height값 2배
}

youngee_316.log

[JavaScript] - 객체/배열

Object - 접근,추가,삭제

Object - 단축 property

Object - property 존재여부확인

for...in반복문

[JavaScript] - 화살표함수

[JavaScript] - 함수

[JavaScript] - switch

switch

[JavaScript] - loop/for/while

for

while

do.. while

break

continue

[JavaScript] - 논리연산자

|| OR

&& AND

! NOT

[JavaScript] - 변수

prompt

confirm

그 외

[Mercedes-benz]

Check Point

1. data-속성 태그컨트롤

The new 2024 Mercedes C63 S E

2. gsap 콜백함수

1. Multipoint Inspection

Issue Point

1. video-control

2. grid로 영역잡기

[HYBE]

Check Point

1. loading-page

2. text-animation

BTS LEE HYUN LE SSERAFIM NewJeans SEVENTEEN ENHYPEN TXT HYBE ARTIST

HYBE is committed to satisfying customers with the 'content' leading the global trend and our 'fans'

[대광건영]

Check Point

1. swiper-pagination - fraction

2. swiper-navigation

2. menu-list

3. scss 미디어쿼리 적용방법

[JSON]

[오늘의집]

Check Point

1. header scroll

2. tab-menu

3. menu-click-event

5. 반응형 슬라이더 Swiper

6. JSON

오늘의 인기사진

Issue Point

1. menu-dimmed 순차적으로 click-event주기

2. transiton 효과적용되는 대상에맞게적용

3. flex로 영역쉽게잡기

4. 가로/세로 스크롤컨트롤

5. OhouseIcon

[NAVER]

Check Point

1. 시맨틱 마크업

2. 의미있는 클래스명 짓기

3. 웹 접근성을 고려한 blind 기법

4. float 해제 방법

5. IR, IS 기법

Issue Point

1. flex사용하여 gnb영역잡기

2. 뉴스영역 border 디자인

전체 content박스만 border 1px solid 처리 -> 그외 나머지 수직선과 수평선은 i태그를 활용하여 position:absolute;로 위치 고정 시킴

3. Text 말줄임표시

BTS LEE HYUN LE SSERAFIM NewJeans SEVENTEEN ENHYPEN TXT
HYBE ARTIST