포부리

엘리먼트에 대한 폰트 패밀리 정의 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축을 따라 엘리먼트를 위치 조절할 길이 값..

scss 파일명앞에 _가 붙은 파일을 볼 수 있을 것이다. 왜 _를 사용할까? 만일 _없이 reset.scss를 만들고 이것을 컴파일 했다면, sass는 reset.css를 만들고 그걸 style.css에다가 import 한다. 결국 두 파일을 얻는 불필요한 일이 발생하는 것이다. 즉, _가 들어간 파일은 sass에서 사용하기는 하지만 scss에서 css로 변환하는 작업을 무시하게 해주는 역할을 한다.

scss에 걸려있는 모든 주석을 지우고 다시 빌드해볼 것.

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

addClass는 되는데 toggleClass가 안될 때가 있다. 이벤트를 걸어놓은 엘리멘트가 이중, 삼중으로 중복되기 때문인데, 이때 토글할 엘리먼트의 새롭게 비어있는 jQuery객체를 넣으면 된다. 종속작업 클래스 외에 새로운 이름의 id값이나 class를 추가해야한다: function myFunction(){ ... $("#Elemnet li").click(function(){ $(this).toggleClass("toggle-class"); }); ... } $(document).on("click", ".element li", myFunction);