내가 한번 추천해보는 웹 개발자를 위한 Visual Studio 확장 모음

페북 그룹에 Visual Studio 웹 개발자 추천 확장 모음 링크를 올렸길래 나도 올려본다. 여기에 기재된 확장 도구를 포함하여 내가 쓰고 왜 쓰는지 알리고자 글을 쓴다.
내가 설치한 확장 목록을 이름순으로 볼 수 있다보니 알파벳별로 정렬하는 점 양해 바란다.
아, MS에서 만든 확장은 제외다.

Code Alignment

이름만 봐도 눈치챈 사람도 있을 것이다. 말로 하긴 힘드니 아래 코드로 뭔 프로그램인지 알려주겠다.

    person.HomeTown = "Brisbane"; 
    person.FirstName = "Chris";                
    person.Surname = "McGrath";                
    person.Age = 24;                           
    person.Occupation = "Software Developer";  

=>  person.HomeTown   = "Brisbane";
=>  person.FirstName  = "Chris"; 
=>  person.Surname    = "McGrath"; 
=>  person.Age        = 24; 
=>  person.Occupation = "Software Developer"; 

올드비 개발자들(특히 C/C++ 개발자)에게 단비같은 확장도구인 데다가 무료이다. 도네이션웨어라는 점.
더이상 설명이 필요있나?

ColorSchemeSelector

ColorSchemeSelector

그저 단순한 색상 추출 도구라면 내가 블로그 보다 말았고 그냥 넘어갔겠지만, 이녀석은 그저 단순한 색상 추출기를 뛰어넘어 색상 혼합별로 색상을 추천받아 추출할 수 있다는 점에서 특히 웹 개발자와 디자이너에게 좋은 도구가 될 것이다.
아, 물론 무료다.

Git Diff Margin

Git Diff Margin

Git로 버전관리를 한다면 해당 줄에 바뀐 점을 이렇게 실시간으로 표현해준다는 점이 되겠다. 자주 바뀌는 일이 많은 버전관리 개발자라면 유용할 것이다.
이 확장 또한 링크된 블로그에 소개되어 있으며, 무료이다.

Grunt Launcher

프론트엔드 개발자라면 반드시 한번씩은 들었을 Grunt. 패키징 자동화로 유명한 Grunt와 스케줄별 자동화를 지원하는 Gulp, 프론트엔드의 패키지 매니저인 Bower 명령어까지 지원해준다.
나처럼 node.js를 수동으로 포터블로 설치한 환경이라면 사용 시 세팅에 유의하라.
무료라고. 소개됐다고.

Image Optimizer

프론트 엔드를 위한 확장이 여기 하나 또있다. Visual Studio 자체 지원 이미지 최적화 도구가 있다면 믿겠는가?
같은 이미지에서 이미지 사이즈를 줄여주는데, 자세한 내용은 이미지 최적화 기법 구글 검색 ㄱㄱ.
이미 node.js 등으로 이미지 최적화 확장이 있다면 비교해달라. 난 아직 비교 안해봤다.
무료다.

Mexedge Stylesheet Extension

간단하게 말하면, 스타일시트 소스를 트리구조로 시각화하는 도구다. 프론트엔드 개발자에게는 상당히 편리한 도구다.
확장 링크로 들어가서 스샷을 보면, 그저 단순한 그런 도구가 아니다. 심지어는 파일 내 클래스 목록처럼 표시까지 해준다.
블로그에서도 소개되어 있다. 3명이 기업 운영하고 있는 것으로 보이긴 한데 일단 무료니 그냥 써 주자.

MixEdit

지금 소개하는 확장은 내가 블로그에서도 소개한 바 있으며, 유일하게 무료가 아닌 평가판 확장이다.
Sublime Text를 접하다가 Visual Studio로 개발하다보면 답답하지 않는가? 멀티커서와 멀티셀렉트가 지원되는 확장, 변수를 한꺼번에 바꿀 수 있다면 얼마나 좋을까?
그런 목마름을 Visual Studio에서도 적셔주는 그런 확장 되시겠다.
평가판이긴 하지만 사용기능과 기간에 제한은 없다. 단지, Visual Studio 실행 후 처음 MixEdit 기능을 수행 시 구매 권유 창이 뜰 뿐이다.

Suggested Extensions

얜 좀 재밌는 확장이다. 블로그에 소개되긴 했는데 댓글에 소개된 확장인데, 파일 확장자별로 사용할 수 있는 Visual Studio 확장을 소개시켜주는 확장 되시겠다.
예를 들면 yaml 같은 파일들. IntelliJ IDEA 같은 개발 툴 쓴 사람은 알겠지만 JetBrains 에서는 확장자별로 지가 확장 추천을 해준다. 그런 비슷한 거다.
무료다.

Web Essentials 2015

만약 웹 개발자인 당신이 Visual Studio를 쓰고 있을 때, 이 확장을 쓰고 있다면 이 확장 제작자에게 큰 절을 해야 한다. 블로그에서도 소개도니 웹 개발자 필수 확장!
웹 개발에 모든 것을 제공해주는 확장이다. CSS, HTML, JS 편집에 날개를 달아주며, CoffeeScript, LESS, Sass 같은 확장 언어 편집과 Grunt, npm, bower 등의 설정 편집에 유용한 도구를 제공하는 웹 개발 만능 확장이다.

Visual Studio 2015 사용자에게 주의점은 소스 파일을 Minify하거나 Bundling으로 합치거나, Sass 및 LESS 컴파일 기능을 따로 확장으로 뺐다는 점에 유의해야 한다. 없다고 해매지 말고 내가 링크 소개할 테니 다운 받아라. 이 확장도 무료고 아래 확장도 무료다. 저거 제작자 만나면 반드시 큰 절 해라.

Bundler & Minifier
Web Compiler

나는 여기까지 추천 확장 목록으로 썼다.
여러분의 추천 확장이 있다면, 서슴없이 공유하여 서로 즐거운 개발 세상을 만들어가는 주역이 되길 바란다.
싫어? 싫음 시집가.
끗.

composite / 2015년 9월 9일 / Piss Development / 0 Comments

웹 개발자 도구의 역사

웹디자인의 역사는 뭐 웹디자인 관련 블로그만 검색해도 질리게 나온다.

하지만 웹 디자인을 발전시키게 해준 초석인 웹 개발자 환경의 역사는 구글링을 해봐도 잘 안나왔다.

이 얼마나 슬픈 일인가 개발자들이여!

그래서 내가 정리해준다.

1. 넷스케이프에도 개발자 도구는 있었다.

이 글 보는사람들 중 넷스케이프에 신경쓴 개발자가 몇 있을지는 나도 모르겠지만, 때는 1998년이다.

솔직히 넷스케이프 시절에 필자는 초딩이였다. 그때는 모뎀 인터넷 시절이었고, 인터넷이 종량제이며, 인터넷을 할려면 전화를 못받는다는 단점 때문에 상당히 제한적이었지만, 그래도 나름 문화컬쳐였다. 

그런 초딩 시절에 넷스케이프 4 에 자바스크립트 디버거가 있었는데, John Bandhauer 가 개발한 자바스크립트 디버거는 그때당시 자바스크립트는 그저 옵션에 불과했지만, 자바스크립트 개발하는데 있어서 생산성을 촉진시킨 하나의 유물인 것은 확실하다.


2. Venkman Javascript Debugger.

