Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

전체 글 149

게임 리뷰/One hour one life
[ One Hour One Life ( 원아월 원라이프 ) ] 스프 만들기 🍲

오랜만에 원라이프 공략(?)을 써본다.예전에는 남자친구가 알려주었지만 이젠 나도 중수정도 된다 😚대도시에서 스프 만드는걸 캡쳐해 왔다.(*도구가 모두 갖춰진 곳에서 스프를 만들었으므로 도구 만드는 방법은 없음😓*)...처음 보면 엄청 복잡게 느껴지지만 3번만 하면 마스터 한다...!우선 대도시에서라고 칭한 이유는 도끼가 있어야 하기 때문에...도구로는 그릇, 접시, 큰 통, 도끼와 작물은 호박, 콩, 옥수수🌽가 필요하다.당연히 호박, 콩, 옥수수는 키워 놓은 상태! 첫번째로 호박을 먼저 넣어야한다.캡쳐본이 없지만 다 키운 호박을 뾰족돌로 클릭하면 호박이 '둥!'하고 나올것이다.자른 호박을 우리는 접시 위에 올려한다.그다음 도끼로 호박을 찍어버리면이렇게 세모난 호박이 되어 버린다.이친구를 들고 큰통안에 넣..

2018.08.31 ﹒ 17:39
웹 프로그래밍
[웹 디자인] 디자인의 종류들을 알아보자.

어제 웹 프론트앤드의 책을 사서 읽기 시작했는데 역시 책에는 많은 소중한 정보들이 있다.. 짜릿해..😚 책 초반에 많은 디자인 종류들이 나오는데 유용한것 같아 정리해보려고 한다...첫번째, 플랫(Flat) 디자인.영어 뜻 그래도 '평평'하고 '납작'한 디자인 이다.위쪽에 있는 디자인을 말한다. 아마 흔히 볼수있는 디자인이다!(부트스트랩에서도 이런 플랫 디자인으로 버튼이 나오구..!) 두번째, 카드형 디자인. (Card-Based Design)https://www.pinterest.co.kr/종종 사용하는 사이트인데 카드형으로 이루어져 있다. 여러 콘텐츠를 목록처럼 나열하는 페이지에 적합하다. 세번째, 그리드 레이아웃.반응형 웹을 공부하면서 기본적으로 나오던 현재 가장 많이 사용하는 레이아웃 아닐까한다!요..

2018.08.31 ﹒ 10:19
웹 프로그래밍
반응형 웹의 짝꿍 플렉서블 박스(Flexible Box)에 대해 알아보자

자바 스크립트와 jQuery와 함께 반응형 웹에 대해서도 책으로 공부하고 있다 XD 그중에서 반응형 웹과 환상의 콤비라고 불리는 플렉서블 박스(Flexible Box)에 대해 공부해봤다. 유독 어렵게 느껴지는 친구였다..😒 ▼ 책의 예제로 연습한 친구 움짤로 준비하진 못했지만 당연히 반응형...( 당연히 가로길이 %..! ) 우선 개념을 간단히 살펴 보면 부모 박스 = 플렉서블 박스, 플렉서블 박스의 자식 박스 = 플렉스 아이템 이라고 불리게 된다. 그리고 아이템의 배치 방향에 따라 주축이 결정 되며 ( 가로 주축. 세로 주축 ) 주축에 교차하는 축을 교차축이라고 말합니다. ( 주죽이 가로라면 교차축은 세로 ! ) +) 플렉서블 박스 기술 개발은 현재 진행형 입니다 :) 호환이 안되는 브라우저가 있을 수..

2018.08.29 ﹒ 18:00
웹 프로그래밍
[ jQuery ] 슬라이드 배너 만들기 2편

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 이전 슬라이드 배너에서는 플러그인을 사용했었는데 사용하다보니 문제점이 하나 있었다! 반응형이 안되던것... 처음 웹 브라우저의 크기를 인식해서 되는 것 같았다. 😓그래서 책을 보고 우선 반응형으로 만들어보고 슬라이드 애니메이션을 추가해 보았다. ① 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환② 전환 시간 설정 가능③ 이미지 무한 롤링④ 함수 활용 html + css 부분123456789101112131415161718192021222324252627282930313233343536373839 banner body{ margin: 0px; } #banner{ width: 100%; height..

