목차

1. CSS3 배경 및 변화 된 점
2. 선택자(Selector)
3. 벤더 별 확장 속성 및 브라우저 엔진
4. 이번 연재에서 다룰 CSS3주요속성
5. CSS3의 새로운 주요속성을 이용하여 간단한 효과주기
1. Background & Borders / border-image
2. border-radius
3. Box-shadow
4. Border-radius 와 Box-shadow 사용
5. Background-size
6. Multiple background
7. rgba(R,G,B,A) / hsla(H,S,L,A)
8. gradient
9. opacity
10. text-shadow
11. text-overflow
12. resize
13. multi-column layout
6. 마치며

CSS3 배경 및 변화 된 점

시간이 갈수록 시맨틱한 웹, 웹표준과 웹접근성이 점점 강조되는 때인 지금 모든 웹사이트가 HTML(구조)+CSS(표현)+JS(동작) 세가지 계층을 분리하여 웹을 제대로 만드는 것이 중요한 이슈가 되면서 점점 세가지를 분리하고 디자인 컨텐츠를 좀 더 다양하고 모듈화 된 형태로 개발할 필요성을 느꼈기 때문에 CSS3가 그에 발맞추어 개발 진행 중이다.

아직 완전한 형태의 표준은 아니나 CSS3의 대부분의 기능을 지원하는 브라우저가 이미 나온 상태이며 최신 버전의 브라우저 들이 나올 때마다 더 많은 부분을 수용하고 포함할 것이다.

CSS3를 이용해 모바일용 웹 애플리케이션은 만들어지고 있지만, 일반 데스크톱 웹 환경에서는 아직 모바일에 비해 덜 진행된 상태이다. 우리나라의 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 IE계열(6~8)이 CSS3를 거의 지원하지 않는다.

하지만 그렇다고 실망하지는 말자! IE(8이하)도 완전히 사용하지 못하는 것은 아니다. Javascript를 이용한 Filter를 이용하여 여러 속성들의 표현을 흉내 낼 수 있다. 그리고 IE9 Beta 버전에서는 CSS3의 대부분의 속성들을 지원하려고 개발진행 중에 있다.

선택자(Selector)

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

