Layer 화면 중앙정렬 방법

널리에 작성되어 있던 기존 글을 다듬어 재게시합니다. 마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는 경우가 많습니다. layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다. 그래서 어떤 경우의 수들이 있는지 정리 해보았습니다. 1. position:absolute와 margin 마이너스값을 이용한 중앙 정렬 장점 : IE7 이상 모든 더보기…

[CSS방법론] SMACSS, BEM, OOCSS

세상이 바뀌는 속도보다 약간 더 빠르게 웹은 발전하고 있습니다. 특히 그 중에서도 CSS는 기존에 경험하지 못한 속도로 다양한 부분이 변화하고 있습니다. CSS의 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라, 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. CSS 방법론의 필요성을 사내에서도 느끼고 있었고, 같은 필요성을 느끼고 있던 다른 팀원들과 더보기…

글쓴이 Jeongmin,

하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다.   요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다. 즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠. 따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다. 요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 더보기…

글쓴이 MK,

[번역] 7 Patterns to Refactor JavaScript Applications

이 글은 Michael Phillips 가 2014년 6월,  [Crush&Lovely]에  연재한  ‘자바스크립트 어플리케이션 리팩토링을 위한 7가지 패턴’에 대해  번역한 것이다.   들어가며 2012년 10월 17일, Bryan Helmkamp, Code Climate 설립자가 Ruby on Rails의 액티브 레코드 모델들(대표적인 객체 레이어들)을 리팩토링할 7개의 패턴을 요약하여 블로그 포스트를 작성했다. 여기 [Crush & Lovely]의 포스트는 모든 Rails개발자를 위해 어떻게 문제를 분리하고, 더보기…

[JSer.info#번역] 2014-01-28 자바스크립트 주요 소식

Vivaldi Techinial Preview Chromium 기반의 브라우저인 Vivaldi의 Techinial Preview 버전이 공개됐습니다. 이 브라우저는 전 Opera의 CEO인 jon Stephenson von Tetzchner가 설립한 Vivaldi Technologies에서 개발하고 있습니다. 2014년 3월경 오페라 소프트웨어에 의해 My Opera가 폐쇄 됐고 이를 탐탁치 않아 했던  jon Stephenson von Tetzchner는 My Opera를 대신할 가상 커뮤니티 사이트로써 Vivaldi를 만들었던 더보기…

글쓴이 UYEONG,

[JSer.info#번역] 2014-01-20 자바스크립트 주요 소식

TypeScript 1.4 릴리즈 TypeScript 1.4가 릴리즈 됐습니다. 이전 TypeScript and the Read to 2.0(로드맵)에 작성돼 있었던 것 처럼, Union Types, Type Aliases, Const Enums 등의 기능이 추가됐으며 ES6의 구문 지원의 개선, ES6의 코드를 출력하는 모드도 추가됐습니다. 자세한 사항은 TypeScript 1.4.1 변경 사항(일본어)을 참고해주세요. 또, TypeScript의 Compiler API에 관한 문서가 첨삭(添削)되고 더보기…

글쓴이 UYEONG,

[JSer.info#번역] 2014-01-13 자바스크립트 주요 소식

6to5 공식 홈페이지 리뉴얼 ES6의 코드를 ES5로 변환하는 도구인 6to5의 공식 홈페이지가 리뉴얼됐습니다. 또한, ES6의 코드를 변환하는 도구인 esnext의 팀이 6to5에 합류할 것으로 보입니다. 때마침 ES6로 작성한 라이브러리를 6to5를 사용해 공개하는 과정에 관한 “라이브러리를 ES6로 작성해 공개하는 것부터 시작하자(일본어)”라는 아티클도 작성했으므로 참고하여 6to5를 사용해 보면 좋을 것 같습니다.   JavaScript 더보기…

글쓴이 UYEONG,

한글에 '-thin' 폰트를 사용할 수 있을까?(모바일)

iOS에 AppleSDGothicNeo-Thin 폰트를 적용하고, 안드로이드에도 역시 얇은 폰트를 적용해 달라는 요청을 받았습니다. 해외 사이트에 나와 있는 스펙 문서를 보고 진행을 했지만 특히 안드로이드에서 한글은 스펙과 전혀 다른 길을 가고 있다는 것을 깨달았습니다. 그리고 결국 전체적인 폰트와 크기를 수정할 수 밖에 없었답니다. AppleSDGothicNeo-XXX 와 Helvetica Neue-XXX 로  iOS에서 폰트 굵기를 조절했다면, 안드로이드에서는 더보기…

[JSer.info#번역] 2014-01-06 자바스크립트 주요 소식

ESLint 0.11.0 릴리즈 JavaScript Lint 도구 ESLint 0.11.0이 릴리즈됐습니다. ES6나 JSX 등을 지원하기 위해 Esprima에서 fork한 Espree로 파서를 변경하고 있습니다. 또한, ECMAScript5가 기본 검증 설정으로 변경됐으며 설정을 package.json(Configuring ESLint)에 작성할 수 있도록 됐습니다.   browserify for webpack users 위 아티클에는 webpack의 각 기능을 Browserify에서 실현하는 방법을 비교해 소개하고 있습니다. 소개하는 더보기…

글쓴이 UYEONG,

vh 사용 예 – 네이버 증권 모바일

ios7에서 height 100% 인 딤드 팝업 먼 미래의 단위인 것 같았던 vh 를 처음 사용했습니다. 아직 안드로이드 4.3 이하에서 지원하지 않아 적극적으로 사용하기엔 조심스럽긴 합니다. 저 역시 어떤 버그나 사이드 이펙트가 있을지 두근두근했는데, 배포한지 일주일이 지난 지금까지 다행히도 아무런 이슈가 없어서 기쁜 마음에 정리해봤어요. 그리고 다시 한번 느꼈지만 ‘뷰포트의 크기를 더보기…