열정과 게으름 사이

CSS변수 선언 선언식 : --font-color: #fff; or --width: 100px; 와 같이 앞에 두 개의 바가 들어간다. 변수의 사용 범위 : 변수가 선언된 요소의 하위 트리. 전역 변수로 사용할 경우 :root{ --font-color: #fff; } 내에 선언하면 되고, 지역 변수로 사용할 경우는 사용할 트리의 기준이 되는 상위 요소에 선언. CSS변수 사용 요소{ color: var(--font-color);} //지역 변수 선언 :root{ --bg-color:#26ae9a; } //지역 변수 선언 section2 .outbox{ --fnot:'Roboto', sans-serif; } // 변수 사용 section1{ background-color:var(--bg-color:#26a..

생각보다 어렵지 않은 회전 하는 큐브 css는 x,y축 뿐 아니라 z축으로도 트렌지션을 사용할 수 있다. 그래서 3D 효과를 사용 가능. 여기에서 알아야 할 것은 물체의 멀고 가까움을 나타내는 원근감을 지정하는 방법과, 3D좌표를 어떻게 전달하고 사용 할 수 있느냐이다. 두개의 속성은 카메라의 움직임이라고 보면 된다. perspective 는 원근감을 지정하는 속성이다. 두 개의 속성값을 가지고 있다. none : 원근감이 없다. length : z축 값을 지정하는 속성으로 값이 작으면 보이는 요소가 커지고, 값이 커지면 보이는 요소가 작아진다. (가까이 있으면 크게, 멀리 있으면 작게) perspective-origin 은 원근감의 방향을 지정하는 속성이다.(보는 방향) 단위값과, left, cente..

반응형 작업을 하다보면 폰트 사이즈가 여간 까다로운 것이 아니다. 분기점 마다 폰트 사이즈를 지정해주다 보면 솔직히 예쁘게 하려면 한도 끝도 없이 분기점을 만들판..... 그래서 자바스크립트로 폰트사이즈를 조절하기도 하고, 폰트 사이즈 관리용 css파일을 따로 만든 것을 보기도 했다. 그러다가 발견한 방법. css의 연산 기능을 이용한 것이다. html{ font-size: 62.5%; font-size: calc(0.35vw + 8.74px); //시스템 폰트 사이즈는 10px로 지정 //360 first로 작업할 때 margin,padding,border등은 1rem이 10px로 계산되고, viewport사이즈에 따라 변동된다. (1280px일때 13.22px) } body{ font-size: 1...

스크롤이 되다가 특정 위치에 고정되는 속성인 sticky 이게 되다가 안된다. 뭐지?? 한참을 헤매다가 알아낸것이. 반응형 작업중에 어느 분기점에서 여백이 생겼던 것을, 뭔가 튀어 나온 요소가 있나 찾는데 안찾아져서, 요소들을 감싼 요소에 overflow-x:hidden을 줬는데 그것 때문이었다. sticky는 부모 요소중에 hidden 속성을 가진 요소가 있으면 적용이 안된다고 한다. 자바스크립트로 sticky를 해결하지 뭐 했는데 번거롭다. 그래서 다시 한번만 튀어나온 요소 찾아보자 하고 찾았더니 이번에는 또 의외로 쉽게 찾아짐... 비율 때문에 px로 해놨던걸 특정 분기점에서 %로 해줘야하는데 안해줬던거... 튀어나온 요소 찾기 번거롭다고 했다가 더 헤멘 꼴. 쨋든. 또 이렇게 하나 알고 지나간다.