Venkman Debugger

이 기술을 넷스케이프가 모질라로 올인하면서 디버깅 기술까지 전수받았는데, 2001년 출시한 모질라 기반 자바스크립트 디버거를 Venkman Javascript Debugger 라 불렀다.

이녀석의 강점은 모질라 기반임에도 불구하고 크로스 플랫폼에서도 디버깅 환경을 제공하고자 하는 노력이었다,

그래서 Ajax 가 뜰 때 당시에 이 역사가 재조명되었지만, 다른 개발자 도구가 워낙에 좋아서 거기서 그치는 비운의 도구였다.

debugger; 키워드를 ECMA 표준으로 등재시킨 툴이였고, 별도의 프로세스로 돌아갔어도 불여우가 역시 개발자를 위한 브라우저구나 하는 무릎 탁 치게 하는 기원이였다고 해도 과언이 아니었다.

자세한 내용은 링크를 참고하라. : https://developer.mozilla.org/ko/docs/Venkman

3. DOM 시각화.

당신의 웹 어플리케이션에 동적으로 컨텐츠를 넣었다가 갑자기 레이아웃이 깨졌다면, 어떻게 모니터링하고 대처했을까?

분명 테이블이 잘 만들어진것 같은데 테이블이 무너져 보인다면, 소스를 다시 보면서 캐치해야 하니..

하지만 기존 웹브라우저는 잡아내는 방법이 너무나 제한적이었다. 소스 보기를 해도 원 소스를 보여주지 동적으로 추가된 곳까지 신경써주지는 않았으니까. 어찌나 불편했을까? 뭐.. 한국은 액티브엑스가 동적 컨텐츠를 제공하는데 아주 잘 활용해서 말이 통할려나 모르겠지만.

이것을 해냈다. 해냈어. 불여우가해냈어!

View Source Chart

DOM Inspector. 우리말로는 DOM 검사기.

DOM 검사기는 DOM 구조를 트리 구조로 시각화해서 눈으로 보여주는 아주 획기적인 도구였다.

이 도구 덕분에 테이블 등에 엉뚱한 태그가 들어가서 테이블 구조가 깨지는 문제를 손쉽게 해결할 수 있었고,

동적으로 컨텐츠가 들어갔어도 바로 볼 수 있었다.

XML에 비해 HTML은 엄격하지 않아서 물론 잘못 코딩해도 보이긴 하지만, 레이아웃 깨졌거나 뭐 엉뚱한 글자가 페이지여 보여서 컴플레인 들어오면 이젠 두렵지 않은 도구가 되었다.

하지만 한국은 이때도 액티브엑스 전성기라서 우리나라 웹 페이지는 저 구조에 크게 신경쓰지 않았거나,

테이블 기반 구조로 저게 필요한 상황을 만들었음에도 깨지기만 하면 정말 고치기 힘든 웹 사이트 구조를 만들어냈다.

그래도 저게 있어서 한국의 지랄같이 테이블 의존성 구조에서 어느정도 벗어날 수 있었지만, 그 은혜를 모른다.

정말 테이블 태그로 만든 레이아웃은 미관엔 좋았지만.. 개발과 유지보수가 어려운 단점은 피할 수 없었다.

그게 왜냐면, 디자이너들이 나모 웹에디터같은 위지윅 개발도구에 의지하고, 개발자조차도 거기에 의지한 탓이다.

그나마 테이블은 미리보기에도 그대로 볼 수 있었기 때문이었고, CSS 표현력이 제한적이라서 div 기반의 레이아웃에서 잘 보여준다는 보장이 없었으니까.

그래서 이때 웹 개발 비용이 부담된건 사실이다. 아무리 편해도 그게 한계가 있다는 것을 여실히 보여준 트랜드였던 것이다.

쪽팔리게 개발자가 나모웹에디터나 쓰고.. 으이구..

이제 Ajax 이후 하드코딩의 시대가 도래했는데, 이 DOM 검사기 도구는 하늘이 내려준 선물임은 확실하다.

4. Web Developer for Firefox.

불여우가 왜 웹 개발자를 위한 브라우저인지 다시한번 마음에 새기는 혁신(?)이 왔는데, 

하나의 작은 툴바에서부터 시작됐다. Chris Pederick 이 만든 Web Devloper toolbar 였는데, 웹 개발자를 위한 편의성 도구들을 제공하여 웹 개발에 도움을 주게 만든 일등공신이었다.

이 툴바의 강점은 Disable CSS와 Disable Javascript 기능인데, 이는 크로스 플랫폼, 크로스 브라우징 보기, 그리고 CSS가 적용되지 않은 경우와, 자바스크립트가 비활성화된 브라우저의 경우, 그리고 시맨틱과 웹 접근성 개발에 도움을 주는 기능들이 한자리에 모여서 웹 개발자들에게는 없어서는 안될 도구로 성장했다.

2003년 첫 릴리즈 이후 계속 버전업 해가면서 기능과 성능 최적화가 되고, 처음엔 미약했지만 끝은 비대한 웹개발자에겐 모르면 간첩인 도구가 됐다.

근데 한국의 경우 웹접근성이 주목받은 때가 2010년이다. 외국에 비해 7~8년 늦은 접근성이다. 비즈니스와 편의성에만 추구한 나머지 웹취약계층과 접근성은 개나 줘버렸었다. 가뜩이나 IE에만 신경썼는데 오죽했을까? 인종차별 인종차별 소리지르면서 정적 한국이 내가 보기엔 존나 차별하는것 같다.

그렇다고.

5. 개발자 도구의 시작, Firebug.

불여우가 왜 괜히 웹 개발자를 위한 브라우저일까? 애초부터 그렇게 시작한 거다.

한국에 IE와 불여우, 크롬 3대장이 웹 시장을 주름잡기 시작했는데, 불여우가 일반인에게 쓰기 어려운 브라우저인 이유가 바로 이런 개발자 환경에 신경쓴 환경이기도 하다.

어쨌든, 개발자 도구의 표준안을 마련한 도구, Firebug다.

Firebug HTML Tree

하지만 Firebug가 처음부터 표준안을 선도한 것은 아니었다. 버전 0.2 에서는 자바스크립트 콘솔과 CSS 구조, 선택한 DOM의 속성을 제공한 게 전부였다.

0.3 에서는 DOM 기능에 충실하게 출시해서 DOM 이벤트와 속성, 해당 적용된 DOM의 CSS 속성들도 볼 수 있게 됐다.

그리고 혁신을 이루어낸 것은 버전 0.4 부터인데,

0.3을 기점으로 자체 DOM 검사기를 포함하는 것으로 시작해서, 자바스크립트에 표준 바람을 불게 만든 console 객체를 출시했다. 비록 Firebug 밖에 되지 않았지만, 혁신을 이루게 한 건 사실이다. 귀찮게 로그성 데이터를 DOM에 뿌릴 필요 없었고, 정보도 바로바로 볼 수 있었던 덕에 많은 웹 개발자에게 Firebug는 이제 없어선 안될 도구가 되고, console 객체 또한 조금 늦지만 ECMA 표준에 등재된 쾌거를 이루었다.

그리고 이 주목받은 기능을 등에 업고 1.0을 출시했을 때는 상용 도구로 개발될 예정이었으나, 불여우에 왠 뜬금없는 상용 툴? 뚝.

아 미안. 그냥 공짜임. 콜! 오픈소스다. BSD로. 아주 좋소!

