분류 전체보기49 반응형 크기 설정을 위한 clamp(), min(), max() clamp() clamp() CSS 함수는 정의된 최소값과 최대값 사이의 범위로 값을 제한하는 데 사용됩니다. 이 함수는 세 개의 매개변수를 가져옵니다: 최소값, 선호값 및 허용되는 최대값입니다. 글꼴 크기에 clamp()를 사용하면 미디어 쿼리가 필요하지 않고 하나의 코드 라인으로 화면 크기에 따라 글꼴 크기가 커지거나 최대 글꼴 크기를 초과하지 않고 최소 글꼴 크기를 유지하는 유동적 타이포그래피(fluid typography)와 같은 효과를 낼 수 있습니다. /* Static values */ width: clamp(200px, 40%, 400px); width: clamp(20rem, 30vw, 70rem); width: clamp(10vw, 20em, 100vw); /* Calculated val.. 2023. 8. 9. Print용 CSS 설정 @media print 인쇄 시 적합한 출력을 위해, 인쇄 페이지용 미디어 쿼리를 사용하여 출력 시 변경되는 섹션을 명시해야 합니다. 미디어쿼리는 인쇄될 내용에 맞게 화면을 설정할때 사용하는 것으로 생각하시면 됩니다. @media print { } 배경출력을 위한 설정 인쇄 시, background속성(background-image, background-color)를 강제로 보이게 지정 @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } 화면분할 page-break 속성은 더 이상 권장되지 않고 있으며, 대신 break-before, break-after, break-inside와 같은 속성들이 CSS3에.. 2023. 8. 7. 타로의 수 22 타로 수비학은 수비학의 고대 지혜와 타로 카드의 신비로운 상징성을 결합합니다. 타로 덱의 각 카드는 특정 숫자와 연결되어 있으며 이 숫자는 심오한 상징적 의미를 지닙니다. 0: 무한한 가능성 일반적으로 잠재력, 시작, 무한을 상징합니다. 무한한 가능성의 에너지와 여행의 출발점을 상징합니다. 무슨 일이든 일어날 수 있는 가능성과 미지의 세계로 도약할 수 있는 기회를 의미합니다. The Fool 여행의 시작, 순수함, 자발성 및 믿음의 도약. 가능성과 시작이라는 숫자 0의 자질을 반영하여 탐험 정신과 모험의 즐거움을 말합니다. 1: 새로운 시작과 개성 새로운 시작, 개성, 독립성과 관련이 있습니다. 시작의 에너지, 첫 걸음을 내딛고 앞장서는 것을 나타냅니다. 자립, 개성, 그리고 혼자 설 수 있는 능력을 말.. 2023. 8. 3. Element.animate() animate() 메소드는 JavaScript에서 다양한 애니메이션 효과를 구현하는 데 사용됩니다. animate() 메소드를 사용하면 요소를 회전, 페이드인/아웃, 크기, 위치, 색상 등을 변경하는 애니메이션 효과를 만들 수 있습니다. element.animate(keyframes, options); `animate()` 메소드는 두 개의 인수를 받습니다. 첫 번째 인수는 애니메이션의 키프레임(keyframes)을 정의하는 배열입니다. 각 키프레임은 요소의 스타일을 변경하는 객체로 구성됩니다. 두 번째 인수는 애니메이션의 지속 시간, 반복 횟수 등을 정의하는 객체입니다. 이 객체는 `duration` 속성을 사용하여 애니메이션의 지속 시간을 밀리초 단위로 지정하고, `iterations` 속성을 사용하.. 2023. 7. 28. 최신기능을 지원하는 CSS 전처리기 Dart SCSS Dart SCSS 와 Node SCSS의 차이 Dart Sass와 Node Sass는 모두 SCSS (Sassy CSS)를 컴파일하는 도구입니다. 두 도구는 기본적으로 같은 역할을 수행하지만, 내부적으로 사용하는 기술과 지원하는 기능에는 몇 가지 차이점이 있습니다: 구현 언어: Dart Sass는 Dart 언어로 작성되었고, Node Sass는 LibSass라는 C/C++ 라이브러리를 바탕으로 Node.js에서 동작하도록 작성되었습니다. 기능 지원: Dart Sass는 Sass의 최신 기능들을 가장 빨리 지원합니다. 이는 Dart Sass가 Sass의 공식 참조 구현이기 때문입니다. 반면, Node Sass는 LibSass를 기반으로 하며, 이는 Sass의 모든 기능을 항상 최신 상태로 유지하지는 않습니.. 2023. 7. 23. setTimeOut setTimeOut은 JavaScript에서 제공하는 내장 함수 중 하나로, 일정 시간이 지난 후에 함수를 실행시킵니다. 이 함수는 비동기적으로 실행되어, 타이머가 만료되기 전에 다른 코드가 먼저 실행될 수 있습니다. setTimeout 함수는 두 개의 인자를 받습니다. 첫 번째 인자로 실행할 함수를 받으며, 두 번째 인자로 일정 시간(ms)을 받습니다. setTimeout(callback, delay); 여기서 callback은 실행할 함수를 가리키며, delay는 일정 시간을 가리킵니다. delay는 밀리초 단위로 입력되며, 1000밀리초는 1초를 의미합니다. 예를 들어, 아래와 같이 setTimeout 함수를 사용하면, 3초 후에 sayHello 함수가 실행됩니다. function sayHello(.. 2023. 7. 16. 이전 1 2 3 4 5 6 ··· 9 다음
