💻 자바스크립트(기초) 코드 작성이 다 끝나면 끝에 세미클론(;)은 꼭 넣기! 문자열에는 꼭* 따옴표(' ', " ") *넣어주기! * let, const* let: 재할당이 가능(재할당을 할 시 let을 생략하고 변경할 값을 넣어주면 됨) const: 절대

💻 지식IN 클론코딩 사이트: FLOW 사용언어: HTML, CSS, Jquery, gsap 분류: 반응형 PC, 클론코딩 📌 KEY POINT 흐르는 배너 폼태그 조건처리 스크롤 트리거(아래에서 위로 올라오는 애니메이션)

💻 FLOW 클론코딩 사이트: FLOW 사용언어: HTML, CSS, Jquery, gsap 분류: 반응형 PC, 클론코딩

💻 ZARA 리뉴얼 사이트: ZARA 사용언어: HTML, CSS, Jquery, gsap 분류: 적응형 PC, 리뉴얼 코딩 📌 KEY POINT 텍스트 animation에서의 오류 gsap 1. 텍스트 animation ※ 애니메이션을 처음으로 줬을 당시 끊

사이트: 코크플레이사용언어: HTML, CSS, Jquery분류: 모바일, 클론코딩처음으로 모바일 클론코딩을 진행하였습니다. 이번 코크플레이 코딩은 JSON을 사용하여 상품의 데이터를 만들어 적용(스토어부분)을 하였고 상품을 누르면 팝업배너로 상품의 정보를 알 수 있도

사이트: 네이버 커리어스사용언어: HTML, CSS, Jquery분류: 반응형 PC, 클론코딩이번 네이버 커리어스 클론코딩은 미디어쿼리를 이용하여 반응형 PC로 제작하였으며 swiper slide를 사용하여 제작하였습니다. 이번 클론코딩을 통해 미디어쿼리를 배울 수 있

사이트: 서울시청사용언어: HTML, CSS, Jquery분류: 적응PC, 클론코딩이번 서울시청 클론코딩은 전에 했던 클론코딩과는 다르게 제이쿼리와 swiper 라이브러리를 사용하여 애니메이션을 구현하였습니다. 이를 통해 제이쿼리의 기본적인 문법을 배웠으며 swiper

The GreenSock Animation Platform의 줄임말로 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 애니메이션 자바스크립트 라이브러리이다. gsap.to(): 움직임의 끝의 값을 정의gsap.from(): 움직임의 시작 값을 정의gsap.from

https://releases.jquery.com/ 로 들어가 jQuery Core 3.6.3에 minified를 클릭 한 후 주소만 복사한다. (버전은 상관없지만 모든 과제에 3.6.3버전을 쓸 예정이다.)$()을 사용할 때는 무조건 최하단에 작성해야한다.

💻 좋은제품연구소 시안코딩 사이트: 좋은제품연구소 사용언어: HTML, CSS 분류: 적응형 PC, 시안코딩 포토샵 시안을 통해 좋은제품연구소라는 사이트를 코딩(PC버전, 모바일버전)하였습니다. 📌 KEY POINT pc버전 포토샵에서 원하는 부분 사진 크롭

💻NAVER 클론코딩 사이트: 네이버 사용언어: HTML, CSS 분류: 적응형 PC, 클론코딩 네이버를 클론코딩하며 blind기법, 적응형 PC등 새로운 지식들을 습득할 수 있었으며 기존의 네이버와는 다르게 flex를 사용하여 클론코딩을 하였습니다. 📌KEY

flex flex란? 레이아웃 배치를 전용으로 하는 기능으로 최근에는 float를 대신해 많이 사용되고 있다. flexble box, flexbox라고 불리기도 한다. 부모요소에 쓸 수 있는 속성 justify-content(가로축에서 이동) flex-start:

요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨터이네의 왼쪽 또는 오른쪽에 배치되는 것을 말한다. -> 문서의 흐름에서는 제외되지만, 필요한 만큼 공간을 차지한다.none: 기본값left: 자신을 포함하고 있는 박스 왼쪽에 떠 있는 상태right: 자

ReduxRedux란 JS의 상태(= 컴포넌트 내부에서 사용하는 데이터)관리 라이브러리로서 본질은 Node.js 모듈이다.구독 발행 모델구독 발행 모델은 비동기 메시징 패러다임으로 발행자와 구독자가 있으며 그 사이에 브로커(두 객체사이에서 들어오는 메시지를 필터링하여

Webpack과 Babel 세팅하기JSX자바스크립트의 확장문법으로 코드가 간결해지고 가독성이 향상되며 보안성이 올라간다는 장점이 있다.변수를 넣을 때는 중괄호로 표현하기.class를 넣고싶을 때는 className이라고 표현하기.Hook리액트에서 원하는 시점에 정해진

JavaScript 데이터 문자 .indexOf(): 지정된 요소가 몇번째에 있는지를 알 수 있는 메소드로 요소가 없다면 -1로 출력된다. .slice(): 문자열의 일부를 추출하면서 새로운 문자열을 반환해주는 메소드다. .replace('변경하고 싶은

JavaScript 시작하기 ECMA스크립트란? Ecma International이 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말하며, 자바스크립트를 표준화하기 위해 만들어졌다. 데이터 타입 확인 typeof를 통해 특정 데이터들이 무

JavaScript 선행 표기법 dash-case(kebab-case) ex) hello-world snake_case ex) hello_world camelCase ex) helloWorld PascalCase ex) HelloWorld Zero

** 1. css 속성 문자 color: 글자의 색상 text-align: 문자의 정렬 방식 left right center justify text-decoration: 문자의 장식(선) 기본: none(장식 없음)

** 1. css 개요 css 기본문법 css 선언 방식 내장방식: style사이에 내용을 작성하는 방식. 코드가 길어지면 보기가 힘들어지기 때문에 권장하지 않음. 인라인방식: 요소의 스타일을 직접 작성하는 방식(선택자가 없음). 먼저 처리되어지려고 하