어쨌든, 지금의 Firebug 화면과 유사하게 나온다. 콘솔과 DOM 검사기, CSS와 스크립트 디버거, 그리고 DOM 객체 구조와 네트워크 타이밍까지. 웹 개발에 있어서 제공하는 모든 것들을 제공했다.

현재는 쿠키와 프로파일러, 설정 등 다양한 기능들이 커뮤니티를 통해 제공했다.

그리고 웹 사이트 성능 측정 도구인 YSlow. 웹 개발자라면 다 아는 도구다. 야후까지 가세해서 Firebug는 웹 개발자가 모르면 간첩.

그리고 이에 힘입어 Firebug Lite 까지 출시했는데, Firebug를 다른 브라우저에서 돌리고 웹개발에 편의성을 주도록 개발한 녀석이다.

그래서 오페라 브라우저에 신경쓰는 웹 개발자에겐 가뭄에 비같은 도구로 잘 활용했었다. 지금은 오페라도 자체 개발자 도구 제공해서 상관은 없지만.

IE에게는 가뭄에 산성비같은 도구였다. Firebug가 느리기 때문인데, 이는 Firebug 문제가 아니라 JScript 엔진이 병신같아서 그런 거다. 엔진 자체가 느려 터졌다고.

하지만 IE 8부터 자체 개발자 도구가 생겼으니 굳이 고민을 할 필요는 없어보인다.

현재는 불여우에 자체 개발자 도구로 제공하고, Firebug 보다 더 빠른 성능을 제공해 주지만, 아직도 많은 불여우 기반 웹 개발자는 Firebug를 쓰고 있다.

여담으로, Firebug 또한 한국에서 최고의 개발자 도구로 주목받았을 땐 한글화해준 고마운 사람이 있었다, 하지만 그는 누군지 모르고, 게다가 현재는 Firebug 한글화가 진행되지 않고 있다.

그래서 현재 Firebug 는 받으면 영어로 나오며, Firebug 공식 홈페이지에 한글화 번역자는 등재되지 않고 있다.

왜죠?

6. 개발자 도구의 반격, Internet Explorer.

한국인이야 알다시피 IE는 웹 환경의 혁신(?)을 불러일으킨 브라우저다. 하지만 너무 자체적으로 표준으로만 만들었다 보니 다른 브라우저에서 안되고, 액티브엑스 때문에 갈라파고스화를 만들어낸 주범이었다.

물론 이것도 마소가 독점하려고 일부러 그렇게 만든건 맞다. 하지만 IE의 보안성 부재와 불여우의 선전, 그리고 구글까지 웹 브라우저를 만들고 나서려고 하니 마소에게 똥줄타지 않을 수가 없다보니…

IE 7을 출시했다. 사용자 측면에서는 탭 브라우징이 끝이다. 시발. 장난하냐?

그리고 IE 7의 실패를 맛본 마소는 이번엔 IE 8 을 출시했다. 물론 욕나오는 브라우저긴 하다. 버그 작렬과 쳐진 성능. 즉, IE 6에 익숙했던 똥컴에게 IE8은 지랄같은 존재였던 것이다.

하지만 마소가 이제 점점 웹표준 수순을 밟고 가려는 의도가 점점 보이고 있는 웹브라우저였고,

마소도 몇몇 기술을 웹 표준에 등록했는데, 대표적인 기술이 localStorage 다.querySelector 도 있긴 한데 제한적이니…

참고로 Ajax를 만들어게 이룩한건 IE의 ActiveX 였지만, 모질라의 XMLHttpRequest가 채택되고, IE에서는 XMLDOM 액티브엑스의 래퍼(Wrapper)로 쓰였다.

그리고 IE 8에서 F12를 누르면 개발자 도구가 나오는데, 혁신을 이루게 만든 하나의 기능이 있었는데 바로 “프로파일러”다.

자바스크립트 프로파일러는, 수집하는 동안 사용자가 브라우징하는 동안에 이벤트와 속성, 함수 호출 내역을 기록하는 기능인데, 사실 이걸 재대로 쓰는 개발자는 많지 않지만, 동적 UI 편의성 모니터링과 개선에 이만한 기능이 없다.

그리고 자바스크립트 디버거 성능이 장난이 아니었다. 비주얼 스튜디오로 나태한 디버거를 만들어낸 마소 답게, 비주얼 스튜디오 좀 만졌다면 IE 자스 디버거는 이보다 편할 수 없을 것이다. 굳이 안만져봤다 해도 상당히 좋은 기능으로 자리매김하였다.

하지만 IE 개발자 도구의 단점이 이런 장점을 덮어버렸는데,

DOM 검사기를 제공한 건 잘한 일이지만 동적이지 못한 단점이 있다. 즉, DOM 변경에 대응을 하지 않았다는 것이다. 수동으로 새로고침을 해야지 그 결과를 볼 수 있다. 상당히 불편한 기능이다.

그리고 자바스크립트 콘솔을 제공하는데, Firebug 가 다른 콘솔은 객체만 치면 객체의 대략적인 속성이나 constructor 가 뭔지 알 수라도 있는데, IE에서는 그저 [object] 로 나온다. 시발 어쩌라고.

그리고 네트워크 탭이 없었다. 물론 Fiddler 가 그 역할을 대신해주긴 했지만, Ajax나 동적 스크립트, 그리고 누락된 리소스 알아내는데 Fiddler 켜야 하니 불편하지 않을 수 없었다.

그리하여 IE 9에는 네트워크 탭이 생겼는데, 이녀석인 프로파일러처럼 개발자가 키면 수집하고 안키면 수집 안하는 식이다.

이는 어찌보면 편하기도 하고 불편하기도 한데, 내가 쓴 바로는 그닥 불편하지 않고, 필요한 경우에만 켰다가 필요없는 경우에 끄는 기능도 괜찮다고 생각한다. 키고 끄는게 가능하지만 조금 불편한 감이 있는 Firebug와, 아예 수집만 주구장촹 하는 웹키트 기반에 비해서 IE는 IE만의 특징이 있다고 보면 된다.

IE 10까지 별다른 진척 없다가 IE 11에서 개발자 도구가 플랫 UI를 안고 탈바꿈 하였는데, IE 11의 DOM 검사기는 이제 수동으로 새로고침 안해도 변경되면 반영하게 됐다. 그 외 나머진 별 다를거 없고.

그리고 UI 응답성 테스트가 생겼는데. 그냥 YSlow 비슷하다 보면 된다. 일종의 프로파일러다. UI가 렌더링된 시간을 기록하여 시각적 결과를 제공해준다. 이건 잘만든 기능이다.

이렇게 IE의 개발자 도구도 강력해지긴 했는데, 아직도 고질적인 문제는 IE는 각 버전마다 렌더링이.. 시발.. 아주그냥.. 시발..

7. Webkit, 개발자 도구로 대동단결.

맥으로 웹개발하는 사람이라면 알겠지만, 사파리나 크롬이나 개발자 도구는 똑같이 생겼다. 그 이유인 즉슨, 둘 다 사용하는 엔진인 웹키트가 개발자 도구를 대동단결했으니까. (웹키트 엔진에 번들로 제공한다고.)

웹키트의 개발자 도구는 조금 늦은 감이 있다. 웹키트 자체 DOM 검사기가 2006년에 소개됐으니까.

