Regular Motion

개발자가 상팔자

Category: css (page 1 of 2)

Bootstrap #1 Boot Bootstrap

{ What is ‘Bootstrap’? }

Twitter 개발자들에 의해 개발된 front-end toolkit으로써, Button, Navigation, Label, Typhography, Alert 등의 기본 UI Component와 유용한 Interaction을 제공한다.

http://twitter.github.com/bootstrap/

장점

  • 간단한  Markup 작업으로 Rich하면서 Responsive한 UI를 구성할 수 있다.
  • 타 UI Framework에 비해 더 나은 성능을 보여준다.

 

{ Bootstrap Components }

Bootstrap에서 기본적으로 제공하는 UI Component들은 아래와 같다.

Button, Navigation, Labels, Badges, Typography, Thumbnails, Alerts, Progress Bars, Miscellaneous

 

{ Import Bootstrap }

Bootstrap의 구성은 아래와 같다.

  • bootstrap.css :  Basic Element들과 UI Component들의 CSS 속성이 정의되어있다.
  • bootstrap-responsive.css : UI Component들이 Responsive하게 구성되도록 정의되어있다.
  • bootstrap.js : Bootstrap이 지원하는 Javascript Plugin들을 하나로 합쳐 놓은 파일.
  • jquery.js : bootstrap은 jQuery Plugin으로 구현되어 있기 때문에 jquery를 포함해줘야 한다.
* 필요한 Javascript Plugin만 따로(Ex : bootstrap-transition.js, bootstrap-alert.js) import 할 수도 있다. 

 

{ more about… }

 

Chrome 개발자 도구의 유용한 기능!

 

우연히 Chrome 개발자 도구의 유용한 기능 몇가지를 알게되어 공유!!

 

{ Dock to right }

Wide 모니터를 쓰는 개발자들이 대부분이라는 걸 가정할 때 굉장히 유용한 기능이다!

회사에서 대부분의 개발자들이 Developer Tools를 Float Mode로 한다음 브라우저 옆에두고

작업하는 경우가 대부분인걸 감안하면 Developer Tools는 아래 위치할 때 보다 옆에 위치할 때 더 편하다.

위치 변경은 Developer Tools의 Settings에서 Dock to right 체크박스를 선택하면된다!!

Developer Tools의 기본 위치
General -> Dock to right을 체크하면 오른쪽으로 위치를 변경할 수 있다.

 

 

{ Disable cache }

가끔 개발중에 code를 수정했는데 결과가 바뀌지 않을 때가 있다.

이런 경우 Browser의 cache 문제일 확률이 높다.

위의 문제가 아니더라도 Page가 로딩되는 시간을 측정하고 싶다거나 하는 이유로 cache를 비활성화 시키고 싶을 때가 있다.

요럴 때 사용하면 좋은 기능이다.

General -> Disable cache를 체크하면 cache를 하지 않는다.

 

 

{ Device Resolution Simulation }

Mobile과 Tablet의 해상도를 Simulation 할 수 있는 기능을 제공한다.

Device Orientaion도 간단하게 버튼 클릭으로 변경할 수 있다. (편하다!)

User Agent를 변경해볼수도 있다. Server나 Client에서 user agent 기반의 rendering system을 사용중이라면 간단하게 검증 해볼 수 있는 좋은 툴인 것 같다.

viewport는 얼마나 정확히 지원되는지 아직 테스트 해보지 못했다.

Resolution과 User Agent를 변경해서 테스트 해볼 수 있다.
Orientation 변경도 테스트 할 수 있다.

 

 

{ Touch Event Simulation }

Browser에서 Mouse Event 대신 Touch Event를 발생시켜준다.

touchmove가 실제 단말보다 빈번하게 호출되기 때문에 성능에 민감한 부분 구현에는 적합하지 않고

기본적인 기능 구현에 적합한 것 같다.

Emulate touch events를 체크하면 touch event를 발생시킨다.

Write ‘Efficient’ CSS

“What is Efficient CSS?”

잘 작성된 CSS의 조건은 무엇일까???

물론! 고려해야 될 다양한 변수들(File Size, Maintainability)이 있겠지만

Browser가 효율적으로 Rendering 할 수 있도록 작성하는 부분에 초점을 맞춰보자!

 

{ How Browser Render it }

  1. HTML를 Parsing하여 DOM Tree를 생성한다.
  2. StyleSheet를 Parsing 하여 Style Rules을 추출한다.
  3. Style 정보를 DOM Tree의 각각의 Node에 적용하여 Render Tree를 생성한다.
실제 Browser의 Rendering Process는 아래와 같다. 출처
Webkit Rendering Flow

Webkit Rendering Flow

 

Gecko Rendering Flow

Gecko Rendering Flow

 이번 글에서 다루고 싶은 내용은 Webkit Engine에서 ‘Attachment’라고 부르는 과정을 Browser가  빠르게 진행할 수 있도록 CSS를 작성하는 법이다!

* Gecko나 Webkit등의 Browser Engine이 Open Source로 개발되고 있기 때문에 비슷한 알고리즘을 갖는다.

 

{ From Right to Left }

Browser는 CSS Selector를 오른쪽에서 왼쪽으로 읽는다.

  1. ul > li > a
  2. ul > li > a
  3. ul > li > a

Style System은 오른쪽 끝에서부터 왼쪽으로 Match Rule을 진행한다.

이 작업은 왼쪽 끝에 도달해서 Match 되거나,

