본문 바로가기

분류 전체보기

자바스크립트 그룹스터디 자바스크립트를 심도 있게 공부하기 위해서 그룹스터디를 만들었습니다.어제는 3주차 모임이 있던 날. 코드랩 작업실에서 모이면 좋은데, 작업실에 에어컨이 없어 찜통인 탓에 매주 카페에서 모이고 있습니다. 첫째주에는 스타벅스, 둘째주에는 ZOO카페, 이번 주에는 구봉산 위에 있는 투썸플레이스에서. 춘천 지역사회가 워낙 작다보니 이런 소모임 자체가 많지 않습니다. 그래서 모두 프로그램관련 그룹스터디는 처음 경험하는 것이죠. 당연히 아직 견고하고 체계적인 스터디 커리큘럼이 완성되지는 않았습니다. 그렇지만 지난 3주간 모임을 통해 정보를 공유하거나 토론하는 등의 시간을 갖으면서 그동안 관심갖지 않았던 더 넓은 범위에 지식과 기술에 대한 흥미를 쌓았습니다. 그동안 나온 키워드는 NPM, 형상관리(git, github.. 더보기
css만을 이용하여 보노보노 그리기 며칠전 인터넷을 돌아다니다 CSS만을 이용해서 라이언을 그려논것을봤는데요. 어제 도라에몽(?)을 보다가 문득 보노보노를 그려봐야겠다는 생각이 들어서 급하게 만들어봤습니다. 작업순서는 이렇습니다. 1. 그리고자 하는 이미지 구글링. 2. 이미지를 배경으로 깔아놓는다. 3. 눈, 코, 입등 DIV요소를 만든다. 4. 깔아놓은 배경이미지 위에 CSS를 이용해서 DIV를 디자인을 한다. 5. 재미를 위해서 간단한 애니메이션을 준다. 결과물 드랍 See the Pen BonoBono by jisungyoo (@mainplay) on CodePen. 주로 사용된 CSS설명에 대한 링크 입니다. 1. boder-radius 2, transform 3, transform-origin 4. animation 5. tra.. 더보기
프로그래스바 만들기 최근 한달간 생활코딩 자바스크립트 강의를 열심히 듣고난 뒤 습득한 내용을 어떻게 하면 소화시킬수 있을까 고민하다 간단한 예제들을 만들어 포스팅 하기로 소소한 목표를 정했습니다. 누더기 같은 코드지만 앞으로 점점 나아지길 기대하면서 소스를 드랍하겠습니다. See the Pen progress bar by jisungyoo (@mainplay) on CodePen. 사용된 주요 API 입니다. 클릭하시면 자세한 설명을 볼수 있습니다. · setInterval() · clearInterval() · click() 더보기
토글클래스를 이용한 메뉴버튼만들기 제이쿼리의 "click", "toggleclass" 메서드를 이용한 메뉴토글버튼입니다.css transform를 더하여 사용자의 재미를 추가했습니다. 간단한소스니 자세한 설명은 생략하겠습니다 :) See the Pen rLRZEo by jisungyoo (@mainplay) on CodePen. 더보기
마우스 위치를 이용한 페럴락스기법 디자인 참고를 위해서 awwward.com을 서핑하다 보면 고해상도 이미지에 페럴락스 기법을 이용한 웹사이트들을 많이 볼 수 있는데요.플랫한 디자인에 고해상도 이미지를 사용해서 사이트가 가지고 있는 스토리를 보다 직관적이고 세련되게 표현 할 수 있는 좋은 방법이라고 생각합니다. 따라서 제이쿼리 플러그인를 통해서 간단하게 페럴락스 기법을 구현하는 방법을 소개하고자 합니다. 준비물 1. 제이쿼리 2. 페럴락스 플러그인 https://github.com/stephband/jparallax 3. 열정(?) See the Pen <a href='http://codepen.io/mainplay/pen/JKVgVr/'>JKVgVr</a> .. 더보기
순수 CSS만으로 모달 윈도우(팝업 레이어) 만들기 CSS만으로 팝업 레이어(Modal WIndow)를 만드는 방법입니다. See the Pen Pure CSS, Simple Modal Window by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 원리 간단설명1. checkbox input 을 하나 만들고 그 바로 뒤에 모달 레이어로 사용할 div를 디자인합니다. 체크박스 input은 사용자에게 보이질 부분이 아니라, 브라우저가 modal 레이어를 선택하는 기능적 역할만 수행할 것이기 때문에 display:none; 등 으로 안보이도록 가립니다. 2. 모달 div는 기본 상태가 보이지 않는 상태로 설정해놓습니다. display:none; 이라든지 visibility: hidd.. 더보기
순수 CSS만으로 리스트/웹진 보기 방식 전환 스위치 만들기 See the Pen Pure CSS, "List/Grid" view mode switch by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. CSS만으로 목록의 뷰타입을 바꾸는 예제입니다. 세부적으로 디자인하면 더 구체적인 부분까지 디테일하게 바꿀 수 있습니다.며칠전에 올린 순수 CSS만으로 아코디언 탭 메뉴 구현하기와 같은 원리로 작동합니다. Input 라디오를 이용해 그 뒤에오는 요소들을 컨트롤 하는 것이죠. 형제 선택자 ~ 를 사용했습니다. 작성하다가 괜히 욕심히 내서 애니메이션 효과 등을 넣느라고 괜히 CSS가 길고 복잡해보이는데, 사실 애니메이션 부분만 제외하면 아주 간단한 코드입니다. CSS에 주석을 달아놨으니 공부.. 더보기
순수 CSS만으로 아코디언 탭 메뉴 구현하기 See the Pen Pure CSS, Horizontal Arccodion by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 순수 CSS만을 활용하여 아코디언 메뉴(펼침 텝메뉴) 만들기. * 원리 설명 1. 같은 name으로 묶인 radio 타입의 input은 그 인풋들 중 단 하나만 체크되는 원리를 이용합니다. 2. input 이 체크 되었는지 여부를 확인하여 선택할 수 있는 CSS 가상선택자 :checked 를 사용해 어떤 input이 체크 되었는지 확인합니다. 3. 만약 어떤 input에 체크되었다면 동등한 깊이(depth)의 엘리먼트. 즉, 형제격이면서 인접한 엘리먼트를 선택할 수 있는 선택자 + 를 사용하여 형제이면.. 더보기
안쓰는 하드디스크를 외장하드로 바꿔보자 지난 포스팅 [2016/03/04 - [아카이브/ETC] - 노트북 하드디스크 교체기]이란 내용을 가지고 포스팅을 했었는데요. 그덕에 하드디스크가 하나 놀게 되었는데 이놈을 어떻게 쓸까 고민하다, 아버지가 평소에 티비를 자주 보시기 때문에 티비에 연결하여 영화를 보여드리면 좋겠다는 생각이 들어 하드디스크 usb 젠더를 찾아 보던 중, 컴퓨터가게 사장님이 외장하드 케이스를 추천해주셔서 고민하지 않고 구매했습니다.내용구성품은 사용설명서 및 cd 본체 및 ubs케이블, ubs확장케이블, 그리고 휴대성을 고려한 파우치까지 생각보다 구성품이 알차게 들어있어서 매우 만족스러웠습니다. 조립완료 후 티비에 연결하여 테스트해봤는데 아주 잘 됩니다. 마지막으로 아버지께 영화보는 방법만 가르쳐 드리면 되겠네요. 더보기
노트북 하드디스크 교체기 저한테는 3~4년 정도 함께 지내온 노트북이 있습니다.맨처음 박스를 개봉하고 부팅했을 때의 녀석의 퍼포먼스는 그야말로 감동...... 그러나 지금은 부팅조차 힘겨워 하는 녀석을 보면서 하드디스크를 바꿔주기로 결심했습니다. 우선 조여있는 나사를 풀고 최대한 녀석이 다치지 않게 조심스럽게 덮개를 벗겨냅니다. 그럼 아래와 같이 노트북의 내부를 보실 수 있을겁니다. 처음 노트북 내부를 보는거라 뭐가 뭔지 잘 모르겠었지만 크기나 모양으로 봐서는 저 은박지에 싸여 있는게 하드디스크라고 생각이 들어 나사를 천천히 풀어서 분해를 시작했습니다. 조심스럽게 은박을 벗겨내고 케이블을 분리하니 하드디스크를 발견할 수 있었습니다. HDD 500GB 입니다. 부팅은 SSD로 저장은 HDD를 쓰는 하이브리드 하드디스크라고 구매할때.. 더보기