Hello,

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

웹 프로그래밍/공부일지 48

웹 프로그래밍/공부일지
[웹 기획 1편] 기능 정의서 만들기

최근 간단한 페이지도 웹 기획이 중요함을 깨닫고... 회사가 기획자를 뽑을 상황도 아니고 뽑을 생각도 없구... 하지만 웹을 만드는 내 입장에선 기획 없이 하는게 너무나도 힘들어서 회사에서 웹기획 책을 하나 몰래 가져왔다 ^-^; 👍 그리고 나에게 필요했던 기능 정의서와 정책 정의서를 내가 직접 공부해서 만들고 계획을 세우리라 다짐을 하며 포스팅을 한다. 1편에서는 기능 정의서에 대해 알아보려고한다. 항상 그렇듯 책을 처음 읽으면서 정리해 나가는거라 미흡하거나 잘못된 부분이 있으면 댓글로..😚 1. 기능 코드 : 기능별로 코드 이름을 부여하여 문서로 의사소통할때 편리하다. 살펴보니 나름의 규칙이 있었다. ( 프로젝트이름 - 이용자(front)/관리자(back)화면 - 메뉴이름 - 번호 ) 2. 뎁스 : ..

2019.07.12 ﹒ 23:22
웹 프로그래밍/공부일지
[ JS ] 무한 스크롤 만들기 ( div 태그 )

무한 스크롤을 검색 하니 대부분 전체 창에 대한 무한 스크롤 형식이 나와서 다음에 언젠간 또 검색하면서 찾을 태그의 무한 스크롤이니 포스팅으로 남겨 놓으려고 한다 ㅎㅎ... 회사 사수분이 사용하셨던 코드를 분석해보았다 :) // scroll $("#scroll_tag").scroll(function() { // 페이징을 위한 변수 ( *무시 해도 되는 부분 ) var page = $("[name='feed_page']").val(); var last_page = $("[name='feed_last_page']").val(); if(page == last_page) return; var innerHeight = $(this).innerHeight(); var scroll=$(this).scrollTop()..

2019.04.22 ﹒ 22:10
웹 프로그래밍/공부일지
[HTML / CSS ] 단계를 나타내는 디자인 퍼블리싱

제목을 정하기 너무 힘든 포스팅이었습니다..오늘 하려는 포스팅은 단계 디자인을 퍼블리싱 해보려고합니다. 그림으로 설명하자면 출처 : 쏘카 사이트 이러한 단계를 나타내는 디자인입니다. 배워보니 이것도 하는 방법이 있더라구요 ! 우선 뼈대 (html)을 먼저 만든 후에 스타일 작업으로 넘어가겠습니다.12345678910111213141516171819202122232425262728293031 쏘카 이용방법 가입하기 앱 또는 홈페이지에서 운전면허증과 결제 카드만 등록하시면 쉽고 빠르게 가입하실 수 있어요. 예약하기 출발·반납 위치를 선택하고, 원하는 시간 만큼, 지금 필요한 차종으로 예약하세요. 차량찾기 앱의 스마트키에서 대여존 주소를 확인할 수 있으며 경적, 비상 등을 이용해 차량 위치를 확인하세요. 차량..

2018.12.01 ﹒ 10:36
웹 프로그래밍/공부일지
자바스크립트 클래스 패턴 ( 오브젝트 리터럴, 함수형, 프로토타입 방식 )

제목에서도 적어 놨듯이 자바스크립트에서 클래스 패턴을 크게 3가지 알아 보려고한다!처음 디자인 패턴을 볼 때 인터넷에 있는 글을 프린트 해서 읽었었는데..정말 하나도 이해 못했었다...두번째 시도로 책을 읽고 공부한 것을 바탕으로 글을 쓰려고한다. 클래스 만드는 방법은 크게 오브젝트 리터럴 방식, 함수형 방식, 프로토타입 방식으로 총 3가지로 설명한다. 첫번째로 오브젝트 리터럴 방식부터 소개하겠다. 12345678var 인스터스 = { 프로퍼티: 초깃값, 메서드: function(){ }}cs 리터럴 방식은 객체 리터럴의 의미하는 { } 내부에 프로퍼티와 메서드를 정의하는 구조다.변수나 메서드를 만들때 ' : '을 사용하며 끝에는 세미콜론이 아닌 콤마( , )로 구분하니 주의 해야한다.리터럴 방식은 클래..

2018.10.16 ﹒ 12:14
웹 프로그래밍/공부일지
웹 페이지의 랜더링 과정 2편

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..

2018.09.25 ﹒ 12:06
웹 프로그래밍/공부일지
웹 페이지의 랜더링 과정 1편

참고 블로그 : http://12bme.tistory.com/140 참고 블로그에 워낙 잘 설명되어 있어서 따라 포스팅을 쓰지 말까 하다가 그래도 내가 정리한 글이 더 기억에 남기에 글로 써본다. 🙏 우선 렌더링이란, 사전에서는 아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도 라고 설명하고, 블로그에서는 "논리적인 문서의 표현식을 그래픽 표현식으로 변형 시키는 과정" 이라고 되어있다. 뭔가 딱딱한 문장에 처음엔 음..? 하다가 그냥 내가 생각해서 쉽게 풀어서 설명하자면html, css등 글로 ( 코드로 ) 적어 논 것이 웹 사이트에 나타나게 되는 과정이다. 렌더링은 총 5단계 로 이루어 진다.( + html을 ..

2018.09.23 ﹒ 19:18
웹 프로그래밍/공부일지
캐러셀 ( carousel ) 만들기 / 반응형 슬라이드 만들기

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기[Web Programming] - [ jQuery ] 슬라이드 배너 만들기 2편 이전에는 플러그인을 써서 만들어봤다면드디어 슬라이드(캐러셀)를 만들어봤다. 내가 생각한 알고리즘은 아래와 같다. 처음 슬라이드에서는 0번째 친구만 보여지고 나머지 친구들은 1번다음에 쌓여서 대기하고있다.그다음 슬라이드가 왼쪽으로 이동하는데 현재 인덱스와 ( 0 ) 그다음 나타날 인덱스 ( 1 )이 왼쪽으로 이동한다.그리고 나서 지나간 0번의 친구가 다시 대기 중인 영역에 와서 기다리고있는 것! Colored by Color Scriptercshtml은 위와 같이 간단하다, bxSlider을 참고로 div안에 목록태그를 사용해서 틀을..

2018.09.19 ﹒ 17:51
웹 프로그래밍/공부일지
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