Pattern	Meaning	S5	C8	F3.6	O11	I9b	I8	I7	I6
#id	id로 지정된 요소 선택	O	O	O	O	O	O	O	O
.class	class로 지정된 요소 선택	O	O	O	O	O	O	O	O
E	E 요소를 선택	O	O	O	O	O	O	O	O
E:link	방문하지 않은 E를 선택	O	O	O	O	O	O	O	O
E:visited	방문한 E를 선택	O	O	O	O	O	O	O	O
E:hover	마우스가 올라가 있는 동안 E를 선택	O	O	O	O	O	O	O	O
E:active	마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택	O	O	O	O	O	O	O	X
E:focus	focus가 머물러 있는 동안 E를 선택	O	O	O	O	O	O	X	X
E:first-line	E 요소의 첫 번째 라인 선택	O	O	O	O	O	O	O	X
E:first-letter	E 요소의 첫 번째 문자 선택	O	O	O	O	O	O	O	X
*	모든 요소 선택	O	O	O	O	O	O	O	O
E[foo]	‘foo’ 속성이 포함된 E를 선택	O	O	O	O	O	O	O	X
E[foo="bar"]	‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택	O	O	O	O	O	O	O	X
E[foo~="bar"]	‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택	O	O	O	O	O	O	O	X
E[foo|="en"]	‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택	O	O	O	O	O	O	O	X
E:first-child	첫 번째 자식 요소가 E라면 선택	O	O	O	O	O	O	O	X
E:lang(fr)	HTML lang 속성의 값이 ’fr’로 지정된 E를 선택	O	O	O	O	O	O	X	X
E::before	E 요소 전에 생성된 요소 선택	O	O	O	O	O	O	X	X
E::after	E 요소 후에 생성된 요소 선택	O	O	O	O	O	O	X	X
E>F	E 요소의 자식인 F 요소 선택	O	O	O	O	O	O	O	X
E+F	E 요소를 뒤의 F 요소 선택	O	O	O	O	O	O	O	X
E[foo^="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택	O	O	O	O	O	O	O	X
E[foo$="bar"]	‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택	O	O	O	O	O	O	O	X
E[foo*="bar"]	‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택	O	O	O	O	O	O	O	X
E:root	문서의 최상위 루트 요소 선택	O	O	O	O	O	X	X	X
E:nth-child(n)	그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-last-child(n)	n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택	O	O	O	O	O	X	X	X
E:nth-of-type(n)	E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:nth-last-of-type(n)	E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택	O	O	O	O	O	X	X	X
E:last-child	E 요소 중 마지막 자식이라면 E 선택	O	O	O	O	O	X	X	X
E:first-of-type	E 요소 중 첫번째 E 선택	O	O	O	O	O	X	X	X
E:last-of-type	E 요소 중 마지막 E 선택	O	O	O	O	O	X	X	X
E:only-child	E 요소가 유일한 자식이면 선택	O	O	O	O	O	X	X	X
E:only-of-type	E 요소가 같은 타입이면 선택	O	O	O	O	O	X	X	X
E:empty	텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택	O	O	O	O	O	X	X	X
E:target	E의 URI의 대상이 되면 선택	O	O	O	O	O	X	X	X
E:enabled	활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:disabled	비활성화된 폼 컨트롤 E요소 선택	O	O	O	O	O	X	X	X
E:checked	선택된 폼 컨트롤(라디오버튼,체크박스)을 선택	O	O	O	O	O	X	X	X
E:not(s)	s가 아닌 E 요소 선택	O	O	O	O	O	X	X	X
E~F	E 요소가 앞에 존재하면 F를 선택	O	O	O	O	O	O	O	X

CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더	S5	C8	F3.6	O11	I9	I8	I7	I6
벤더확장 속성	-webkit-	-webkit-	-moz-	-o-	-ms-/filter	-ms-/filter	-ms-/filter	-ms-/filter
브라우저 엔진	Webkit	Webkit	Gecko	Presto	Tasman

브라우저 벤더 별 확장 속성

이번 연재에서 다룰 CSS3주요속성

CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.

Module	Attribute	Effect	S5	C8	F3.6	O11	I9	I8	I7	I6
Background &border	border-image	테두리 이미지효과	O	O	O	O	X	X	X	X
	border-radius	테두리 라운드효과	O	O	O	O	O	X	X	X
	box-shadow	박스 그림자	O	O	O	O	O	X	X	X
	multiple backgrounds	배경 여러개 넣기	O	O	O	O	O	X	X	X
	radient	그라디언트 효과	O	O	O	X	X	X	X	X
Color	rgba(R,G,B,A)/HSLA	칼라와 투명도효과	O	O	O	O	O	X	X	X
	opacity	이미지 투명도효과	O	O	O	O	X	X	X	X
Text	text-shadow	글자 그림자효과	O	O	O	O	X	X	X	X
	text-overflow	글자 넘칠 때 자동 개행	O	O	X	O	O	O	O	O
User-Interface	resize	박스 사이즈 조절효과	O	O	O	O	X	X	X	X
Other modules	multi-column layout	문단 다중 칼럼효과	O	O	O	O	X	X	X	X

본 연재에서 배울 CSS3 속성
IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.

CSS3의 새로운 주요속성을 이용하여 간단한 효과주기

IE(6~8)을 제외한 모든 브라우저가 이미 대부분의 CSS3 속성들을 지원하고 있다. 하지만 아직 표준이 완벽하게 정해진 것도 아니고 각 벤더들 마다 속성들을 표시하는 방법이나 랜더링하는 차이가 있다.

본 장에서는 CSS3의 새로운 주요 속성을 이용하여 간단한 예제와 함께 속성들을 익히는 과정이다.

테스트 환경으로서는 현재까지 웹킷(webkit)계열 브라우저가 CSS3를 가장 잘 지원하기 때문에 필자는 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다. 독자들은 속성들의 기능들을 확인하고 대표되는 여러 브라우저에서 다양하게 테스트 하여 각각의 차이점도 익혀보면 좋을 것이다.

Common Source

<!DOCTYPE html>
<html lang="ko">
<head>
<title> 예제 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  body{
    font-size:12px;
    line-height:1.5em;
  }
  /*적용할 DIV CSS 들어가는 곳*/
</style>
</head>
<body>
  <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
    이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
    완벽하게 문서의 크기를 줄일 수 있습니다.<br>
    그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
  </div>
</body>
</html>

위와 같이 공통된 html 마크업을 가지고 css부분만 수정하거나 최소한의 마크업만 변경하여 모든 테스트를 하려고 한다. 각각 예제에 이슈사항이 있으면 미리 명시하고 추가되는 부분은 별도 표기를 하였으니 확인하면 된다.

Background & Borders
border-image

기존엔 border에 색상만 표현하는 게 가능했었지만 CSS3에서는 테두리에 이미지를 넣을 수 있고, 옵션을 통해 측면마다 다른 이미지 및 다양하게 표현할 수 있다.

Source

div{
  padding:10px;
  border-width:27px;
  -webkit-border-image:url(/assets/img/logo2.png) 27 27 27 27 round;
  border-image:url(/assets/img/logo2.png) 27 27 27 27 round;
}

View

속성사용방법

border-image:url(①/assets/img/logo2.png) ②27 ③27 ④27 ⑤27 ⑥round;

① – 이미지 URL ② – top ③ – right ④ – bottom ⑤ – left ⑥ -이미지 반복 방법 (round:순환, stretch:늘이기, repeat:타일형식 반복, space:타일형식으로 반복되나 마지막 이미지 잘릴 수 있음)

좀 더 디테일하게 적용할 수 있는 속성들:

• border-top-image:
• border-right-image:
• border-bottom-image:
• border-left-image:
• border-corner-image:
• border-top-left-image:
• border-top-right-image:
• border-bottom-left-image:
• border-bottom-right-image:
• border-image-source: url(…);
• border-image-slice:
• border-image-widths:
• border-image-outset:

border-radius

이젠 CSS만으로 테두리 모서리를 둥글게 표현이 가능하다. 파이 값을 조절 함으로써 둥근 모서리 크기를 조절 할 수 있다.

Source

div{
  padding:10px;
  border:solid 5px #3399CC;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

View

속성사용방법

border-radius:①25px;

① – 파이 크기

좀 더 디테일하게 적용할 수 있는 속성들

• border-top-radius:
• border-right-radius:
• border-bottom-radius:
• border-left-radius:
• border-top-left-radius:
• border-top-right-radius:
• border-bottom-left-radius:
• border-bottom-right-radius:

Box-shadow

CSS만으로도 포토샵 같은 이미지편집툴 없이도 멋진 그라데이션이 들어가 있는 테두리 그림자를 설정 할 수 있다. 테두리 바깥쪽, 안쪽 모두 그림자를 생성할 수 있으며 그림자의 크기, 색상, 투명도를 조절할 수 있다.

Source

div{
	padding:10px;
  border:#66ccff 3px solid;
  -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
}

View

속성사용방법

box-shadow:①rgba(106,198,247,0.3) ②-5px -5px 5px, ③rgba(106,198,247,0.7) ④5px 5px 5px ;

• Left ① – RGB색상,투명도 ② – 가로,세로,blur 오프셋 크기
• Right ③ – RGB색상,투명도 ④ – 가로,세로,blur 오프셋 크기

추가 옵션 inset – 안쪽으로 그림자 생김

Border-radius 와 Box-shadow 사용

두 속성을 같이 사용하여 둥근 모서리에 테두리 그림자 주는것도 간단한 CSS3 코드 몇 줄로 가능하다.
Source

div{
  padding:10px;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  border:#cbef38 3px solid;
-webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
}

View

Background-size

배경이미지 크기를 임의적으로 설정할 수 있다. 하나의 요소에 여러 개의 배경이미지를 적용할 수도 있으며 각 배경이미지마다 별도의 크기를 지정해도 된다.

Source

div{
  padding:10px;
  background-image:url(/assets/img/logo2.png);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  -webkit-background-size: 50px 50px;
}

View


속성사용방법

background-size: ①50px ②50px;

① – 배경이미지 가로사이즈 ② – 배경이미지 세로사이즈

좀 더 디테일하게 적용 할 수 있는 속성들

• background-image:
• background-color:
• background-repeat:
• background-position:
• background-attachment:

Multiple background

하나의 element에 여러 개의 배경이미지를 적용할 수 있다.

Source

div{
  padding:10px;
  background-image:url(/assets/img/logo2.png), url(/assets/img/logo2.png);
  background-repeat: no-repeat;
  background-size: 50px 50px, 100px, 150px;
  -webkit-background-size: 50px 50px, 100px, 150px;
}

속성사용방법

background-image: ①url(...) ②url(...);
background-size: ③50px ④50px ⑤100px ⑥150px;

① – 1번 배경이미지 URI ② – 2번 배경이미지 URI ③ – 2번 배경이미지 가로사이즈 ④ – 2번 배경이미지 세로사이즈
⑤ – 2번 배경이미지 가로사이즈 ⑥ – 2번 배경이미지 세로사이즈

rgba(R,G,B,A) / hsla(H,S,L,A)

기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.

Source

div{
  padding:10px;
  color: rgba(0,0,0,1);
  color: hsla(180,0%,0%,1);
  background-color: rgba(150,100,80,.5);
  background-color: hsla(220,64%,69%,.5);
}

View


속성사용방법

color: ①rgba(0,0,0,1);
color: ②hsla(180,0%,0%,1);
background-color: ①rgba(150,100,80,.5);
background-color: ②hsla(220,64%,69%,.5);

같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자. ① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)

좀 더 디테일하게 적용 할 수 있는 속성들

• color:
• background-color:

gradient

필자도 많이 기다려왔던 기능 중에 하나인 그라데이션 효과 기능이다. 배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.

Source

div{
  padding:10px;
  border:solid 5px #66CCFF;
  border-radius: 20px;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
}

View


속성사용방법

background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));