하지만 초기에 기능이 워낙 강력해서 Firebug 보다 나았던 시절도 있었다는 것.

왜냐면 이녀석은 시각적 효과가 화려하게 제공되고, 자바스크립트 콘솔이 강력했다. 자동완성을 먼저 지원했기 때문이다.

사실 IE 8과 비슷한 시기에 웹키트 기반 개발자 도구가 대중에 공개됐는데, Firebug 에 비해 이녀석은 아예 그냥 모든 사이트라면 F12 만 누르면 죄다 수집하고 분석하고 기록한다.

어찌보면 편하기도 하지만, 프레임으로 지속적으로 불러오는 웹 사이트 구조라면 계속 수집해서 목록이 늘어날수록 성능이 떨어지는 단점이 있다. 이는 어쩔 수 없다.

그래서 조금은 불편한 감이 있기도 하다. 왜냐면 Firebug 와는 달리 특정 기능만 키고 끌 수가 없으니까.

그래도 나름 웹키트 다운 면모가 있다.

그리고 사파리와 크롬은 결국 개발자 도구도 다른 길로 걷게 되는데, 사파리는 웹키트의 주를 이루니 웹키트 흘러가는대로 가지만, 크롬은 웹키트 변형 엔진인 블링크를 만들어 쓰기 시작해서 지금도 비슷하게 생겼지만 점점 달라지고 있다는거.

8. 마치며.

사실 각 플랫폼별로 나열했기 때문에 누가 먼저 하고 그다음 누가 했는지 햇갈릴 것이다. 그건 필자도 인정한다.

한가지 분명한 사실은, 넷스케이프에서 가장 먼저 개발자 도구를 만들기 시작했고, 그 전신을 이어받은 모질라가 먼저 개발자 도구를 만들고 선도한 것은 틀림없는 사실이다.

불여우가 웹 개발자를 위한 브라우저라고 누차 강조한 이유가 그 역사를 달고 태어났기 때문이라고 나는 자신있게 말한다.

어쨌든, 이렇게 개발자 도구가 서로 경쟁하고 선도하고 발전하면서, 웹 개발이 이렇게 발전할 수 있었던게 아닐까 싶다.

웹 디자인도, 웹 개발에 초석이 되지 않았다면, 가뜩이나 웹 디자인에 가장 많은 의존을 하는 CSS 개발도 어려웠을 것이다.

생산성도 향상되고 디자인도 여러가지로 화려해졌지만, 그렇다고 단가가 낮아진 건 아니다.

클라이언트가 요구하는 건 점점 더 다양해지고, 이를 수용할 수 있는 웹 디자이너와 개발자는 그만한 가치가 있기 때문이다.

이렇듯 웹 개발자 도구는, 절대 무시해선 안될 도구다. 특히 웹 개발자는 더. 액티브엑스? 몰라. 그딴거.

개발자 도구. 고맙게 쓰자.

composite / 2014년 2월 10일 / 미분류 / 0 Comments

얼라아답터를 위한 CSS4 셀렉터 정리해주겠다.

CSS4 관심가져있는 것들이 안보이길래 내가 정리해주겠다.

원문? 걍 여기로 가 – http://css4-selectors.com/

아, 참고로 어느 브라우저도 지원 안되니 테스트는 참기 바란다.

선택자 정의만 있다.

1. 부정 가상 선택자

:not(negation-selector1[, negation-selector2,])

일단 CSS3 에서도 부정선택자를 정의할 수 있으나, 안타깝게도 현재 여러개를 지원하지 않는다.

하지만 이번 CSS4 정의에서는 여러 선택자를 넣을 수 있다. (하지만 :not(:not(…)) 이런 식은 안된다.)

2. 매치 가상 선택자

:matches(selector1[, selector2,])

이것도 나름 혁신적인데, 매치된 선택자들을 집합하여 여기에 추가 선택자를 받아낼 수 있다.

예를 들면, 현재 layer 클래스가 #a, #b에 있는데, 기존대로 하면은 이렇게 정의해야 한다.

#a .layer, #b .layer{

    background:yellow;

하지만 이걸 매치 선택자로 대체하면 이렇게 할 수 있다는 거다.

