전체 글

# Grid 2차원 레이아웃으로 수직, 수평 정렬을 동시에 할 때 사용 📍 용어 정리 Track : 행(row) 으로 된 한 줄, 열(column)로 된 한 줄을 의미한다. Line : 트랙과 트랙 사이의 간격을 의미한다. Cell : 하나의 칸, 즉 아이템이 배치되는 최소단위의 영역을 의미한다. Area : 여러개의 칸, 즉 하나 이상의 셀로 이루어진 영역을 의미한다. span : 그리드 선을 기준으로 확장하는 것을 의미한다. # Grid Container (부모요소에 적용) 1. display grid inline-grid 💡이 때, 그리드를 설정했다고 끝나는 것이 아닌 몇 개의 열과 몇 개의 행을 만들어 줄 건지 결정해줘야 한다. 2. grid-template-rows, grid-template-c..

# Flex 1차원 레이아웃으로 수직, 수평 정렬 둘 중 하나만 할 때 사용 flex요소는 계속 중첩해서 사용할 수 있음! 주 축으로 정렬하던 교차 축으로 정렬하던 여백이 있어야 사용 가능하다. # Flex 구분하기 container (부모 요소) item (자식 요소) 정렬을 하기 위해서는 자식 요소를 부모 요소로 감싸주어야 한다. # Flex Container (부모요소에 적용) 1. display flex inline-flex 2. flex-direction (방향) row : Itmes을 수평으로 표시한다. (✨기본값) row-reverse : 수평에서 Itmes의 순서를 역방향으로 표시한다. column : Itmes을 수직으로 표시한다. column-reverse : 수직에서 Itmes의 순서..

# GSAP gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive cdnjs.com JavaScript에 애니메이션 처리 해주는..

주차별 멘토링 미션 시작! 앞으로 있을 클론과제를 위해 사용해 보면 좋을 거 같은 CSS를 모아봤다. 근데 내가 쓸 수 있을지는 모르겠네..^^ 아냐 할 수 있어ㅎ 1. button See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen. See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen. - 가상선택자 hover 와 가상요소 before, after를 사용해서 버튼에 다양한 효과를 준다. - 나는 뭔가 어떤 사이트에 들어갔을 때 간단해도 버튼에 간단한 효과가 있으면 계속 마우스를 올리게 되는 거 같음...!😋 See the Pen Confetti Button by M..

- 개발자라면 떼놓으려고 해도 떼놓을 수 없는 git 과 github를 정리해보자 - 특강을 들으면서 정리해 둔 내용 # 버전이란? - “프로젝트 범위”에서 유의미한 수정(변화) 1. 버전 관리 시스템(Version Control System, VCS) 버전 관리 백업, 복구 (선택) 협업 2. 버전 관리 시스템의 종류 로컬식 : 내 컴퓨너 안에서만, 협업 X 중앙 집중식 VCS : 서버에서만 버전 관리(백업), 파일 하나하나 분산식 VCS : 모든 컴퓨터에서 "프로젝트 단위" -> 번거로운 / 위험성 X (ex. Mercurial, Bazaar, Git-Github) 3. 깃과 깃허브의 관계 깃은 OO식 버전 관리 시스템 깃은 우리들 컴퓨터에 설치하는 프로그램 “버전 관리” 우리 컴퓨터에서만 일어나는 ..

✨프로젝트 생성하기 1. firebase 홈페이지 접속하기 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 시작하기 클릭 3. 기존의 프로젝트가 있다면 프로젝트 만들기 클릭 or 처음이라면 프로젝트 추가하기 클릭 4. 프로젝트 이름 지정하기 5. Google 애널리틱스 체크박스 해제 → 프로젝트 만들기 클릭 ✨호스팅 설정하기 빌드 탭 → Hosting 클릭 1. 시작하기 클릭 2. 윈도우는 명령프롬프트 → 오른쪽버튼 → 관리자권한으로 실행 3. 명령어 복사해서 설치 → 다음 클릭 4. 내 프로젝트 루트 디렉토리로 가서 명령어 복사해서 설치 (vs code로 했다면 해당 프로젝트..