본문 바로가기

Frontend

(12)
JavaScript n자리 랜덤숫자 (초간단) n자리 랜덤숫자를 만들어볼게요. 말그대로 문자없이 숫자만 이용해서 생성합니다. 파라미터로 n을 넘기면 그 숫자만큼의 길이의 랜덤숫자가 생성되요. 맨 앞자리가 0일수도 있게 하기위해 타입은 문자열이에요. function generateRandomCode(n) { let str = '' for (let i = 0; i < n; i++) { str += Math.floor(Math.random() * 10) } return str } 요건 바로 개발자 도구(F12) 열고 테스트해볼 수 있어요!
JavaScript 시간 계산 표시 (방금전, 몇분전, 몇시간전, 몇일전...) 유튜브를 보면 글 작성 기준으로 방금 전, 몇분 전, 몇시간 전, 몇일 전, 몇주 전, 몇개월 전, 몇 년전 이런 식으로 시간을 표기해줘요. 저 역시도 왠만하면 글 작성 날짜를 보여주는 것보다 지나간 시간을 계산해서 표기해주는 것이 좋더라구요. 물론, 프로젝트에 따라 다르겠지만요! 그럼 자바스크립트에서 글 작성 날짜를 받아서 해당 글이 얼만큼 시간이 흘렀는지 표기해주는 함수를 만들어볼게요. function displayedAt(createdAt) { const milliSeconds = new Date() - createdAt const seconds = milliSeconds / 1000 if (seconds < 60) return `방금 전` const minutes = seconds / 60 if ..
HTML/CSS 비디오 테두리 제거 video 태그를 활용하여 비디오를 재생할 때 테두리가 생기는 것을 볼 수 있어요. 이를 없애는 css는 매우 간단합니다. html css .player { outline: none; border: none; }
JavaScript 숫자 가격 표시 (천단위 콤마) 10000 -> 10,000 10000000 -> 10,000,000 요런식으로 금액에 콤마를 표기하여 보기쉽게 나타내고 싶은 경우가 있어요. 아쉽게도 아직 CSS로 표기할 수 있는 방법은 없는 것으로 알아요. JavaScript를 활용해서 천단위에 콤마를 찍어볼게요. Number.prototype.toLocalString() 사용 숫자를 특정 언어에 맞게 문자열로 변환해줍니다. var price = 10000; price.toLocaleString(); // 10,000 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString Number.prototype.toLocaleStr..
Vue 프로젝트 생성, 튜토리얼 (vue-cli) npm이 설치되어 있어야 해요. 설치되어있지 않다면 아래 링크를 먼저 참고해주세요. https://gofnrk.tistory.com/32 NVM 설치, Node 버전 관리 (Windows / Mac) NVM이란? (Node Version Manager) 말그대로 노드 버전 관리자에요. 마땅히 설명할게 없네요. 어떠한 도구로 개발하다보면 버전을 교체하거나 여러 버전을 관리해야 하는 경우가 생겨요. node도 마찬가지에요. nvm.. gofnrk.tistory.com 1. vue-cli 설치 npm install -g vue-cli 2. vue 프로젝트 생성 현재 디렉토리에 생성합니다. vue create project명 입력하면 폴더 안에 소스가 생성될거에요. vue create . 3. vue route..
HTML/CSS 가운데 정렬 css로 div를 수평으로 가운데 정렬해볼게요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 자식 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 1. inline-block child div에 inline-block 속성을 주면 div도 text-align을 사용하여 가운데 정렬을 할 수 있어요. 단, child의 요소들까지도 모두 가운데 정렬이 됩니다. .parent { text-align: center; } .child { display: inline-block; } 2. flex parent div에 flex 속성을 주면 엘리멘트 요소의 위치를 조정할 수 있어요. .parent { display: flex; justify-content: center; } 수..
HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작) 스크롤은 동작하지만 스크롤바를 숨기고 싶은 경우가 있어요. 예제를 통해 알아볼게요. 우선, 스크롤을 생성하겠습니다. 안녕하세요. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 안녕하세요. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active. 스크롤바 숨기기 (Hide scroll bar) .box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .b..
HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성) 실제 배열에 영향을 주지 않는 css는 html 태그에 박아버렸어요. div를 가로로 나열해볼게요. 기본적으로 div는 display: block; 속성이여서 자동적으로 줄바꿈이 됩니다. 가로 3등분 이걸 가로로 배열시켜 볼게요. 우선, 상위 div를 만들어줄거에요. 그다음 flex 속성을 이용해서 가로로 배열시킬건데요. 상위 div에는 display: flex; 를 주고 배열하고자하는 하위 div는 flex 속성의 값으로 유동적으로 각각의 비율을 맞출 수 있어요. 이 예제에서는 모두 간격을 똑같이 할거라 모두 동일하게 flex: 1;로 설정할게요. .parent { display: flex; } .child { flex: 1; } 양옆 배치 태그를 하나 빼버리면 두개로 나란히 배치가 될거에요. 너비를 ..