:matches(#a, #b) .layer{

    background:yellow;

욜라 간단하지 아니한가?

현재 불여우와 크롬에서 대체 선택자를 지원하는데, any 선택자가 그 동일한 역할을 한다.

/* 현재 동작중. 주의: 불여우와 크롬은 각기 다른 접두어를 정의해야 한다. :-prefix-any */
:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

3. 내부 링크 가상 선택자

:local-link(n)

얜 뭐냐.. 얘는 주소의 흔히 말하는 뎁스(Depth), 폴더의 구조 깊이에 따라 반응할 수 있는 선택자 되겠다.

링크 주소는 href 로 이동거나 action 링크 등이 먹힌다.

/* 이렇게 http://example.com/ 같은 최상위 링크만 적용된다. */ :local-link(0) { color: red; }   /* 이렇게 http://example.com/year/ 같은 1뎁스 경로 링크만 적용된다. */ :local-link(1) { color: red; }   /* 이렇게 match http://example.com/year/month/ 같은 2뎁스 경로 링크만 적용된다. */ :local-link(2) { color: red; }

주로 홈페이지에 흔이 쓰는 상단 네비게이션 부분, 예를들면

홈 > 회사소개 > 연혁

이런 녀석의 용도에 알맞을 듯 하다.

4. 시간 흐름 가상 선택자

/* 현재 위치 */
:current { /* declarations */ }
:current(s1[, s2,]) { /* declarations */ }
 
 
/* 이전 위치 */
:past { /* declarations */ }
:past(s1[, s2,]) { /* declarations */ }
 
 
/* 다음 위치 */
:future { /* declarations */ }
:future(s1[, s2,]) { /* declarations */ }

이건 웹 접근성을 위한 선택자인 듯 하다. 주로 <video> 태그의 자막으로 쓸 거라고 하는데. 여기가 일단 주 용도이기도 하지만, 청각 장애인 웹 접근성에 대한 시각적 도움을 줄 것으로 보이는 선택자가 되겠다.

:current(p, span) {
    background-color: yellow;
}
 
:past(p, span),
:future(p, span) {
    background-color: gray;
}

이런 식으로 현재 표시되는 자막에는 노란색 배경을, 이미 지나거나 곧 표시될 자막 부분에는 회색 배경을 붙이는 예제가 되겠다.

5. 미확정 가상 선택자

:indeterminate

HTML5 의 checkbox 및 radio 에서 체크, 비체크 에서 미확정 상태를 표시할 수 있는데, 이를 위한 가상 선택자가 되겠다.

미확정 체크 박스를 만드는 방법은 일단 순수 HTML 으로는 불가능하고, 스크립트로 활성화해야 한다.

checkbox.indeterminate = true;

이렇게 하면 미확정 상태가 되는데, 이건 체크한것도 안한것도 아닌 상태가 된다. 그냥 보여주기일 뿐이라고. 폼전송도 안되고.

미확정 선택자는 표준이 아니었으나, IE는 9 이상 지원하고 나머지 브라우저가 모두 지원하는 선택자이다.

6. 기본값 가상 선택자

:default

<select> 태그나 <button> 태그 등의 기본값으로 적용될 요소에 한해 적용되는 선택자가 되겠다.

:default {
    background-color: gray;
}

이렇게 하면 <select> 에 기본으로 선택된 값 부분의 배경이 회색으로 변할 것이다. 물론 클릭해보고 다른 값을 선택하는 동안 봐라.

불여우와 크롬, 사파리가 지원된다.

7. 유효값 가상 선택자

:in-range {
    /* declarations */
}
 
:out-of-range {
    /* declarations */
}

이녀석은 두가지 선택자로 정의되어 있는데, 올바른 값에 대한 정의를 나타내는 in-range 와 올바르지 않은 값 정의를 나타낸 out-of-range 가 있다.

주로 input type=”range” 에서 min=”1″ max=”10″ 인데 value=”11″ 같이 범위를 넘어버리면 :out-of-range 선택자가 동작한다. 물론 아니면 in-range 선택자가 동작한다.

:in-range {
    opacity: 1.0;
}
 
:out-of-range {
    opacity: 0.6;
}

이렇게 하면 올바른 값을 선택한 요소는 불투명하게, 올바르지 않은 값을 선택한 요소에게는 약간의 투명 효과를 줄 수 있다.

현재 크롬과 오페라만 된다.

8. 선택 입력 가상 선택자

:required {
    /* declarations */
}
 
:optional {
    /* declarations */
}

필수 입력란과 선택 입력란에 대한 가상 선택자라고 보면 되는데, 일단 input 태그에 required 속성 들어가면 required 선택자가 동작을 할 것이고 나머지는 optional 가상 선택자가 동작할 것이다. 쉽지?

:required {
    border: 1px solid red;
}
 
:optional {
    border: 1px solid gray;
}

이런 식으로 필수 입력란에는 빨간 테두리를, 선택 입력란에는 회색 테두리를 입힐 수 있다.

현재 IE 빼고 모든 브라우저가 지원된다.

9. 편집 여부 가상 선택자

:read-only {
    /* declarations */
}
 
:read-write {
    /* declarations */
}

이녀석은 편집 가능하거나 아닌 것에 대한 가상 선택자다. 당연히 입력란을 위한 선택자 되겠다.

readonly 속성이 있다면 read-only 선택자가 동작할 것이고, 없다면 read-write 선택자가 동작할 것이다.

contenteditable 속성도 영향을 받는다. 속성을 주면 당연히 read-write 선택자가 동작한다.

:read-only {
    font-family: Verdana, Arial, sans-serif;
}
 
:read-write {
    font-family: Trebuchet MS, Times New Roman, sans-serif;
    border: 1px dotted gray;
}

이렇게 하면 편집 가능한 요소에 회색 점테두리를 입히고, 편집 안되는 요소에는 그냥 글꼴만 정의하고 땡.

10. 구조 가상 선택자

:nth-match(an+b) {
    /* declarations */
}
 
:nth-last-match(an+b) {
    /* declarations */
}

언뜻 보면 CSS3 의 nth-child 선택자 삘 나보이는데, nth-child 는 그냥 범위 내 같은 계층 속만 찾는다면, nth-match 는 하위 계층까지 찾아 선택된다.

p:nth-match(2n+1) {
    background-color: yellow;
}
 
p:nth-last-match(2n+1) {
    background-color: green;
}

이렇게 하면 p 태그의 첫번째 매치된 녀석은 노란 배경을, 문서 맨 뒤에 2번째 매치된 p 태그에겐 초록색 배경을 줄 것이다.

아직 지원되는 브라우저는 없다.

10. 그리드 구조 가상 선택자

:column(s1) { /* declarations */ }
 
:nth-column(an+b) { /* declarations */ }
 
:nth-last-column(an+b) { /* declarations */ }

자.. 이것은 표 또는 CSS3 의 grid 속성을 부여받거나, display:table-cell 등의 셀 속성을 부여받은 요소에 적용할 수 있는 선택자 되겠다. 조금 쓰기가 어려운데, 예제를 통해 이해시켜 주겠다.

<table>
    <col />
    <col class="highlight" />
    <col />
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
        <td>K</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
    </tr>
    <tr>
        <td>O</td>
        <td>P</td>
        <td>Q</td>
    </tr>
</table>

:column(.highlight) {
    background-color: yellow;
}
 
:nth-column(2n+1) {
    background-color: gray;
}
 
:nth-last-column(3n+1) {
    background-color: green;
}

이렇게 하면, 첫번째로 .highlight 클래스명이 붙은 두번째 열은 전부 노란색이 되겠다.

그리고 첫번째 열은 회색 배경이 되겠고,

마지막 에서 3번째 중 하나, 즉, 마지막 열이 초록색 배경을 입힐 것이다.

아직 지원되는 브라우저는 없다.

11. 속성 대소문자 무시 선택자

[attribute="value" i]

CSS2 의 속성 선택자는 대소문자가 구분됐다. 그래서 아무리 똑같은 값을 부여받았다 해도, value=”abc” 와 value=”aBc” 는 전혀 다르게 인식됐다.

하지만 다음에 나올 CSS4 에서는 속성값의 대소문자를 철저히 무시해주는 옵션을 제공할 것이다.

a[href$="pdf" i] {
    color: red;
}

이렇게 하면, 링크 주소 끝이 pdf 던, PDF 던, pDf 던 대소문자 구분없이 pdf 로 끝나는 모든 링크 요소 글색깔이 빨간색으로 변할 것이다.

아직 지원되는 브라우저는 없다.

12. 속성 참조 선택자

E /attribute/ F

선택자 중 아마 유일한 변수성 선택자가 아닐까 싶다. 속성값은 변하기 때문에.

어쨌든, E 선택자의 /속성/ 값을 ID 로 참조한 후, 속성 값 ID에 매치되는 F 선택자에 대한 스타일을 입힐 수 있다.

다소 복잡하다. 의미가. 예를 들면,

label:hover /for/ input {
    border: 1px solid red;
}

이렇게 하면 label 에 마우스를 갖다댔을 때, input 요소 id 속성이 label 의 for 속성에 매치될 경우, 빨간 테두리를 줄 것이다.

아직 지원되는 브라우저가 없다.

13. 자식 반전 선택자 (subject of a selector with child combinator)

!subject > selector {
    /* declarations */
}

드디어 올 것이 왔다. 말로만 듣던 부모 선택자가 바로 이 ! 로 시작하는 선택자가 되겠다.

subject 에서 selector 를 찾은 후 매치되는 요소에 한해 selector 가 아닌 subject 요소에게 스타일을 주는 선택자다.

즉 부모 선택자가 되겠다.

!ul > li {
    border: 1px solid green;
}

이렇게 하면 ul 바로 아래 li 요소에 초록 테두리를 주는게 아니라 li 자식을 가진 ul 요소에다가 초록색 테두리를 입힌다.

안타깝게도 아직 지원되는 브라우저는 없다.

14. 하이퍼링크 가상 선택자

:any-link

간단히 말하면 링크 주소 가진 모든 요소들을 가리킨다. a 태그던 form 태그던 area 태그던 링크 가지면 죄다 적용받는다.

:any-link {
    background-color: blue;
}

이렇게 하면 링크 가진 모든 요소의 배경은 파란색으로 변한다.

내부링크 가상선택자는 같은 도메인 주소를 받는 대신 경로 뎁스 등의 미세한 옵션이 제공되지만, 이 선택자는 모든 도메인을 수용하는 대신 추가 옵션 따위 없다.

이제 CSS4 사용할 준비 되었는가 제군들이여?

<

p>

오역 및 개선방안 제안은 환영한다 제군들이여!

바로잡는다!

정확히는 CSS Selector 4 정의라고 한다. CSS의 새로운 버전 4가 아니라고 한다.

또한 Working Draft 상태라서 언제든지 바뀌거나 삭제될 수 있으므로,

이 점 유의해 가면서 알아두길 바란다. 만약 바뀌는 부분이 있다면 제보 바란다. 또는 필자가 발견하는데로 업데이트 하겠다.

composite / 2013년 12월 24일 / 미분류 / 1 Comment

CSS로 만든 크로스 브라우저 흑백 효과

IE의 경우는 기본 흑백만 제공하고, 캔버스 태그에서 온갖 효과 기능들이 생겨났지만..

다행인 것은 바로 흑백 효과를 CSS를 통해 볼 수 있다는 것이다.

굉장하지 아니한가?

CSS 코드는 아래와 같다.

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

안타깝게도 불여우같은 경우 (달버전 말고)는 grayscale.svg 파일이 별도로 필요하다.

일단 여기에 data:uri 적용해놨는데 이게 성공한다면 외부에 의지할 필요가 없는 최고의 상태지만, 실패한다면 안습.

불여우 사용자 중 아래 그림이 흑백으로 보이거나 안보인다면 제보 바란다.

출처는 http://labs.voronianski.com/css3-grayscale/

Download ZIP (with .svg)

composite / 2013년 12월 13일 / 미분류 / 2 Comments

Firefox 23 릴리즈 – 헐…

Firefox 23 출시 소식을 듣고 당장 업데이트 했다.

그리고 새로운 개발자 기능을 보고..

헐..

이제 불여우에도 자체 개발자 도구가 100% 나오는건가..

그럼 Firebug는..

어쨌든, 바뀐점이 몇군데 보인다. 여태까지 개발할때 Firebug를 썼던 터라

Firebug 보다 더 낫다면 요거 사용할 생각을 해야겠다.

자체 개발자 도구야 이미 있지만 그때까지 기능이 시원치않았고 Firebug 써와서 갑자기 써보니 신기하기만 하다.

불여우 아이콘이 조금 바뀐 느낌이다. 입체감이 사라지고 Flat 요소로 가려나 보다?

기본 설정화면

콘솔 화면

DOM 검사기 화면

자바스크립트 디버거 화면 (IE의 경우 비주얼 스튜디오 디버거에 익숙해서 그런지 개인적으로 IE 가 갑이다.)

스타일시트 편집기 화면 (편집 당연히 되고 반영 된다. 따로 저장 된다.)

스크립트 프로파일러 (IE에서 처음 선보여서 그런지 이것만큼은 IE가 갑이다. 이제 어느 브라우저에나 다 있지만.)

<

p style=”text-align: center; clear: none; float: none;”>네트워크 모니터 (Firefox 23에 나온 새로운 기능이다. 이제 불여우 자체 개발자 도구가 종결될려나 보다.)

이제 F12 누를 경우를 생각해봐야 겠다. F12 눌렀을때 나오는 개발자 도구가 계속 Firebug가 될지, 자체 도구가 될지..

두고볼일이다. 화이팅이다.

아참, input type 에 range 구현되었다. 확인해 보시라.

그리고 CSS 에 blink 기능 및 태그가 완전히 제거되었다. 그래서 22까지는 깜박거렸던 글씨가 23부터는 안깜박댄다.

composite / 2013년 8월 8일 / 미분류 / 1 Comment

2013년 대유행 디자인 – Flat UI

요즘 대세는 Flat UI라고 한다. 바로 iOS 7에서 채용된 디자인 패턴이다.

지금 iOS 7 때문에 Flat UI에 관심가져 있는 디자이너가 슬슬 늘어나고 있다는 거 잘 안다.

그럴 만 하다. 왜냐면 애플 이생퀴들은 지금 있는 트랜드를 아주그냥 쓰지 않으면 뒤떨어지는 새퀴로 만드는 재주를 지녔기 때문이다.

그렇다면, 물어본다. 글로시 UI에서 플랫 UI로 바뀐건 왜일까?

웹개발과 디자인 조언에 대가 본인이 직접 풀어보도록 하겠다.

그건 바로 3차원 디스플레이에 대한 대응… 은 가능성있는 얘기긴 하지만 그건 현재 상관 없고.

지금 중요한 것은 바로 사용자에 대한 컨텐츠 전달이 명확하다는 가장 무서운 무기가 있기 때문이다.

그것도 색상으로. 신호등처럼. 모양과 3차원, 그리고 화려한 것 따위는 지루하다. 사용자는 충분히 인식했고,

그것을 단순화시켰다.

그런데 재밌는 점이 바로. 그 UI를 시작한 회사가 바로 마소다. 정확히 말하자면 Flat UI에 대한 첫 상용화의 신호탄을 때린 것이다.


출처 : Snoopybox

뭐.. 당연하겠지만 윈도우 8은 지금도 욕먹는건 현재진행형이다. 바로 UI는 좋은데 UX가 개판이라서.

오로지 터치 환경에 치중하다보니 데스크탑 환경에 대한 오류를 범해서 마소 스스로 “실패”했다고 인정받을 정도다.

하지만.. 디자인은 누구 하나 욕한 놈이 없다. build 컨퍼런스에서도. 찬사를 받았을지는 모르겠지만 이 디자인에 실망한 사람은 별로 없다.

그리고 대 Flat UI 시대가 도래했다.

그리고 Flat UI를 전문적으로 상용화하기 시작했다. 회사에서 Flat UI로 바꾸거나 새로 시작하려는 움직임이 많다보니.

물론 외국 얘기다. 한국은 아직도 플래시 떡칠에 이미지 떡칠에 윤고딕 떡칠한 디자인이 대세니까.

(사실 무슨 디자인 패턴이라고 하기도 뭐하다..)

(출처 알수없음, 이 이미지 관련 소유자이면 비밀댓글로 연락바람. 저작권 있으면 지우겠음.)

한국의 흔한 웹디자인 (디자인 패턴을 모르겠다. 웹사이트가 광고디자인과 햇갈려하는 디자이너가 아직도 많나보다.)

어쨌든, 이렇게 대유행 디자인에 애플까지도 가세했다.

애플 자체의 철학 (이라고 하기엔 기존 수석 디자이너가 나가서 조금 애매할지도 모르겠다.)과 Flat UI가 조화를 이루어 그들도 가세한 것이다.

지금 이 글을 보고 있는 디자이너가 있다면 잘 들어라.

지금 “흔한 한국의 웹디자인” 을 하고 있을지도 모르겠지만, 유행을 따른다면 Flat UI도 연습해 볼 필요가 있다.

왜냐하면, 이 디자인 패턴은 다른 디자인 패턴보다 오래 갈 것이기 때문이다.

사람 눈에 피로가 덜하고, 더 개선된 방법이 계속 나올 것이며, 이런 정보공유와 디자인 시장이 질기게 성장하기 때문이다.

그리고 가장 주목해야 할 것은, 바로 차세대 디스플레에이에도 알맞게 설계할 수 있는 디자인이 바로 이 디자인이기 때문이다.

여러분이 “마이너리티 리포트” 같이 미래 배경 영화를 본 사람이라면, 3차원이나 반투명, 설령 투명 디스플레이가 나온다 해도.

이 디자인 패턴은 어디가서도 알맞게 표현될 것이다. 단색만으로 표현할 수 있으며, 심볼만 정확하면 바로 알아볼 수 있고.

요즘의 여러가지 UI 디자인과 Flat UI 디자인과 합쳐져서 나올 것이라면, 관리자 화면에서 이 화면은 피로감이 덜하고 오래가는 UI를 만들 수 있기 때문이다. 지금 관리자 페이지에 왜 Flat UI가 대세냐면, 바로 오래 봐야 하는 관리자 화면에 피로감이 바로 Flat UI가 덜하기 때문이다. 이것들은 이미 디자인 조또 모르는 시스템 관리자도 인정한 디자인이란 말이다.

좋다. 그럼 웹 디자이너를 위해 내가 유용한 Flat UI 리소스를 제공하도록 하겠다. 포샵 파일이 부담없이 놀아 보도록.

당신이 Flat UI를 실무에 쓸 준비가 되있다면 당신은 환영받을 준비만 하면 된다. 특히 관리 시스템 웹디자인 (그룹웨어나 ERP)

http://speckyboy.com/2013/04/03/flat-gui-templates/ (영어)

http://www.flashuser.net/free-flat-ui-kits (영어)

http://estiloleche.tistory.com/189 (한국어)

http://www.hwangc.com/flat-design-wordpress-themes-10/ (한국어, 워드프레스 테마)

내가 전문 웹디자이너가 아니라서 디자인적으로 더 궁금한 점을 풀어드리지 못해 심심짭쪼름한 양해 바란다.

Flat UI의 디자인은 더이상의 쓰잘대기 없는 효과가 사라지고, 색상, 모양만으로 만들어진 심플 미학의 결정체라고 보면 된다.

뭐.. 구글링 하면 관련된 정보를 많이 볼 수 있으며, iOS 7 때문에 이미 눈뜨고 대응한 디자이너의 정보도 있으니 찾아보면 나올 것이다.

난 개발자기 때문에 여기까지 쓰도록 하겠다.

ㅈㅅ.

composite / 2013년 6월 27일 / 미분류 / 0 Comments

심심하면 보는 2012 전 세계 웹 서버 순위

2012년 기준이지만, 다들 관심 없나보다. 워낙 자바만 고집하는게 한국사회라. 좀 병신같지만.

그래도 웹 서버 점유율은 잠시 웃어주고 넘어가자.

  1. 단연 Apache. 오픈소스지만 오랜 노하우와 초보부터 프로까지 접할 수 있는 접근성이 큰 요인으로 작용한다.

    딱히 무슨 말이 필요한가. PHP와 Apache는 여전히 최상의 조합인데.

  1. 비즈니스 앱에서 독보적인 마소의 IIS. 비즈니스에서는 윈도우 서버 구매비용에 비해 낮은 구축 비용과 세팅 비용이 매력으로

   작용해서 아직도 많이 쓰고 있는 편이다. 여전히 IIS 6을 돌리고 있는 웹사이트가 많으며

   (.NET 3.5 이하 또는 기존 ASP가 많이 호스팅되다 보니.)

   IIS 7 이상은 마소 파트너가 아닌 이상.. 스타트업 업체도 이걸로 구축하는 업체가 많지 않다. 초기 비용이 비싸니까..ㅋㅋ

   그래서 마소가 WebsiteSpark, BizSpark 같은 프로그램 운영해도 아는사람 많지 않은게 함정.

  1. 추월하고 있는 Nginx. 웹 서버 성능이 최강이라 알려져 있다. 특히 리버스 프록시에 강해서 WAS 따로 둬도 강력할 정도.

    WAS는 Web Application Server는 다들 알겠지만 자바에 한정짓지 마라. 자바 뿐만 아니다. 괴발자들아.

    자바를 비롯해 닷넷도 WAS가 가능하고(물론 ASP.NET 종속적이 아니면), 뜨고 있는 node.js 와 Ruby, Python 같은

    여러 서버 스크립트도 WAS 로 돌려 Nginx 에서 호스팅이 가능하고, 새로 뜨고 있는 스타트업 웹사이트에서도 그렇게 쓰고

    있다. 요즘 스타트업 사이트들이 그런 식으로 돌리다 보니 추월한 것이지.

    nginx와 PHP 조합? 단연 우수하다. 아파치 조합보다 더 빠른 성능을 자랑한다.

  1. 갑자기 다시 뜨고 있는 lighttpd. 이녀석은 애초부터 HTTP 서버에 군더더기를 제거해 HTTP 서버”만” 돌리겠다는 이념(?)으로

    만들고 있는 오픈소스 서버다. 그렇다 보니 서버 분산과 클라우드, CDN의 유행이 퍼지면서 정적 컨텐츠를 빠르게 전달하는

    용도로 주목을 받고 있는 듯 하다. 여태까지 잠잠해지다가 뜬 거 보면. 내 개인적인 생각이지만.

    예를 들면 css나 js, 이미지 같은 서버단 처리가 없는 정적 컨텐츠 말이다.

  1. 구글은 구글에 구걸하면 구할수 있습니까?

전 세계 웹 서버 점유율에서 한국의 경우는 “당연히” 아파치가 우세하다. 일본도 마찬가지고. 근데 중국은 IIS.. 읭?

어쨌든 지금 웹 서버와 개발 트랜드가 조금씩 변화하고, 뜨고 있는 언어가 늘어나면서 경쟁은 치열해 지고 있는 것이 현실이다.

그래봐야 님은 자바에 아파치 톰캣이면 어느 누구도 두렵지 않다고 하겠지만. 아니면 닷넷의 경우 IIS가.

근데.. 님들아. PHP가 웹 사이트 언어 순위 아직도 1위랍니다. 앞으로도 1위고. 의미없는 언어우월주의 허세떨지 마시길 괴발자님.

참고자료

May 2012 Web Server Survey – http://news.netcraft.com/archives/2012/05/02/may-2012-web-server-survey.html

Most popular web servers by country – http://w3techs.com/blog/entry/most_popular_web_servers_by_country

Poll Results: Server side language of choice? – http://css-tricks.com/poll-results-server-side-language/

composite / 2013년 6월 13일 / 미분류 / 0 Comments

CSS Devloper 라고 아십니까?

문득 Github 에서 CSS 최적화 기법을 동영상과 프리젠테이션으로 봤습니다.
대충 내용은 태그셀렉터 줄이고 클래스중첩 줄이고 속성매칭 쓰지말라 등등 여러가지 기술을 가르쳤습니다.
근데 여기서 CSS Devloper 라고 있습니다. 생소한 명칭입니다.

<

p style=”text-align: center; clear: none; float: none;”>

여러분이 수많은 사이트의 공통 스타일을 몇천줄 이상 짠다고 생각해 보시면 할 수 있을지요?
저들은 그건 일도 아니라고 합니다.
하지만 프론트앤드 개발이기 때문에, 스타일시트에 따라 보여지는것도 천차만별이기 때문에 이것도 정말 매력있고 좋은 직업이라고 봅니다.

한국도 이렇게 웹 트랜드에 따른 새로운 직종이 나오길 바라지만 한국은 아마 안될거야..
할말이 ㅇ벗어요.

https://speakerdeck.com/jonrohan/githubs-css-performance
http://vimeo.com/54990931

composite / 2013년 1월 21일 / 미분류 / 0 Comments

HTML5 CSS3 튜토리얼 – 리본 형식의 헤더 만들기.

레노버 영문 사이트를 보시면 NEWS AND ALERTS 부분이 있습니다.

여기 보시면 입체감 있는 빨간 리본이 있을겁니다.

오늘은 이런 리본 헤더 부분을 이미지 없이 순수 HTML/CSS로 만들어 보겠습니다.

먼저 렌더링 결과를 보시겠습니다.

레노버 디자인보다 못하지만 목표대로 나왔습니다.

이제 어떻게 만드는지 마크업부터 보시겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DJ Defense</title>
</head>
<body>
  <div class=”aside”>
    <h1>Welcome Menu</h1>
    <div class=”ribbon”>DJ Defense</div>
    <ul>
      <li><a href=”#”>Menu 1</a></li>
      <li><a href=”#”>Menu 2</a></li>
      <li><a href=”#”>Menu 3</a></li>
      <li><a href=”#”>Menu 4</a></li>
      <li><a href=”#”>Menu 5</a></li>
    </ul>
    <div class=”ribbon”>By Composite</div>
    <ul>
      <li><a href=”#”>Menu 6</a></li>
      <li><a href=”#”>Menu 7</a></li>
      <li><a href=”#”>Menu 8</a></li>
      <li><a href=”#”>Menu 9</a></li>
      <li><a href=”#”>Menu 0</a></li>
    </ul>
  </div>
</body>
</html>

배경이 어두워서 일부러 밝은색을 사용했습니다. 글쓸때 너무 힘듭니다..ㅋㅋ

여기서 주목하실 부분은 바로 빨간 부분입니다. div 태그가 딸랑 하나 있습니다.

그 외에는 아무것도 없습니다. 그럼 어떻게 합니까?

바로 CSS 되겠습니다.

CSS2 표준에 재정이되어 있는 가상 컨텐츠 영역인 :before 와 :after 가 있습니다.

이 두녀석이 있으면 가상까지 합해 총 3개의 요소로 갖고 놀 수 있습니다.

여기서 :before 는 그림자를, :after 는 리본 입체 역할을 담당했습니다.

먼저 소스를 보여드리겠습니다.

.aside{background-color:#ccc;margin-left:2em;font:bold 1.5em verdana;width:480px;float:right;}
.ribbon{
  background:darkred;color:white;
  position:relative;z-index:0;margin-left:-1em;margin-top:1em;
  padding-left:1em;
  text-transform:uppercase;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ribbon:after{
  display:block;z-index:-2;
  border-top:0;
  border-bottom:.75em solid transparent;
  border-left:1em solid transparent;
  border-right:1em solid darkred;

  content:”;position:absolute;margin-left:-2em;
}
.ribbon:before{
  display:block;content:’ ’;position:absolute;z-index:-1;
  width:100%;
  -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, .75);
  -moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, .75);
  box-shadow:         0px 5px 5px rgba(50, 50, 50, .75);

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left:-1em;
}

먼저 리본 헤더의 기본 스타일은 겹치는 부분을 제외한 기본적인 스타일을 입히시면 됩니다.

이때 중요한 거는 리본이 앞으로 나와서 겹쳐야 하기 때문에 왼쪽 여백을 오히려 바깥으로 나가게끔 하는 것이 포인트!

그런 다음에 안쪽 여백을 통해 다시 돌려주면은 원래대로 돌아간 것처럼 실행할 수 있습니다.

중요한 거는 상대 위치로 지정하고 z-index를 지정해야 합니다. 그래야 하위 가상 요소의 표시 순서를 잡을 수 있습니다.

그리고 리본 겹치는 부분입니다. 리본 겹치는 부분은 after 로 줬습니다.

왼쪽 위에서 아래로 대각선으로 쭈욱 이어지는 삼각형 만들기의 비법은 바로 테두리 에 있습니다.

테두리로 삼각형 만드는 비법에 자세한 설명은 링크를 참조하시면 되겠습니다. firejune 님이 가장 잘 설명해 주셨더군요.

http://firejune.com/1533

리본 삼각형을 잡도록 위쪽 테두리를 없애고, 옆테두리에 100%를 부여할 경우 아래 테두리를 75% 정도로 크기를 부여했습니다.

그리고 왼쪽 및 아래쪽 테두리를 투명 표시 해서 오른쪽 테두리를 표시하게 하면 리본에 나오는 삼각형 만들기는 끝입니다.

그리고 절대 위치를 지정해서 표시 순서를 잡습니다. 위치는 지정하실 필요 없고 여백 조정을 통하여 상대 위치를 지정해 주면 됩니다.

여기서는 부모 여백의 2배 값으로 설정했습니다. 즉, 부모의 밖으로 빼낸 마진의 절대값+안쪽 여백값이 되겠습니다.

중요한 것은, content 속성을 부여해야 합니다. 또한 비어 있어야 합니다. 그래야 테두리가 표시되기 때문입니다.

마지막으로 그림자 부분입니다. 그림자는 CSS3 box-shadow 속성을 사용했습니다.

그리고 절대 위치로 잡은 뒤 여백은 부모와 똑같이 겹치도록 한 다음 표시 순서를 뒤로 잡습니다.

표시 순서는 부모>before>after 순으로 잡도록 설정해 주시면 되겠습니다.

이제 중요한 것은 content 속성을 부여해야 하는데, 빈 문자를 줘야 합니다. 스페이스바 공백은 안먹힙니다.

그래서 한글 ㄱ->한자->1번 문자를 통하여 공백을 표시했습니다. &nbsp;도 안먹히니 조금 슬프지만 이렇게라도 했습니다.

안그러면 그림자 표시가 안됩니다.

이렇게 하시면 완성입니다. 어때요. 참 쉽죠?

적용 예제 링크를 보여드리며 이번 강좌를 쿨하게 마치도록 하겠습니다.

<

p style=”text-align: left; clear: none; float: none;”>http://jsbin.com/usawah/2

composite / 2012년 12월 5일 / 미분류 / 0 Comments

(Polyfill) RGBA

이 팁은 IE때문에 골치아픈 개발자 및 코더, 디자이너에게 바칩니다. 따라서 이 팁은 많이 알려져 있어 이미 아시는 분도 있습니다.

배경은 투명하게, 컨텐츠는 불투명하게 사용하기 위해 쓰는 방법. 바로 RGBA 입니다.

사용 법은 다들 아시리라 믿습니다. background-color:rgba(123,51,124,50);

하지만 IE는 9 이상이 rgba를 지원합니다. 안타깝죠.

하지만 IE는 filter 를 통해 대체를 할 수 있습니다. 바로 그라디언트 기능이죠.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);

시작 부분과 끝 부분의 색깔을 똑같이 하면 RGBA가 완성됩니다.

이제 주의할 점을 말씀드리겠습니다.

필터 그라디언트 색상코드는 RGBA가 아닌 ARGB입니다. 따라서 알파값이 맨 앞에 16진수로 들어가야 합니다.

나머지 RGB야 뭐 알아서 해도 잘될겁니다.

또한 이 필터를 적용할 엘리먼트는 레이아웃을 가져야 합니다.

인라인 요소라면 그냥 먹혀들지 않을겁니다. 하지만 다행히도 이 속성 하나면 해결됩니다.

zoom:1;

이 2가지만 주의하면 RGBA 백그라운드의 크로스 브라우저는 이미 완료된 겁니다.

composite / 2012년 11월 28일 / 미분류 / 0 Comments