본문 바로가기

전체 글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.
SCSS를 활용한 Theme CSS 제작 SCSS를 사용하면 스타일시트에서 쉽게 재사용할 수 있는 변수, 믹스인 및 함수를 정의할 수 있습니다. 이렇게 하면 코드 모듈성과 재사용성이 향상되어 테마를 더 쉽게 만들고 유지 관리할 수 있습니다. 테마별 변수 집합을 정의하고 스타일시트 전체에 일관되게 적용할 수 있습니다. 재사용 가능한 스타일을 정의하고 이를 다른 요소나 구성 요소에 적용하여 CSS 코드베이스를 단순화하고 유지 관리하기 쉽게 만들 수 있습니다. Dart Sass의 map기능을 활용 // _variables.scss $theme-light: ( bg: #ffffff, text: #333333, primary: #007bff, secondary: #6c757d, ); $theme-dark: ( bg: #333333, text: #ffff.. 2023. 7. 12.
:is() 의사 클래스 :is() 의사 클래스는 CSS 선택기 레벨 4에 도입된 기능적 의사 클래스입니다. CSS를 더 간결하고 관리하기 쉽게 만드는 좋은 방법입니다. :is() 의사 클래스는 쉼표로 구분된 선택자 목록을 인수로 사용하여 작성한 선택자를 모두 선택합니다. // 작성 :is(header, main, footer) p:hover { color: red; cursor: pointer; } // 적용 header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } CSS 작성시에 더 효율적인 작업이 가능합니다. 대규모 사이트 작업시에 테마나 같은 사이트 내 다른 영역등에서 공통 값을 적용할때처럼 여러곳에 같은 속성과 속성값을 지정하는데 큰 이점.. 2023. 7. 9.
Intersection Observer API를 통한 스크롤 이벤트 구현 Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지 관찰하는 데 사용됩니다. 예를 들어, 사용자가 웹 페이지를 스크롤 할 때 특정 요소가 화면에 보이는지 확인하는데 사용할 수 있습니다. 이는 Infinite Scroll(무한 스크롤), Lazy Loading(지연된 이미지 로딩), Animation Triggering(애니메이션 트리거링) 등에 유용하게 사용됩니다. 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하여 이벤트를 실행시키는 방법입니다. 기존의 scroll 이벤트나 wheel 이벤트를 통해 Intersection을 구현했지만 반복되는 이벤트 호출등으로 성능상의.. 2023. 7. 4.
운명의 숫자(Destiny Number) 구하기 다양한 이름으로 불리는 내가 가진 운명의 숫자를 구하는 방법을 알아보겠습니다. 이를 운명의 숫자(Destiny Number)라 부르겠습니다. 내 운명의 숫자를 찾으려면 태어난 생년월일을 한 자리가 될 때까지 더해줍니다. 운명의 숫자 방법은 다음과 같습니다. 양력 생년월일이 1999년 9월 19일인 경우 1+9+9+9+9+1+9 = 47 합계가 두 자리 숫자인 경우 숫자를 함께 더하여 한 자리 숫자가 될때까지 더해 줍니다. 이 예에서는 4+7=11이기 때문에 다시 11을 각각 더해줍니다. 1+1 = 2 이렇게 한자리가 된 숫자 2가 내 운명의 숫자가 됩니다. 숫자 2가 갖고 있는 에너지가 나의 삶을 관통하는 에너지입니다. 연도넘버 연도 넘버를 구하는 공식도 운명의 숫자를 구하는 것과 비숫합니다. 자신의 양.. 2023. 7. 3.
접근성을 위한 미디어 쿼리 사용 접근성을 위한 미디어 쿼리 사용하기 장애를 가진 분들을 위한 미디어쿼리는 접근성 심사를 위해서도 필요하지만 실제 사용성 편의를 위해서도 꼭 알아 둘 필요가 있고, 다양한 미디어가 한 사이트에서 구현되는 경우 일어날 수 있는 위험을 방지할 수 있는 방법입니다. prefers-reduced-motion 깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(ADHD)와 같은 인지 문제를 가진 사람들에게 문제가 될 수 있습니다. 이러한 종류의 애니메이션 동작들은 전정편두통, 뇌전증, 편두통과 광과민증을 유발할 수 있습니다. 기기의 성능이 떨어지는 사용자에게도 도움이 되지만 접근성 심사를 위해서 과도한 반짝임은 일어나지 않도록 해야 합니다. 실제 장애인 뿐 아니라 아이들이 자주 접속하는 사이트 라면 꼭 있어야.. 2023. 7. 2.
자바스크립트 대괄호 표기법 자바스크립트에서 대괄호 표기법(square bracket notation)은 객체의 속성에 접근하거나 배열의 요소에 접근하는 데 사용됩니다. 대괄호 표기법을 통해 속성에 접근하면 그 속성에 할당된 값을 출력하게 됩니다. 속성은 같지만 속성값을 다르게 하여 구분자로 사용하려는 경우 유용하게 사용됩니다. 특히 DOM을 다룰 때 각각의 DOM의 Class나 Id로 따로 구분해서 변수에 할당하는 방법이 아닌 각각의 DOM에 작성된 속성값을 구분자로 사용할때 스크립트의 양을 줄이는데 좋습니다. 객체에서 사용 아래의 예처럼 객체의 키 값인 name이나 age에 접근하면 각각의 key 값에 할당되어 있는 값들이 출력됩니다. 객체는 키와 값으로 구분되어 있기 때문에 키를 속성으로 구분해서 생각하면 됩니다. 속성역할을 .. 2023. 7. 1.

티스토리툴바