① – 타입(linear,radial) ② – 시작위치, 끝위치
③ – 칼라 시작점, 칼라 끝점

opacity

요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.

Source

div{
  padding:10px;
  opacity:.5;
  background:#<| class="nu0">777|>;
}

View (적용 전)


View (적용 후)


속성사용방법

color: ①opacity:.5;

① – 0~1까지 표시된 값으로 투명도를 표시한다.

Text(다음 연재에 타이포그래피 투토리얼을 진행 할 예정이라 간단하게 하고 넘김)

text-shadow

일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.

Source

div{
  text-shadow:4px 4px 4px #aaa;
  font-size:5em;
  font-family: arial;
}

마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.

View
속성사용방법

text-shadow: ①4px 4px ②4px ③#aaa;

① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상

text-overflow

텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.

Source

div{
    padding:10px;
    width:300px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    border:5px solid #ccc;
}

View

CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.

속성사용방법

text-overflow:①ellipsis;
white-space:②nowrap;
overflow:③hidden;

① – 생략(ellipsis),자르기(clip) ② – 줄 바꿈을 하지 않기.
③ – 텍스트가 감싸고 있는 요소를 넘칠 때 숨김속성

resize

박스크기를 사용자가 임의로 조절할 수 있게 하는 속성이다. 가로,세로,모두 등의 설정이 가능하다.

