Front-End

[CSS 반응형 단위] Rem, Em 정리 및 활용 (feat. 드림코딩)

반응형 웹사이트를 구축하기 위해서는 창에 사이즈에 따라 유동성 있게 움직이는 콘텐츠를 담아내야 한다. 예전에 스마트폰으로 어떤 웹사이트를 들어갔다가 피씨버전으로 뜨는 걸 보고 불편해서 바로 나왔던 적이 있다. 상품을 구매하기 위해 들어갔다가 제품도 안 보고 도로 나오게 된 것이다. 그 기업 입장에서는 모바일 버전을 제대로 구축해놓지 않아 고객 한 명을 바이 바이 한 것일 수도 있다. 반응형으로 페이지를 구축하고 어떤 사용자가 이용하든 보기 편리하게 만들어내야 한다. 그러기 위해선 px과 같은 절대적인 고정형 단위가 아닌 상대적인 단위를 활용할 줄 알아야 한다. 콘텐츠가 물처럼 어디든 담길 수 있게 말이다! CSS의 상대적인 단위 rem, rem, vw, vh, % 1. Rem 웹에 가장 최상위인 루트 요..

[자바스크립트 기본] 알아두면 유용한 배열 Array 메소드 정리 (feat.드림코딩)

알고리즘 문제를 풀다보면 배열메소드를 사용해야 할때가 많다. 다른 사람들의 풀이를 보면 새로운 메소드들과 활용법을 보며 감탄이 나온다. 새로운 메소드들도 공부할겸사겸사 자바스크립트 배열 메소드를 정리해본다. 덤벼라 배열 메소드!! 1. 배열(Array) 데이터의 순서가 있는 집합이다. 배열은 하나의 변수의 여러 개의 값을 저장할 수 있다. let numArr = [1, 2, 3, 4]; console.log(numArr); // [1, 2, 3, 4] 2. 배열 (Array) 메소드 와 예시 2-1. toString 배열의 있는 요소를 문자열로 변환 let arr = [1,2,3,4] console.log(arr.toString()); // 1,2,3,4 let arr2 = ['a', 'b', 'c', ..

[자바스크립트 기본] 알아두면 유용한 Math 메소드 정리, 로또번호 추출기

1. Math객체 Math객체는 수학에서 자주 사용되는 상수의 함수들을 구현해놓은 자바스크립트의 표준 내장 객체이다. 1-2. Math객체 특징 Math객체는 Number 자료형만 지원하며 BigInt와는 사용할 수 없다. (BigInt : Number보다 큰 정수를 표현할 수 있는 내장객체) constrctor(생성자)가 없다 instance를 생성하지 않고 바로 Math객체의 모든 메소드와 프로퍼티를 사용할 수 있다. 2. 대표적 Math 메소드와 예시 2-1. Math.floor(num) ➡️ Number 인수의 소수점 이하를 내림하여 정수를 반환 음수일 경우 소수점 이하를 내림한 후 -1 한 정수를 반환 Math.floor(1.6); //1 Math.floor(1.2); //1 Math.floor..

[JS] 노마드 코더 : 바닐라 자바스크립트 챌린지 후기

목차 1. 챌린지 후기 2. 강의소개 3. 챌린지소개 4. 유익했던 기능 1. 챌린지 후기 자바스크립트 챌린지가 끝났다...!!!!! 챌린지 두 번째 날 노마드 코더 챌린지가 있었던걸 까먹어서 하루를 빼먹었다

[GitHub] 깃허브에 gif 파일 업로드 (맥북)

프로필 README를 작성하면서 gif를 하나 올렸었는데 다시 쓰려니까 금방 잊어서 기록해두려고 한다. 리드미에 그냥 올리면 되는 줄 알았는데 아니라서 귀찮다. 그러니 기록하자. repository에 있는 README파일을 적다 보면 gif 파일이 필요해지는 순간이 있다. 이미지만 올리기에는 밋밋한 느낌이 들고 프로젝트 기능 구현 모습이 움직이게 보였으면 좋겠다 싶은 순간 다른 사람들이 올린 기깔나게 움직이는 기능들을 본 순간 1. 맥북을 이용한 프로젝트 녹화 cmd + shift + 5 버튼을 동시에 누르면 전체 화면을 기록하거나 선택한 화면을 부분 기록할 수 있다. 부분적으로 선택한 화면을 기록하려고 버튼을 클릭한 상태이다. 기록을 클릭하면 스크린 녹화가 시작된다. 2. 맥북을 이용한 비디오 편집 짧..