CSS | CSS 선택자(Selector)의 종류 및 간단한 효과주기
페이지 정보
작성일2016-10-24 11:17 조회3,711회관련링크
본문
목차
- CSS3 배경 및 변화 된 점
- 선택자(Selector)
- 벤더 별 확장 속성 및 브라우저 엔진
- 이번 연재에서 다룰 CSS3주요속성
- CSS3의 새로운 주요속성을 이용하여 간단한 효과주기
- Background & Borders / border-image
- border-radius
- Box-shadow
- Border-radius 와 Box-shadow 사용
- Background-size
- Multiple background
- rgba(R,G,B,A) / hsla(H,S,L,A)
- gradient
- opacity
- text-shadow
- text-overflow
- resize
- multi-column layout
- 마치며
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 |
벤더 별 확장 속성 및 브라우저 엔진
대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.실제로 속성을 지원하지만 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 |
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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 (적용 전)
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
View (적용 후)
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
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
속성사용방법
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
오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 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
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
CSS 작업 테스트 뷰 화면 입니다.
속성사용방법
-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