Source

div{
  padding:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  resize:horizontal;
  resize:vertical;
  border:5px solid #ccc;
}

View

CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.

오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 2개의 사선이 그려져 있다.

속성사용방법

resize:①horizontal;
resize:②vertical;

① – 가로방향으로 사이즈 가변 됨 ② – 세로방향으로 사이즈 가변 됨 both는 가로,세로방향 모두로 가변 됨

multi-column layout

다중의 세로 열 레이아웃을 표현 할 수 있는 속성이다.

Source

div{
  padding:10px;
  -webkit-column-count: <| class="nu0">3|>;
  -webkit-column-gap: 1.5em;
  -webkit-column-rule: 1px solid #ccc;
  border:5px solid #ccc;
}

View


속성사용방법

-webkit-column-count:①<| class="nu0">3|>;
-webkit-column-gap:②1.5em;
-webkit-column-rule:③1px solid #ccc;

① – 칼럼의 개수 ② – 칼럼 사이의 빈 여백 ③ – 칼럼 사이의 세로라인

마치며

지금까지 선택자의 종류 및 벤더별 확장속성 그리고 간단한 CSS3 속성들을 다루어 보았다. 연재 첫 페이지에도 언급했지만 CSS3는 아직 완성되어 스펙이 100% 정해진 것이 아니다. 그렇기 때문에 포괄적인 CSS3의 명세를 읽어보고 일단은 표현이 되는 브라우저에서 테스트 및 학습을 하는 게 좋을 것이다.

다음 연재에서는 “CSS3를 이용해 이쁜 타이포그래피 만들기”라는 주제를 가지고 폰트지정, 웹폰트 쓰는법, 텍스트를 표현하는 전반적인 부분에 대하여 다루고 그것들을 이용해 이미지 못지 않은 샘플 타이포그래피를 구성해보자.

끝으로 2011년 새해 첫 스타트를 해 튜토리얼 중심의 본 CSS3 연재를 시작하여 열정을 가지고 한다면 모두 자신이 이루고자 하는 성과보다 많은 것을 얻을 수 있을 것이다.


[출처] http://www.clearboth.org/css3_1_by_isdn386/

Developer 관련 글 보기

• PHP | (PHP/MySQL) password_hash / password / old_password   2022-03-02
• PHP | 텔레그램(telegram) 봇 API 응답 값 살펴보기   2019-10-01
• PHP | [PHP] 텔레그램 api로 push 받기(Webhook)   2019-10-01
• Server | PHP 7.3, 7.2, 7.1 on CentOS/RHEL 6.10   2019-06-24
• Server | 사설인증서 생성을 위한 OpenSSL (for Windows) 사용방법   2019-06-14
• Script | jquery live, bind, delegate 를 on 대체   2018-01-16
• HTML | ASCII Code 특수기호 모음   2016-12-10