☼ 꿈꾸는 도전자 Felix !

1. Open source CMS System 1) CMS란 : 콘텐츠 관리 시스템 - 사용 이유 : 콘텐츠 배포 및 관리는 기본이고, 디자인 관리, 레이아웃 편집 등 사이트 부가기능이 필요하고, 검색 기능과 로그 분석이 필요하기 때문 * wix는 2.4% M/S, Cafe24는 0.1% M/S 2) 주요 CMS 종류 이름 특징 Market Share 플러그인 과금 Reference Wordpress 수천가지 테마 존재 63.4% - 과금필요 (~$250, 2019 기준) Zoom.us, 백악관, 워싱턴대, Udemy.com Drupal Wordpress보다 개발자 중심적, html, php 기반, Wordpress보다 상대적으로 디자인 적음 2.7% - 과금 필요 (~ $80, 2019 기준) Inst..

1. 시작하는 글 웹 프론트 개발에서 CSS로 왠만한 스타일링은 다 할 수 있다. HTML태그에서 CSS로 일반 스타일링을 하고, 그 밖에 클릭이나 마우스 호버 등의 이벤트를 통해서 스타일링을 할 때는 Javascript가 필요하다. 먼저 이 글에서 다룰 예정인 presudo-element 정의를 MDN을 통해 살펴보도록 하겠다. A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. -> ..

0. SVG 정의 - Scalable Vector Graphics의 약자로, 2차원 벡터 그래픽을 표현하기 위한 XML 기반 마크업 언어임 - SVG는 본질적으로 그래픽을 표현함 - 1999년 W3C의 주도하에 개발된 오픈 표준 벡터 그래픽 파일 형식임 - 즉, SVG는 점과 점사이의 계산을 통해서 그리는 그래픽임. 1. SVG 장점 - 확대해도 절대 깨지지 않고 절대 늘어나지 않음 -> 웹 그래픽의 표준 - 아이콘 이미지, 그래픽 등에 널리 쓰임 - JPG, PNG 비트맵 이미지로 사용안하고 SVG로 많이 쓰임 - 모양이 안복잡하면 파일 사이즈 작음, 모양 복잡할 수록, 그림 구성하는 포인트 많을수록 용량이 커짐, 성능도 떨어짐 -> 간단한 이미지들이 벡터그래픽인 SVG가 유리 - 비디오를 통해서만 자..

개발을 하다보면 Session에 정보를 저장이 필요할 때가 있다.이런 경우 sessionStorage를 이용하면 쉽게 해결된다. 해당방법은 javascript이용한 개발때 이용이 가능함 0. sessionStaroage, localStorage 사용이유 브라우저 탭 내 refresh내도 해당 session정보는 그대로 저장됨페이지 들어와서 정보를 일정기간 동안 가지고 싶을 때(세션이 있는 동안 가능)글 작성 중간 잃어버리지 않기 위한 임시 저장 가능방문자 이동경로 저장하였다가 이동할 때서버와 커넥션없이 저장필요할 때 1. SessionStorage 이용하기1) session에 저장sessionStorage.setItem('userName', 'felix') 2) session에서 정보 가져오기sessio..

웹개발시 사용자 국가 파악을 위해 해당브라우저의 언어를 가져오고 싶을 때가 있다.아래 방법으로 간단히 정보를 가져올 수 있다. 1. 브라우저 언어 가져오기사용자 브라우저는 다음과 같이 정보를 가져올 수 있음let userBrowserLang = navigator.language # 위의 기능은 Chrome, Sapfari, Opera는 fully지원되고 IE는 11부터, Firefox는 1부터 지원 가능그래서 IE버전 10이하는 아래로 언어정보를 가져올 수 있음 let userBrowserLang = navigator.browserLanguage# 위 IE버전이 11을 사용하면 undefined됨 2. 테스트- 아래 링크로 들어가면 W3C의 브라우저 언어 테스트도 가능하다. ( navigator.lang..

1. D3.js란?- D3.js는 Data를 기반으로 데이터와 이미지를 바인딩하는 자바스크립트 라이브러리이다. D3는 HTML, SVG, 그리고 CSS를 이용해 데이터를 시각화할 수 있도록 지원해준다.- D3의 웹 표준 강조는 강력한 시각화 구성요소와 데이터 기반 접근방식을 결합하여 독점적인 프레임워크에 자신을 묶지 않고 최신 브라우저의 모든 기능을 제공한다.D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of ..

0. 개발자와 디자이너개발자와 디자이너는 IT업계에서 중요한 역할을 하는 직군이다.개발자와 디자이너는 진정한 생산자로, 디자이너는 비쥬얼적인데 focus하고 개발자는 좀 더 기능적인데 focus하는 경향이 있다.다른 업무와 다른 성향때문에 업무가 부딪치는 경우도 많고 항상 서로 조심스러워하기도 한다.필자는 개발자와 디자이너가 같이 하는 부서에 있고, 최근 관련 세미나를 다녀온 경험으로 블로깅을 하려고 한다. 1. 0. 행사 Detail행사명 : GDG Campus 6월 Meetup : 디자이너와 개발자, 그 둘의 소통일시 : 2018년 6월 3일 일요일장소 : 마루180 지하1층 이벤트홀 아래 내용은 위 Meetup행사에서 우아한 형제의 디자이너와 Spoqa 프론트앤드 개발자의 내용을 토대로 패널들과 회..

1. 이름을 잘 짓는 규칙1) 의도를 분명히 밝혀라 ex) int d (x) int daySinceCreation; 2) 그릇된 정보를 피하라(1) 나름대로 널리 쓰이는 의미 있는 단어를 다른 의미로 사용하면 안됨ex) List는 프로그래머에게 특수한 의미다 Lixt(x) -> accountList(2) 서로 흡사한 이름을 사용 하지 않기ex) XYGControllerForEfficientHandlingOfStrings, XYZControlerForEfficientStorageOfStrings 두 단어는 너무 비슷(3) 이름 쓰는 것을 조심하기: 소문자 L이나 대문자 O 변수는 주의 - l은 1과 O,o은 0과 비슷ex) if(O ==1 ) a= 01; 3) 의미있게 구분하라ex) moneyAcoount..

1. 반응형 왜 만들어야 하나?(1) 반응형 장점: 유지보수 간편 (모든 테블릿 모바일 종류를 하나의 css에서 작업): 마케팅에도 좋음 - 기기 상관없이 최적화된 구조로 정보 전달: 미래 지향적 (어떤 화면이든 모두 대응 가능) (2) 반응형 잘 된 사례: 스키니 타이 - https://skinnyties.com/: 보스턴 글로브(신문사 사이트) - http://www.bostonglobe.com/: 조인스(국내 잡지사) - http://www.joins.com/: 한국은행 화폐박물관 - http://museum.bok.or.kr/index.do 2. 가변 그리드: 화면의 크기 상관없이 자유롭게 늘어나거나 줄어들 수 있도록 한 것# 그리드 : 격자, 눈금을 말하는데, 설계를 위한 의미로 통일 됨(가변 ..