nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/etc.

iTerm, Zsh, Oh my Zsh 설치하기 - CLI를 제공하는 프로그램을 쉘(Shell)이라고 한다.- 맥에서는 기본으로 터미널(terminal) + 배쉬 셀(bash shell)을 제공하지만 안 예쁨 (검은 건 바탕이요 흰 건 글자니라) [1] iTerm2 설치- 터미널을 대체해준다.1) https://www.iterm2.com/ 사용자 및 그룹 > 자물쇠 해제 > 사용자 우클릭 후 고급 옵션 > 로그인 쉘 에 들어가서 zsh로 경로를 바꿔준다. (경로는 $ which zsh 명령어의 출력값이다) 6. 재시작 후 설정을 요구하는 화면이 나오면 0을 눌러 ./zshrc가 생성되도록 한다. [3] Oh my zsh 설치 1) 아래 명령어로 붙여넣어 설치해준다.sh -c "$(curl -fsSL ht..

2019. 3. 7.

Blog/JavaScript

Day 10의 [Hold Shift and Check Checkboxes]입니다. 다중 선택가능한 체크박스를 만드는 내용인데,생각보다 어려웠어요 (´;∧;`) 더 열심히 해야지 하는 다짐과 함께 글 정리 시작합니다. 하다보면 이것도 익숙해지겠죠! ヽ(〃･ω･)ﾉ 랄라 1. 마크업 및 셀렉팅 우선 마크업부터 진행합니다. 강의에서는 checkbox로 했었는데, 여기선 편의상 button으로 진행합니다. 11111111111111 2222222222222 333333333333333 444444444444 555555555555555 6666666666666 77777777777777 이후 스크립트를 작성합시다. 우선 버튼들을 querySelectorAll()로 셀렉팅해서 가져온 뒤, 클릭 이벤트를 걸어줍니다..

2019. 2. 27.

Blog/JavaScript

🔥Javascript 30 - Day 09🔥Day 9에 해당하는 [14 Must Know Dev Tools Tricks]를 배워볼 차례입니다. 1. DOM Breakpoints 개발자 도구 Elements 탭에서, 특정 엘리먼트를 선택하고 우클릭 후 Break on...을 눌러 중단점을 확인할 수 있습니다. Attributes Modifications를 선택한 상태에서 h1을 클릭하면, 아래 이미지처럼 중단점이 표시됩니다. 재생버튼처럼 생긴 걸 누르면 차례로 중단점이 나타나죠. Subtree Modifications 자식 요소가 추가, 삭제, 변경됐을 경우 break 합니다. Attributes Modifications 요소의 속성이 바뀐 경우 break 합니다. Node Removal 요소가 완전히 사..

2019. 2. 17.

Blog/JavaScript

Javascript 30의 Day 8입니다. 오늘은 Canvas를 다뤄볼 차례입니다(두근두근) 예전에 잠깐 캔버스에 대해 네이버 포스팅을 한 적이 있긴 한데, 저도 다 까먹었네요 허허허. 일부 내용은 그대로 가져왔습니다. 아무튼 시작해보죠!╰(✧∇✧╰) 1. 캔버스 만들기 아묻따 캔버스를 html에 마크업합니다. canvas요소는 id값과 width, height 속성을 갖습니다. 저 너비와 높이값은 선택사항이며, 기본값은 300*150이라고 합니다. IE9 이하 브라우저라면 대체 컨텐츠가 필요하며, 닫는 태그를 잊지 않도록 합시다. 자, 캔버스에 그림을 그리려면 일단 자바스크립트를 써야합니다. 캔버스 요소 아래에 스크립트를 작성합니다. canva에 id값을 넣어준 이유는 이렇게 스크립트에서 캔버스를 참..

2019. 2. 15.

Blog/Design

[모작] [원본] 배운 점 - 하늘색과 초록색을 잘 조합하면 깔끔한 느낌을 줄 수 있다. - 대충 그린 듯한 팝한 느낌이 사실은 참 어렵구나.... 왜 내 말풍선은 꼬부랑거리지? - 본문이 가운데 정렬로 되어있는데, 양옆에 장식을 추가해서 안정적 느낌을 주고 있다. - 폰트 굵기가 달라서 그런지 말풍선이 좀 날아가는 느낌이다;ㅁ; 자간조절로 강조를 주는 편이 좋았으려나? - 간단한 듯하지만 안정적이고 꽉 차 보이는 요 디자인이 참 좋다.

2019. 2. 13.

Blog/Design

[모작] [원본] 배운 점 - 보색대비를 쓰면 눈에 확 들어온다(보라색+노란색 조합) - 강조할 제목에는 은은한 그라디언트+약한 그림자를 넣는 방법도 있다. - 그림자를 두 겹 넣은 게 너무 멋져.....*_* 나중에 저런 느낌으로 그림자를 활용해보고 싶다. - 전체적으로 꽉찬 느낌이 좋다ㅎㅎ 텍스트가 세모꼴로 배치되어 있어서 하부에 중심이 가기 때문에 안정적으로 느껴진다. 대신 제목을 큼직하게 강조하고 파티클 효과를 넣어 상단에도 균형감을 주는 듯.

2019. 2. 12.

Blog/JavaScript

Javascript30 강의 중 Day 07에 해당하는 Array Cardio 2 입니다 :> Array.prototype.some() MDN에 따르면, some() 메서드는 배열 안의 어떤 요소가 주어진 판별 함수를 통과하는지 테스트한다고 합니다. (ES6 이상) 더 쉽게 풀어쓰면, some() 메서드는 콜백함수를 인자로 받아서, 배열 내 각 요소에게 한 번씩 그 콜백함수를 실행합니다. 이때 해당하는 요소를 발견하면 true를 반환하고, 모든 요소에게 함수를 실행했지만 해당하는 요소가 없다면 false를 반환합니다. 백문이 불여일견, 예제를 살펴보죠! 아래 코드는 배열 내에 10 이상인 숫자가 있는지 판단합니다. function isBiggerThan10(elem){ return elem > 10; }..

2019. 2. 11.