조금씩 천천히

요즘 백엔드를 아우르는 강의 하나를 듣고 있는데, 디비를 연결해야하는 순간이 왔다. 강의에선 디비 설치하는 것 까지 알려주지 않기 때문에 구글링을 하며 몽고디비 설치를 해보았는데, 중간중간 막히는 부분들이 있어서 설치과정을 정리해보았다. 1. 몽고디비 페이지에서 커뮤니티 버전 다운로드 하기 https://www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB's download center. www.mongodb.com 버전과 플랫폼을 확인 후 다운로드~ 2. 다운로드 된 파일 압축풀기,..

노마드 코더 js크롬 앱 만들기 하면서 알게 된 것 정리 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. developer.mozilla.org 날짜와 시간을 다룰 때 사용한다 date 변수를 만들고 그 안에 new Date(); 를 사용해 담아준다. 그리고 date를 찍어보면 날짜와 시간이 표시된다 위 이미지를 보면 date를 찍었을 때 나오는 시간의 초와 맥에 표시되는 시간이 다르다는 걸 알 수 있다. (초가 다름) date 변수에 담은 시간은 그 시점의 시간인 18:36:17 로 고정(?)된다. 시간을 시계처럼 자동으..

https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr 바닐라 JS로 크롬 앱 만들기 크롬 앱 클론코딩하며, JS 이론 배우기 [초급] HTML, CSS, JS academy.nomadcoders.co 지난번 듣기로 했던 노마드코더의 바닐라 js로 크롬 앱 만들기를 들었다. 이론 부분은 건너뛰고 실습 부분만 들었는데 이상하게 진도율이 안잡힌다... 처음부터 듣지 않아서 그런가?? 다음 들을 강의로 바닐라 js로 게임 만들기를 담아두었다. 다 들은 후에 유투브 클론코딩을 결제할 예정. https://github.com/kurepark/makejs_chromeapp kurepark/makejs_chromeapp 노마드코더 보면..

아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 속 텍스트의 길이가 바뀌거나 버튼의 width가 넓어질때 등등 유연하게 대응하지 못할 경우가 많았다 그래서 두가지 종류의 버튼을 다시 만들어 보았다 흰색 버튼은 버튼의 width가 고정되어있고 글자가 길어져서 버튼의 텍스트가 떨어지더라도 아이콘이 항상 가운데에 위치할 수 있도록 만든 것이다 보라색 버튼은 최소 width가 있는 상태에서 글자 텍스트가 길어지거나 width가 100%가 되더라도 아이콘이 항상 텍스트 옆에 붙어있는 상태로 만들어졌다 이미지처럼 흰색 버튼의 텍스트는 버튼의 width가 정해져있어 텍스트가..

최근 작업을 하다가 position sticky라는 새로운 속성을 알게되었다position은 4가지만 있는줄 알았는데 아직 모르는 속성이 있었다니!그래서 정리해보는 position 속성 우선 position에는 총 5가지가 있다. static, relative, absolute, sticky 그리고 static을 제외한 4가지 속성은 각각 top, left, bottom, right를 사용하여 위치를 지정할 수 있다 #### position : static static 요소는 position속성을 지정하지 않은 기본적인 속성이다 1234567891011121314151617181920 div{ padding:10px; width: 500px; text-align: center; box-sizing: bo..

최근에 calc() 이라는 css 함수의 존재를 알게되었다. calc()은 이름에서도 알 수 있듯이 계산을 해주는 css함수로 자바스크립트로 css계산을 하던 것을 상당부분 대체할 수 있다 + - * / 의 사칙연산을 사용 하여 width, font-size, margin 등 px, %, em, rem, deg 등의 단위를 쓰는 영역에 모두 사용이 가능하다 유의사항은 + - 사용시에 반드시 연산자 양 옆에 공백을 주어야 한다. -사용시 공백이 없을 경우 음수값으로 처리되기 때문에 + -의 경우는 공백이 반드시 필요하다. * / 의 경우는 공백이 필수 사항은 아니지만 표현의 일관성을 위해 공백을 사용해주자 잘못된 사용 1width: calc(100%-80px);cs + - 연산자를 붙여쓰면 이미지처럼 in..

좌우로 움직이는 뱃지 애니메이션(?)딱히 뭐라고 불러야 할지 모르겠어서 이렇게 제목을 적었다 회사에서 두가지 타입의 컨텐츠를 번갈아 가면서 보여줘야하는 페이지에 사용했던 애니메이션처음에 기획을 보고 좌절했지만 기획자님이 원하는 동작을 애프터이펙트로 만들어 보여주셔서 그나마 기획에 맞게 만들 수 있었다 css를 이용해서 만들었고 active클래스를 토글하는 방식으로 애니메이션을 줬다단점은, 두가지 타입만 보여줄 수 있다는....확장이 안되는 너무 큰 단점이 ㅠㅠ 실제 사이트에선 좌우로 한번씩 이동할 때마다 예제의 텍스트 영역에 odometer.js를 사용해서 숫자를 돌리는 애니메이션이 있고, 하단에 글이 써질 때마다 알림텍스트가 아래에서 위로 flip되는 애니메이션까지 들어있다 하지만 odometer.js..

한달전쯤 설문조사 페이지 퍼블리싱을 진행했는데,기획에선 모바일 세로모드만 적용해도 좋다고 해서 가로모드는 전혀 고려하지 않고 만들었다하지만 팀장님이 가로모드에서 화면이 깨지지 않느냐 말씀하셔서 부랴부랴 가로모드 처리 방법을 찾았다 모바일 가로 화면 css를 억지로 맞추기보다 모바일 화면을 세로로 고정시키는 방법으로 하려고 했지만 스크립트를 찾아봤지만 찾지 못했다그래서 차선으로 화면을 가로로 돌렸을 땐 다른 화면을 보여주는 방법으로 수정하기로 결정. 구글링에서 찾은 코드는 함수형태가 아닌 제이쿼리 ready 안에 들어있는 스크립트였는데, 화면 방향을 전환할 땐 적용이 되었지만 가로모드에서 새로고침을 했을 땐 스크립트 적용이 안되어 함수로 만들고 ready 함수 안에도 넣어주었다 또 모바일에서만 사용해야하니..

디자인에 따라 input이나 textarea의 placeholder의 색상을 변경해줘야할 경우가 종종 생긴다기본 색상이 너무 안보인다거나 너무 진하거나 디자인과 어울리지 않거나 등 등....아래 코드처럼 css만으로도 쉽게 변경할 수 있다 브라우저별 접두어를 사용해서 각 브라우저마다 다른 색상을 적용할 수 있다(왼쪽부터 크롬-익스플로러-오페라-파이어폭스) 초보 퍼블리셔의 공부정리 블로그입니다.내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다

일하다보면 종종 사용하는 스크롤고정!! 매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다 처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서 함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다 그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다 12345678 $(document).on('click','#gnb a',function(event){ var targetHash = $(this).attr('href'); var headerHeight = $('header').outerHeight(); event.preventDef..