모바일 퍼블리싱에서 자주 사용하는 css3 속성들

1. Gradient background

background: linear-gradient(to bottom right, red , blue);

background: radial-gradient(red 5%, green 15%, blue 60%);




css3의 등장 이전에는 그라디언트 효과를 내기 위해 이미지를 사용했지만 css3 그라디언트 속성을 이용해 표현함으로써 이미지 다운로드 시간을 줄일수 있고, 화면 확대시 이전에 비해 더욱 선명한 결과물을 얻을 수 있는 장점이 있다.

2. border-radius

div{border: 2px solid #a1a1a1;border-radius: 25px;}




둥근 모서리 처리를 위해 기존의 퍼블리싱 방식처럼 각 모퉁이 마다 이미지를 사용할 필요없이 border-radius 속성을 이용해 css 코드만로 쉽게 둥근 모서리 박스를 만들 수 있다.

3. text-shadow

h1{text-shadow: 5px 5px 5px #FF0000;}




텍스트에 그림자 효과를 부여해 가시성과 디자인 퀄리티를 높여 줄 수 있다.

4. box-shadow

div{box-shadow: 10px 10px 5px #888888;}




박스에 그림자 효과를 부여해 기존에는 이미지로 표현해야 했던 부분을 css3 코드로 표현이 가능하다.

모바일에서 css image sprites 기법 활용시 장점

1. Css Image Sprites (이미지 스프라이트)란?

- 웹 페이지에 사용되는 여러 개의 이미지들을 단 한 개의 파일로 만든 후 css를 통해서 배경으로 처리해 적당한 이미지 영역을 불러와 웹 브라우저가 불러와야 하는 파일의 갯수를 줄이고자 할 때에 사용될 수 있는 방법이다.

2. Css Image Sprites 기법을 활용하는 이유? (장점)

- 웹 브라우저에서 웹 페이지를 불러올 때 다양한 요소들이 로딩 속도에 영향을 미치는데 그 중 가장 큰 영향을 미치는 것이 파일의 용량은 물론 파일의 개수다.

웹 브라우저에서 불러와야 하는 파일의 개수가 늘어나면 늘어날수록 로딩 속도가 느려진다.

왜냐하면 HTTP를 통해서 파일이 전송될때에 서버 응답시간 만큼의 지연시간이 발생하기 때문이다. 예를들어 웹 페이지에 10개의 이미지를 사용했다면 10번을 서버에게 요청하고 10번의 이미지 다운로드 작업을 하여 사용자의 컴퓨터에서 보이게 되므로 그만큼 로딩속도가 느려진다.

또 이미지 파일을 세분화 시킬 필요없이 하나의 파일로 관리할 수 있다는 점이다.

3. Css Image Sprites의 원리

- sprites 이미지를 지정 (background:url….)하고 해당 이미지가 시작되는 위치좌표 (background-position)와 가로크기(width), 세로크기(height)를 정의한다.

예시)

.spritesImg {

background:url(images/ico_home.gif) no-repeat 0 0;

           background-position:0 -50px;

           width:15px;

           height:15px;

}

[Don’t use import!] css 파일을 페이지 내에 link태그로 로드시 장점

css 파일을 import 하는 방법은 다음의 두가지가 있다.

1. link태그 사용 <link rel='stylesheet' href='style.css'>
2. import 속성 사용 @import url('style.css');

결론적부터 말하면 @import 방식과 <link> 방식중 <link>방식을 활용하는 것이 페이지의 로딩 속도 향상 측면에서 뛰어나다.

## 각각 @import 방식과 <link>방식 사용시 속도 비교

1. @import - @import

<style>
@import url(“a.css”);
@import url(“b.css”);
</style>

이렇게 import를 연속으로 쓰는것은 페이지 로딩중에 스크립트오류가 발생할 수 있음에도 불구하고(순서가 어떻든 스크립트가 먼저 로딩되기 때문) 페이지의 속도 면에서는 문제될것이 없다. 하지만 style과 import를 같이 사용할 경우 속도 문제가 발생한다.

2. Link - @import

<link rel=”stylesheet” type=”text/css” href=”a.css”> <style> @import url('b.css'); </style> IE(6,7,8)에서는 이러한 방법이 stylesheets를 나눠서 다운로드하는 것을 야기시킨다. 페이지 속도 향상의 주요한 내용중 하나는 정보를 병행해서 읽어드리는 것이다.  하지만 아래 그래프와 같이 html, link, import식으로 나눠서 읽어들여 페이지의 속도를 느리게 되는 것을 야기시킨다.

3. Link with @import

<link rel=”stylesheet” type=”text/css” href=”a.css”>

In a.css

@import url('b.css');

위와 같은 방식은 병행적으로 스크립트를 로딩하는것을 막는다.

즉 아래와 같이 a.css를 다운로드 후 b.css를 fetch하기 시작하는 것을 볼 수 있다.

결론적으로 link에서의 import사용은 병행적인 다운로드를 할 수 없게 한다.

4. Link blocks @import

<link rel=”stylesheet” type=”text/css” href=”a.css”>

<link rel=”stylesheet” type=”text/css” href=”proxy.css”>

In proxy.css

@import url('b.css');

a.css는 link가 사용되어 졌고, proxy.css는 새로운 link로 연결되었다. proxy.css는 @import로 되어있는 b.css를 포함하고 있다.

아래의 첫번째 이미지는 IE에서의 결과이다. 읽어들인 순서는 1.html, 2.a.css, 3.proxy.css, 4.b.css이다.

신기하게도 a.css가 끝날때까지 b.css를 다운로드하지 않았다. 다른브라우져에서는

이런 현상이 발생되지 않았으며 아래의 두번째 이미지에서 속도가 빠르다는 결과를 볼 수 있다.

5. many @imports

@import url('a.css');

@import url('b.css');

@import url('c.css');

@import url('d.css');

@import url('e.css');

@import url('f.css');

<script src='one.js' type='text/javascript'></script> 

@import를 많이 사용한다면 IE에서는 순서가 뒤섞여 다운로드 된다. 이 여섯개의 스타일 예는 스크립트 로드후에 다운로드 된다. 아래 이미지를 보면 가장 긴 빨간선이 스크립트이고 4초의 로드시간이 걸린다.

스크립트 부분이 리스트의 마지막에 있음에도 불구하고 IE에서 가장 처음 다운로드된다.

만약 스크립트코드를 포함한다면 stylesheeets (ex:getElementsByClassName등)로부터 적용된 스타일들에 의존한다면 예상할 수 없는 결과들이 일어날것이다.

왜냐하면 개발자들이 스크립트를 맨 마지막목록에 넣었음에도 불구하고 style이 로드되기 이전에 먼저 로드되기 때문이다.

6. Link-Link

<link rel='stylesheet' type='text/css' href='a.css'>

<link rel='stylesheet' type='text/css' href='b.css'>

위와같이 link를 사용한 스타일시트 사용방법이 가장 안전하다. Link를 이용한다면 모든 브라우져에서의 병행 다운로드를 보장한다. 아래 이미지를 보면 Link를 사용하여 개발자가 원하는대로 순서대로 다운로드되는 것을 보장한다.

 

  

원문 링크 - http://www.stevesouders.com/blog/2009/04/09/dont-use-import/