전문가를 위한 CSS3 1장~5장까지 정리한 글이다.
이 책의 저자 블로그http://tangledindesign.com/
1장
CSS 서체 타입을 개발하려면 그것이 헤드라인든지 본문 텍스트이든 간에 커닝, 트래킹, 리딩에서부터 리가쳐(연간 활자), X-하이트, 종횡비에 이르기까지 수많은 요소들을 고려해야 한다.
커닝(kerning): 글자 엇물리기, 특정 글자 사이를 엇물리게 조정하여 더욱 짜임새 있게 글자 사이를 조정하는 것, 예를 들어 AV의 경우는 A와 V 사이를 약간 겹치게 놓아 보기 좋게 한다.
트래킹(tracking): 글자 사이에 균일한 공간을 배치하는 것을 의미한다.
leading(리딩): 줄 간 간격, 각 줄의 베이스 라인 간의 간격
ligature(리가쳐): 합자, 둘 이상의 글자를 합하여 한 글자로 만드는 것으로 한글의 경우 ㅃ의 경우 세로줄 하나를 생략하는 등의 방식으로 활용한다.
x-height: 글자의 주 크기를 의미, 보통은 폰트에서 소문자 x의 크기를 의미한다.
aspect ratios: 가로 · 세로비
2장 문자를 위한 새로운 툴
리가쳐
타이포그래픽 리가쳐는 두 개 이상의 문자를 합한 것으로 그렇게 하지 않으면 하나의 글리프(글꼴 데이터에서 글자 하나의 모양에 대한 기본 단위)를 형성하기에 어색하게 보이는 문자들을 말한다. 이렇게 합자를 하는 이유는 문자들의 가독성을 높이거나 눈으로 보기에 좀 더 좋아 보이기 때문이다.
font-variant-ligatures: common-ligatures; /* fi와 ff처럼 서체 안에서 모든 일반적인 리가쳐의 활용을 가능하게 한다. */
font-variant-ligatures: no-common-ligatures; /* 서체 안에서 모든 일반적인 리가쳐의 활용을 불가능하게 한다. */
font-variant-ligatures: discretionary-ligatures; /* 서체 디자이너들이 사용한 비표준의 리가쳐들, 즉 어떤 식으로 문자들을 합자하든지 이를 허용한다. */
font-variant-ligatures: no-discretionary-ligatures; /* 서체에 포함된 비표준의 리가쳐가 활용되지 못하게 한다. */
font-variant-ligatures: historical-ligatures; /* 서체에서 히스토리컬 리가쳐(historical ligature:과거에는 표준이었으나 현재는 사용하지 않는 연자 활용)의 활용을 가능하게 한다. */
font-variant-ligatures: no-historical-ligatures; /* 히스토리컬 리가쳐가 활용되지 못하게 한다. */
font-variant-ligatures: contextual; /* (contextual alternates) */
font-variant-ligatures: no-contextual;
font-variant-ligatures: contextual;커닝
font-kerning: nomal /* 본문에 커밍 데이터를 적용한다. */
font-kerning: none /* 본문에 커닝 데이터를 적용하지 않는다. */
auto: 커닝 데이터를 사용할 것인지 안 할 것인지 사용자 에이전트가 결정한다.브라우저의 지원에 대한 문제가 여기서도 대두된다. 오직 Chrome, Safari, Opera 15이상 버전들만이 -webkit- 접두어를 사용하여 font-kerning을 지원한다.
aspect 값 가독성 유지
font-size-adjust
font-stretch
font-synthesis
font-variant-numeric
writing-mode
text-orientation
3장 배경과 보더를 위한 새로운 툴
background-clip
bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip
움직이는 배경 이미지
border-corner-shape
curve – 모서리를 원형으로 볼록하게 처리.
notch – 모서리를 사각형만큼 잘라냄.
bevel – 모서리를 사선으로 잘라냄.
scoop – 모서리를 오목하게 잘라냄.
border-image
/* 문법–
source slice / width / outset repeat
*/
그라디언트
선형
background-image:linear-gradient
방사형
background-image:radial-gradient
예전문법
radial-gradient( [position], [shape] [size], [color-stops] );새로운문법
radial-gradient( [size] [shape] at [position], [color-stops] );https://css-tricks.com/css3-gradients/
방사형 그라디언트의 브라우저 지원 상황
4장 CSS 필터와 블렌딩 모드를 적용한 브라우저
CSS 필터의 작용
div {
filter: grayscale(1);
}그레이스케일
filter: grayscale(0.56);
/* 또는 */
filter: grayscale(56%);
밝기효과
filter: brightness(50%);
명암대비
filter: contrast(20%);
채도효과
filter: saturate(300%);
세피아톤
filter: sepia(100%);
반전 효과
filter: invert(100%);
불투명도
/* 예제 1 */
filter: opacity(50%) drop-shadow (5px 5px 0 #000);
/* 예제 2 */
filter: drop-shadow(5px 5px 0 #000) opacity(50%);Drop Shadow
/* 적용법--
[수평 오프셋] [수직 오프셋] [블러 반경] [색깔]
*/
box-shadow: 3px 3px 5px #000;
filter: drop-shadow(3px 3px 5px #000);블러효과
filter:blur(3px);
필터의 결함
img {
filter: brightness(50%) opacity(60%) grayscale();
}
img:hover {
filter: brightness() opacity() grayscale(0);
}html5 Rocks – css 필터 효과에 대한 이해
https://www.html5rocks.com/en/tutorials/filters/understanding-css/
CSS 블렌딩 입문
http://www.adobe.com/devnet/archive/html5/articles/css-blending.html
5장 – CSS3 2D 전환
transform 속성
* translate()
* skew()
* rotate()
* scale()
matrix() 함수는 https://dev.opera.com/articles/understanding-the-css-transforms-matrix/ 글을 읽어보면 된다.
Trnaslate(이동)
div {
width:300px;
height:300px;
background:blue;
transform: translate(100px, 50px);
}See the Pen 전문가를 위한 CSS3 – Transform 속성 Translate() by Singihae (@singihae) on CodePen.
Skew(기울이기)
Rotate(회전)
scale(스케일)
전환원점
transform: scale(1.4);
transform-origin: 50% 50%;
See the Pen background-transform-origin 속성 by Singihae (@singihae) on CodePen.
답글 남기기