2018.08.28 ﹒ 11:48
웹 프로그래밍
[jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기

참고 블로그배너 : http://two-leaves.tistory.com/entry/간단한-슬라이드-배너만들기 메뉴바 : http://webdir.tistory.com/481 위는 완성한 결과물이다! 😆배너는 일정 시간마다 자동으로 넘어 가게끔 슬라이드 효과를 나태냈고상단 맨위 두번째 메뉴부분을 스크롤을 인식해서 일정 부분을 위로 스크롤시 나타나고아래로 스크롤시 사라지게 나타냈다. html과 css는 가볍게 훑어본 뒤 jQuery부분을 중점으로 다루겠다. 12345678910111213141516171819202122232425262728293031323334353637 Music Player Music Award Album Music Colored by Color Scriptercs html 부분은 다..

2018.08.02 ﹒ 12:21
웹 프로그래밍/공부일지
Input 태그 애니메이션 분석 편

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !인터넷엔 많은 정보가 있다 ㅎ3ㅎ원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚 첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.참고 : https://codepen.io/andreasstorm/pen/gKGbxo webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD 위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.box-sizing: border-box;해당 속성을 지정하면 해..

2018.07.16 ﹒ 23:13
웹 프로그래밍
jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏

이번에는 mouseover과 mouseenter의 차이점에 대해 기록하려 한다 :)mouseover / mouseout 과 mouseenter / mouseleave 은 둘다 동일하게마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 하지만 mouseover은 만약 내부에 자식 노드가 있을 경우 자식 노드에서도 동일하게 이벤트가 발생한다.즉, 자식노드를 독립적인 노드로 처리 해버린다.반대로 mouseenter은 내부 자식 노드를 부모 노드의 일부분으로 처리 함으로써 자식 노드에서 이벤트가 발생하지 않는다. 12345678910111213141516171819202122232425262728293031323334353637 var count = 0; var $info = null; $..

2018.07.13 ﹒ 10:19
웹 프로그래밍
jQuery 이벤트에 대해 알아보기 😉

jQuery 이벤트를 공부하다 세부적으로 돌아가는 부분에 대해 정리해보고자 한다 ! 우선 "이벤트"라고 하면 이름만 들어도 감이 올 듯한데 책에서는 일종의 "알림 기능"이라 설명하고 있다.이벤트 종류로는 크게 마우스 이벤트, 키보드 이벤트, 태그요소 고유 이벤트, 사용자 정의 이벤트 이렇게 4종류로 나뉜다.*태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트(ex. img 태그 요소 경우 이미지가 모두 로드 될 시 load 이벤트 발생 ) 그리고 가장 중요한 이벤트 단계에 대해 자세히 알아보자. 책의 그림이 명확히 이해되도록 되어있어 첨부하고 싶은데 스캔할 수가 없다...😥 1단계 "캡쳐 단계"는 가장 먼저 실행 되는 이벤트 단계로써, 흐름은 가장 최상위 노드(document)부터 순서대로 htm..

2018.07.11 ﹒ 17:26
웹 프로그래밍
[ jQuery ] 미션 ( 물고기 움직이기 + 랜덤 스타일 적용하기 )

물고기 움직이기버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 button{ margin: 10px; } .panel{ width: 600px; height: 400px; border: 1px solid #999; position: relative; background-color: blue; margin: 10px; } #fish{ position: absolute; left: 250px; top: 150px; } window.onload = function(..

2018.07.10 ﹒ 15:45
웹 프로그래밍
jQuery div태그 동적 로딩 위한 스크롤 마지막 체크하기

동적 로딩을 할려면 스크롤의 하단 부분을 체크할 수 있어야 하기에 ! 아래부분 인식부터 해보자사실 구글에 검색하면 바로 나오는 간단한 (?) 조건문이지만한번도 제대로된 설명을 보지 못했고 정확하지 않은 부분을 발견해서 포스팅하게 되었다. 😖 HTML 부분을 참고하고자 첨부한 사진이다.크게 볼 건 없지만 혹시나 자바스크립트 삐약이인 나같은 사람들을 위해.. 햇갈리지 말라고 올려본다! 👍( 화질이 왜이렇게 안좋지..? ) 123456 /** list부분을 스크롤시 발생하는 함수 **/ $("#list").scroll(function(){ if ($(this)[0].scrollHeight - Math.round($(this).scrollTop()) == $(this).outerHeight()){ alert('..

2018.06.05 ﹒ 22:34