Mismatch 되어 discard(abandon)될 때까지 반복된다.

참고 : https://developer.mozilla.org/en/Writing_Efficient_CSS

 

 

{ Guidelines for Effcient CSS }

1. ID Rule에 Class Rule이나 Tag Rule을 추가하지 말자.

ID는 유일한 식별자로 사용되기 때문에 ID Rule에 추가된 Class Rule이나 Tag Rule은 Matching Process를 느리게 만든다. (Style System은 항상 왼쪽 끝까지 검사를 한다.)

 

2. Class Rule에 Tag Rule을 추가하지 말자!

1번과 비슷한 이유로 Class는 중복되지 않게 사용할 수 있기 때문에 Class Rule에 Tag Rule을 추가하지 말자! 이때 Class 이름은 최대한 Semantic하게 가져가는 것이 좋다!!

 

3. 최대한 우선순위가 높은 Category Rule을 사용하자!

Style System에서 사용되는 4개의 주요 Category는 아래의 우선순위를 갖는다.

Tag와 Universal 대신 ID 또는 Class Category를 사용하자.

  1. ID Rules
  2. Class Rules
  3. Tag Rules
  4. Universal Rules


 

4. Descendant Selector 사용을 피하자!

Descendant Selector는 CSS에서 가장 비효율적으로 적용되는 Selector이다.

특히 Descendant Selector가 Tag Rule 또는 Universal Rule과 함께 사용되었을 때 최악의 결과를 발생시키기 때문에 함께 사용하는건 반드시 피하자!!

* 성능상의 이슈로 Firefox User Interface CSS에서는 Descendant Selector를 Tag / Universal Category와 함게 사용하는 것을 금지시켰다.

4-1.  Don’t Overqualifying Selectors!

만약 아래와 같이 Selector를 작성하였다면 Browser는 Page내의 모든 a element를 찾은 뒤  .social-nav라는 class를 갖는 조상이 있는지 확인한 뒤 그 조상의 조상 중에 .wrapper를 class로 갖는 div element가 있는지 확인할 것이다. 설명하기도 힘들 정도로 복잡한 과정이다. Page내에 a element가 1000개 이상 존재한다고 생각하면 끔찍한 결과로 이어진다.

 

 

5. Child Selector와 Tag Category Rule을 함께 사용하지 말자!

 

6.  상속(inheritance)을 이용하자!

어떤 속성들이 상속되는지를 알고, 이를 이용하면 Match Time + @를 줄일 수 있다!

list-style-image 속성이 상속된다는 특징을 이용하면 위와 같이 Class Category Rule을 사용하던 Selector를 ID Category Rule을 사용하도록 변경할 수 있다.

‘BAD’에서는 모든 .menu-thumbnail이 #menuItem에 포함되어 있는지 확인해야 했지만 ‘GOOD’에서는 #menuItem만 확인하면 되기 때문에 .menu-thumbnail을 Class로 갖는 Node가 다수일 경우 성능에 이점이 있다.

 

7. 사용하지 않는 CSS Selector를 제거하자!

비교대상을 줄임으로써 Match Time을 줄일 수 있다.

 

{ References }

– https://developer.mozilla.org/en/Writing_Efficient_CSS

– http://css-tricks.com/efficiently-rendering-css/

– https://developers.google.com/speed/docs/best-practices/rendering?hl=ko

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

 

{ Used Term }

– Style System : DOM Node에 Style 정보를 Matching하는 System.
– Key Selector : Last part of the selector (The part that matches the element being matched, rather than its ancestors.)

 

 

며느리도 안 알려주는 CSS3 Text 효과

1. Text Inset

Photoshop등을 이용해 Text가 들어간 (de-bossed, textpress, inset) 효과를 주었던걸

CSS3의 Text Shadow 효과를 응용해서 흉내낼 수 있다.

I’m Inset Text

위의 그림과 같은 효과를 내기 위해서는 2개의 Text Shadow를 사용해야 한다.

Text위로 Text보다 어두운 색의 Text Shadow를 추가하고,

Text밑에 Text보다 밝은 색의 Text Shadow를 추가하면 위와 같은 효과가 나온다.

실제 사용한 코드는 아래와 같다.

2. Text Stroke

Text에 Outline을 추가하는 CSS.

Webkit Browser들은 -webkit-text-stroke를 이용해서 쉽게 Text에 Outline을 추가할 수 있고,

그 외의 Browser들은 TextShadow를 좌/우/위/아래 4방향으로 주어서 Outline 효과를 흉내낼 수 있다.

I’m Outlined Text

실제 사용한 코드는 아래와 같다

3. Text를 Drag할 때 배경색 설정

::selection이라는 CSS Pseudo Class를 이용해서 Text 또는 영역을 Drag할 때 배경색을 변경 할 수 있다.

Mozilla 계열만 vendor prefix를 사용해서 -moz-selection로 적용한다.

Drag ME!

4. 대문자 변환, 소문자 변환, Capitalize

CSS의 text-transform 속성을 이용하면 Text를 대문자/소문자/Capitalize를 쉽게 할 수 있다.

I’m Uppercase

I’m lowercase

I’m capitalize

CSS를 이용하여 Text에 Lens Flare Effect

CSS3 속성을 이용하여 Text에 Lens Flare 효과를 적용
출처 : http://firejune.com/page/43

NEW LENS FLARE

Older posts

© 2017 Regular Motion

Theme by Anders NorenUp ↑