웹퍼블리싱_공부

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

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

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

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

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

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

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

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

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

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

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

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

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