※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음.

이번에는 CSS3에서 추가된 내용을 정리해 보자. CSS3 속성들은 대체로 브라우저마다 부분적으로만 구현할 수 있기 때문에 대부분의 CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤더 프리픽스(CSS3 Vendor Prefix) 를 붙여서 사용한다. 다음과 같이 4가지 종류가 있으며 CSS3의 속성들은 대부분 IE8 이하에서는 표현되지 않는다. http://www.w3schools.com 에 가면 어느 브라우저가 그 속성을 지원하는지 나타나 있다.

• webkit --- 웹킷 방식 브라우저용. 사파리, 크롬
• moz --- 게코 방식 브라우저용. 모질라사 파이어폭스
• o --- 오페라
• ms --- 마이크로소프트사 익스플로러(버젼 9, 10 이상)

예를 들어 파이어폭스에서 배경에 그라디언트를 주고자 할 때 background:-moz-linear-gradient(top,#06f,#fff);와 같이 사용해야 한다는 것이다.

경계선(Borders)

Borders 속성을 할 수 있는 일은 모서리를 둥글게 하는 것 외에 네 모서리 중 원하는 부분만 둥글게 표현하여 원, 반원, 4분의 1조각짜리 원 등을 표현해 낼 수도 있다. 그리고 거기에 곁들여 박스에 그림자를 드리우는 box-shadow 속성과 테주리에 무늬를 부여하는 border-immages 속성까지 함께 알아보도록 하자.

border-radius : 20px;

네 모서리가 20px 만큼 둥근 박스를 만들어준다. 아래 그림과 같이 둥근 모서리를 동그란 원의 테두리로 생각했을 때 그 원의 반지름을 radius값으로 표현한다.

<div style="border:2px solid red; width:300px; height:200px; border-radius:20px;"></div>

border-radius : 20px 40px 60px 80px;

좌측 상단 모서리 반지름이 10px, 우측 상단 모서리 반지름이 20px, 우측 하단 모서리 반지름이 30px, 좌측 하단 모서리 반지름이 40px인 박스를 만들어준다. 즉, 네 개의 수치가 좌측 상단부터 시계방향이다. 값은 박스의 크기보다 적게 설정해야 테스트가 가능하다.

<div style="border:2px solid red; width:300px; height:200px; border-radius:20px 40px 60px 80px;"></div>

width : 200px; height : 200px; border-radius : 100px;

이렇게 border-radius값을 width, height값의 1/2로 지정하면 동그란 원을 표현할 수 있다.

<div style="border:2px solid red; width:200px; height:200px; border-radius:100px;"></div>

width : 200px; height : 100px; border-radius : 100px 100px 0 0;

가로가 긴 박스이므로 네 모서리 중 마주하는 두 곳의 반지름만 width, height값의 1/2로 지정하여 반원 모양의 박스를 표현할 수 있다.

<div style="border:2px solid red; width:200px; height:100px; border-radius:100px 100px 0 0;"></div>

width : 100px; height : 200px; border-radius : 200px 0 0 0;

네 모서리 중 한쪽의 반지름만 width, height값의 2배로 지정하여 1/4 원 모양의 박스를 표현할 수 있다.

<div style="border:2px solid red; width:100px; height:100px; border-radius:200px 0 0 0;"></div>

box-shadow : inset 0px 0px 20px 15px rgba(18, 52, 86, 0.8);

• inset --- inset을 써주면 박스의 그림자가 안쪽으로 퍼지게 된다.
• 0px --- 그 다음 수치는 가로로 밀리는 폭인데 inset일 때 값을 주면 예쁘지 않으니 주지 않겠다.
• 0px --- 그 다음 수치는 세로로 밀리는 폭이다.
• 20px --- 그 다음 수치는 그림자가 퍼지는 정도이다.
• 15px --- 그 다음 수치는 그림자와 박스의 거리이다.
• rgba(18, 52, 86, 0.8); --- 마지막은 그림자의 색상이다. 괄호 안은 red, green, blue 투명도 순으로 입력한다.

<div style="border:2px solid rgb(18, 52, 86); width:300px; height:200px; border-radius:30px; box-shadow:inset 0 0 20px 15px rgba(18, 52, 86, 0.8);"></div>

border-image : url(images/border.png) 27 27 round;

지정한 이미지를 테두리에 무늬로 칠해준다. 단, 이 속성은 아쉽게도 크롬 브라우저에서만 정상 실행된다. 원래 이미지의 입자가 27px이면 수치를 27로 기입하듯이 이미지 길이와 같은 수치를 쓸 때 가장 정확하게 나타나고 줄일 수도 있다.

배경(Backgrounds)

Backgrounds 속성에는 한 가지 색이 아닌 여러 색 단계를 원형과 선형으로 점진적으로 칠해주는 그라디언트 칠 기능이 있으며 배경 이미지의 위치나 크기를 조절할 수도 있다. CSS3 속성 중 가장 많이 변경, 발전된 부분이라고 볼 수 있는 배경 관련 속성을 시작해 보자.

gradient 속성

이 속성은 반드시 밴딩 프리픽스를 붙여서 실행한다.

background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#60),color-stop(2,#00));

• 유형 : 선형 그라디언트(linear)
• 위치 : 좌측 아래부터 좌측 위 방향
• 색상 : 시작(0)색상 - #f60, 끝(1)색상 - #f00

background:-moz-linear-gradient(top,#60,#f00);

• 시작 위치 : 위
• 시작 색 : #60, 끝 색 : #f00

background-image:-webkit-gradient(radial,center center,10,center center,90,from(#60),to(#f00) );

• 유형 : 원형 그라디언트(radial)
• 시작 위치 : center, 반지름 : 10
• 끝 위치 : center, 반지름 : 90
• 시작 색 : #f60, 끝 색 : #f00

background-image:-moz-radial-gradient(center 45deg, circle closet-corner, #f60 10%, #f00 70% );

• 시작 위치 : 기본값 center
• 각도 : 45도
• 모양 : circle-원형( ecllipse는 타원 ) webkit은 타원 안 됨
• 크기 : 네 가지. (webkit은 크기 조절 안 됨)
  closet-side, contain --- 그라데이션이 가장 가까운 면과 만난다.
  closet-corner --- 가장 가까운 상자에 꽉 찬다.
  farthest-side --- 상자의 가장 멀리 있는 면과 만난다.
  farthest-corner,cover --- 가장 멀리 있는 상자에 꽉 찬다.

background-size

이제는 배경 이미지의 크기까지 조절할 수 있게 되었다. 형식은 다음과 같다.

background-sizee : 80px 60px;

배경 이미지의 가로 크기 80px, 세로 크기 60px

background-size : 150px;

배경 이미지의 가로 크기 150px, 세로 크기 150px

background-size : container;

배경 이미지의 크기를 박스의 세로 크기에 맞춤

background-size : cover;

배경 이미지의 크기를 박스의 가로 크기에 맞춤

background-origin

이 속성으로 배경 이미지의 한계를 어디로 할지 정할 수 있게 되었다.

background-origin : border-box;

background-orrigin : padding-box;

박스의 안 여백을 포함한 부분까지를 경계로 잡는다.

background-origin : content-box;

박스의 안 여백을 제외한 부분까지만 경계로 잡는다.

multi-background

CSS3에서는 배경 이미지로 여럿을 지정할 수 있고 위치와 기타 속성도 각각 설정할 수 있다.

background-image : url("images/bg.png"), url("images/bg_line.gif"), url("images/blueheart.png");

배경으로 세개의 이미지를 지정함.

background-repeat : repeat-x, repeat-x, no-repeaat;

세 개의 배경 이미지 중 1, 2번은 가로 반복, 3번은 반복 없음으로 설정함.

background-position : top, bottom, center;

세개의 배경 이미지 중 1번은 위, 2번은 아래, 3번은 정중앙으로 위치를 정함.

background-attachment : fixed, fixed, fixed;

세 개의 배경 이미지 모두 화면에 고정 시킴.

background-clip

배경색을 어디까지 칠해 줄 것인지 결정하는 속성이다. background-origin과 의미가 비슷하다.

background-clip : content-box;

배경색이 콘텐츠 부분까지만 칠 됨

background-clip : padding-box;

배경색이 안 여백 영역까지 칠 됨

background-clip : border-box;

배경색이 테두리 영역까지 칠 됨

문자 효과(Text Effects)

글자에 주는 효과들은 그림자, 줄 바꿈, 글꼴 설정 등이 있다.

text-shadow

그래픽 프로그램의 도움 없이도 글자에 그림자를 줄 수 있게 되었다.

text-shadow : 1px -2px #ccc;

글자에 우측으로 1px, 위쪽으로 2px 위치에 연회색으로 그림자를 드리워준다.

word-wrap

영문을 띄어쓰기 없이 길게 입력하면 width값을 주어도 박스 밖으로 튀어 나오게 되는데 이것을 가로 폭에 맞추어 적당히 잘라 다음 줄로 내려오도록 해준다.

font-face

기본 글꼴이 아닌 경우, 글꼴 파일 없이는 인터넷 화면에 뜨게 할 수 없으므로 사용자들도 같은 글꼴로 볼 수 있도록 웹 폰트를 설정하는 법을 알아보자.
웹 폰트는 유료가 많으니, 무료 폰트인 나눔고딕을 예로 들고, IE8 이하를 제외한 모든 브라우저에서 지원 가능한 woff(Web Open Format Font)포맷으로 실행해 보도록 하자. 절차는 다음과 같다.

글꼴을 다운 받거나 구매한 뒤 내 업로드할 폴더를 정해 올린다.

NanumGothic.woff
NanumGothicBold.woff
NanumGothicExtraBold.woff

CSS에서 다음과 같이 글꼴 이름, 글꼴 파일 경로, 파일 유형을 설정한다.

@font-face {font-family:"NGothic";src:url("../font/NanumGhothic.wooff") format("woff");}

@font-face  {font-family:"NGothicB", src:url("../font/NanumGothicBold.woff") format("woff");}

2font-face {font-family:"NGothicEB", src:url("../font/nanumGothicExtraBold.woff") format("woff");]

선택자에 지정한다.

h1 { font:bold 2em "NGothicEB";}

2차원 변형(2D Transform)

박스를 회전(rotate), 확대 축소(scale), 이동(translate), 찌그러뜨리기(skew)할 수 있게 되었다.

transform : translate(20px, -30px);

박스를 우측으로 20px, 위로 30px 이동시킴

transform : rotate(30deg);

박스를 시계 방향으로 30도 회전시킴

transform : scale(1.3, 0.7);

박스를 가로 130%로 확대, 세로 70%로 축소시킴

transform : skew(30deg, 20deg);

박스를 가로 30도, 세로 20도로 찌그러뜨림.

속성 전환(Transitions)

Transition은 background, color, height, width, transformation 등의 속성들에 애니메이션을 적용하는 것이다. 형식은 다음과 같다.

transition : property duration timingfunction;

• property --- 애니메이션 시킬 속성을 사용함
• duration --- 시작해서 끝날 때까지 시간을 초 단위로 지정함
• timigfunction --- 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다.

  linear --- 등속 cubic-bezier(0, 0, 1, 1)와 같음.
  ease --- 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)와 같음.
  ease-in : 점점 빨라짐. cubic-bezier(0.42, 0, 1, 1)와 같음.
  ease-out : 점점 느려짐. cubic-bezier(0, 0, 0.58, 1)와 같음.
  ease-in-out : 처음과 끝이 느림. cubic-bezier(0.42, 0, 0.58, 1)와 같음.
  cubic-bezier(N,N,N,N) : 값을 입력하여 가속/감속을 조작.

transition-delay : 0.5s;

0.5초 지난 후 작동함.

transition : background 0..5s ease, color 0.3s linear;

다중으로 여러 속성을 적용 시킬 수 있음.

애니메이션(Animation)

박스의 크긴나 위치 또는 색상 등의 속성을 시간에 따라 변화를 줄 수 있도록 키프레임을 설정하여 여러 단계를 연속적으로 실행할 수 있다.
애니메이션 명령을 내리는 것과 별도로 변경 시점을 지정하기 위해 키프레임을 설정해야 하는데 이때에도 벤더 프리픽스를 붙여준다.

animation:myfirst 5s infinite;

• myfirst로 지정된 키프레임에 설정된 대로 5초 동안 애니메이션 할 것을 명령함.
• infinite : 계속 반복함.
  (animation-direction을 alternate로 설정하면 처음에서 끝을 지그재그로 반복함)

@keyframes myfirst
{
0% {background:#c00; width:140px; height:120px;}
25% {background:#00c; width:450px; height:120px;}
50% {background:#808; width:450px; height:180px;}
75% {background:#080; width:140px; height:180px;}
100% {background:#c00; width:140px; height:120px;}

• 시작할 때 박스 크기는 140px * 120px 이고 색상은 자주색
• 설정 시간의 1/4이 지날 때에 박스 크기는 450px * 120px 이고 색상은 파란색
• 설정 시간의 2/4이 지날 때에 박스 크기는 450px * 180px 이고 색상은 초록색
• 설정 시간의 3/4이 지날 때에 박스 크기는 140px * 180px 이고 색상은 보라색
• 설정 시간의 마지막에 다다랐을 때에 박스 크기와 색상은 다시 원래대로 되돌아옴

다단 편집(Multiple Colume)

CSS3에서는 float이나 position을 이용하지 않고도 다단을 편집할 수 있도록 멀티 칼럼을 지원하고 있다.

column-count : 3;

박스의 내용을 3단으로 하기로 한다.

column-gap : 20px;

각 단 사이의 간격을 20px로 하기로 한다.

column-rule : 2px dotted brown;

단과 단 사이에 구분선을 줄 수 있고 그 선의 모양을 2px 두꼐의 점선으로 한다.

사용자 환경(User Interface)

User Interface에서는 박스의 크기를 조절하거나 박스의 크기 설정 방법을 설정하거나 border 밖에 테두리를 줄 수 있다.

box-sizing

box-sizing : content-box;

border가 박스 크기에 포함되지 않는다.

box-sizing : border-box;

border가 박스 크기에 포함된다.

박스의 크기에 border의 두께가 포함되지 않는다. 그런데 width값을 픽셀로 줄 수 없는 경우가 간혹 발생하는데 그 때에는 border의 두께를 width에 포함시켜 줄 수 있으면 좋다.

resize

박스의 모서리를 잡아당겨 크기를 조절할 수 있다. (가로 : horizontal, 세로 : vertical, 양쪽 : both)

outline

border를 깜싸는 테두리를 또 줄 수 있다.

outline-offset --- border와 outline 사이의 거리
outline-width --- outline의 두께
outline-color --- outline의 색상