h34035 No Contents

* 다음은 아티클을 번역 및 정리한 것입니다. 삼각함수 CSS에서는 수학 표현식을 작성할 수 있다. 기본적으로 계산을 수행하는 calc() 함수 외에도 min(), max(), clamp() 등을 들어 본 적이 있을 것이다. Chrome 111에서 삼각함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()도 이 대열에 합류한다. 이 함수들은 에 정의되어 있으며 모든 브라우저에서 사용할 수 있다. 더보기 지원하는 브라우저 chrome 111 firefox 108 edge 111 safari 15.4 출처: https://developer.mozilla.org/en-US/docs/Web/CSS/cos#browser_compatibility sin(), cos(),..

* 《Try out CSS Nesting today》아티클을 번역 및 참고하여 작성한 글입니다. 작년 12월, WebKit은 CSS 중첩에 대한 세 가지 옵션을 자세히 설명하는 아티클을 게시했다. 당시, 아티클에서 옵션 3, 옵션 4, 옵션 5의 차이점을 설명하고 일련의 예시를 통해 각 옵션이 어떻게 작동하는지 보여주었다. 그리고는 "CSS의 미래를 위해 어떤 옵션이 가장 좋을까?"라는 간단한 질문을 던졌다. Option 3) Non-letter start: 문자로 시작하지 않는 중첩 스타일 규칙을 선언 블록에 직접 추가 article { font-family: avenir; & aside { font-size: 1rem; } } Option 4) Postfix block: 스타일 규칙은 스타일 규칙만..

* Make Beautiful Gradients 아티클을 기반으로 작성한 글입니다. CSS 선형 그라데이션과 gray dead zone CSS linear-gradient() 함수를 이용하여 노란색(R: 255, G: 255, B: 0)부터 파란색(R: 0, G: 0, B: 255)까지의 선형 그라데이션을 나타내 보면 다음과 같다. 이때 그라데이션의 중간 부분이 칙칙한 회색으로 나타나는 것을 볼 수 있다.😨 에릭 케네디(Erik Kennedy)는 이 부분을 'gray dead zone'이라고 부르는데, css 그라데이션을 생성할 때 주의하지 않으면 중간 영역이 채도가 낮은 탁한 색으로 칠해질 수 있다. gray dead zone이 왜 나타나는지, 그리고 색 이론을 통해 칙칙하지 않은, 아름다운 그라데이션..