포부리

엘리먼트에 대한 폰트 패밀리 정의 font-family: Helverica, "Times New Roan", Serif; 사용할 주요 폰트명을 정의하고 콤마로 구분한다. 폰트명은 대소문자를 구분하지 않는다. 폰트명에 공백이 있는 경우, "", ''로 감싸야한다. 폰트 vs 폰트패밀리 폰트패밀리는 'Times' 처럼 외관을 담당하고, 폰트는 italic, bold, normal, bold italic 등 특정 버전을 가리킨다. 폰트의 높이 디센더 ~ 아센더까지 측정한 값. x-height는 소문자 글자의 높이를 말한다. ⚠️디센더? g,j,p,y 대문자+소문자, q 소문자(대문자 제외) 처럼 글자의 구조상 그 아랫 부분이 기준선 아래로 내려 오게 되는 글자 ⚠️아센더? b,d,..

즉시 바뀌는게 아니라 시간이 흐름에 따라 서서히 바뀌는 것을 트랜지션이라고 생각하면 된다. 마치 영화의 프레임을 이어놓은 것 같은. # 어떤 것을 트랜지션할 수 있을까? CSS 속성 트랜지션 대상값 background-color 색상 background-image 그라디언트 background-position 퍼센트 값, 길이 border-(상하좌우-)color 색상 border-(상하좌우-)width 길이 border-spacing 길이 top, bottom, left, right 길이, 퍼센트 값 color 색상 crop 사각 영역 font-size 숫자 font-weight 숫자 grid-* 다양함 height 길이, 퍼센트 값 letter-scpaing 길이 line-height 숫자, 길이, 퍼..

2D tarnsform # 2D transform 속성값 속성값 rotate(), rotateX, rotateY 엘리먼트를 X,Y축을 기준으로 회전시킬 각도를 지정. 양수 = 시계방향, 음수는 = 반시계 방향 skew(), skewX, skewY 엘리먼트의 X,Y축을 다라 엘리먼트를 왜곡시킬 각도 지정. 양수 = 위와 왼쪽 방향, 음수 = 아래와 오른쪽 방향 scale(), scaleX, scaleY X,Y에 곱할 숫자 값을 지정한다. 양수 = 엘리먼트 크기 증가, 음수도 크기를 증가시키지만 축을 중심으로 엘리먼트를 반전시킨다. 1보다 작은 소수점 숫자를 사용하면 크기가 줄어든다. translate(), translateX, translateY 엘리먼트의 X, Y축을 따라 엘리먼트를 위치 조절할 길이 값..

123 같은 글자간의 간격은 어떻게 구현할 수 있을까? 바로 word-spacing이 해결책이 될 수 있다. word-spacing을 사용하기 전에 주의해야할 사항이 있다. 간격을 조절할 단어 사이에 공백을 주는 것이다. 1(v)2(v)3(v) 이런식으로 말이다. 위 방법 말고도 사이에 빈태그를 넣어서 조절할 수 있지만, 빈태그는 추천하지 않는다.