분류 전체보기

벌써 11월이 거의 다 지나갔다. 처음 시작할 때는 여유가 넘쳤었는데 강의 듣고 과제 하고 멘토링 하고 어쩌다보니 한달이 지나버렸다. 그래도 나름 계획을 세우고 시작했음에도 변수들이 생기다보니 못한것도 많다. 쉽다고 생각했던것도 쉬운게 아니었고 이래저래 아쉽고 많이 지치는...이 아니고 알찬 한달이었다.ㅎ 다음달에는 자바스크립트 실강이 시작되는데 너무 욕심부리지 말고 지치지 말고 잘 달려봐야지! 📝 이번달에 뭘 배웠나 1주차는 워밍업 시간이었던거 같다. 앞으로 긴 시간을 달리기 위한 준비 시간 같은... 그리고 처음으로 깃허브 실강을 들었다. 2 ~ 3주차에는 HTML,CSS 실강이랑 과제수행을 했다. 나름 HTML, CSS는 자신있다고 생각했는데 사람은 겸손해야 된다는 걸 느꼈다. 난 아직 모르는 것도..

📍 표준내장객체 강의를 듣고 복습도 하고 필요할때 마다 꺼내 볼 수 있게 간단하게 정리해두려고 합니다. 자바스크립트를 공부하다보면 적재적소에 메서드 사용하는게 정말 어려운데 제대로 정리해두고 익숙해져서 잘 활용할 수 있었으면 좋겠습니다! 표준 내장 객체 - JavaScript | MDN 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org 1. 문자(String) 메서드 내용 length 문자의 길이(숫자)를 반환 includes() 대상 문자에 주어진 문자가 포함되어 있는지 불리언 값으로 확인 indexOf() 대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환 ( 일치하는 문자가 없으면 -1 반환) padEnd(..

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 📍 강의 들으면서 처음 알게 된 슬라이드 라이브러리! 아무것도 모르던 때 슬라이드 기능을 구현하겠다고 🐶고생을 했던적이 있었는데.. 이렇게 간단하게 슬라이드 기능을 구현할 수 있다는게 얼마나 감격스럽던지ㅠ_ㅠ 아무튼 아무것도 모르던 저처럼 고생하는분이 없길바라며 간단하게 정리해보았습니다. # Swiper 다양한 동작의 슬라이드 기능을 쉽게 사용할 수 있는 슬라이드 라이브러리이다. 1. 라이브러리..

# 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에 애니메이션 처리 해주는..