전체 글145 Google Analytics와 연결하여 실제 브라우저 지원을 표시하는 방법 내가 사용하는 웹캔은 오늘날 모든 웹 개발자에게 없어서는 안 될 부분입니다. 데스크탑 및 모바일 웹 브라우저에서 프런트 엔드 웹 기술을 지원하기 위한 최신 브라우저 지원 표를 사용할 수 있습니까? 개별 기술에 대한 브라우저 지원은 컬러로 강조 표시됩니다(기능을 지원하는 브라우저는 녹색, 이를 지원하지 않는 브라우저는 빨간색, 일부 또는 폴리필을 지원하는 브라우저는 진흙 녹색으로 표시됩니다). 오른쪽 상단에서 해당 기술을 지원하는 브라우저의 비율도 확인할 수 있습니다. 어떤 브라우저가 어떤 기능을 지원하는지 알 수 있고, 동시에 얼마나 많은 브라우저가 사용되는지 알 수 있을까요? 이를 바탕으로 애플리케이션은 새로운 기능을 사용할 수 있는 사용자의 비율을 계산할 수 있습니다. 그러나 이 수치는 근사치일 뿐이.. 2022. 3. 10. 10분 만에 JavaScript 카운트다운 타이머를 구축하는 방법 JavaScript, HTML 및 CSS를 사용하여 카운트다운 타이머를 만드는 빠른 안내서입니다. 도입부 이 글에서는 HTML, CSS, 바닐라 자바스크립트만 사용하여 아름다운 카운트다운 타이머를 구축하려고 합니다. 저희 카운트다운 타이머가 특정 날짜와 시간까지 남은 시간을 알려드립니다. 구조 만들기 우리 모두는 HTML이 웹 개발 프로젝트를 구성하는 데 사용된다는 것을 알고 있습니다. Time remaining for the Fest Days Hours Minutes Seconds 여기에 카운트다운 타이머의 모든 미세 요소를 div 안에 넣어 배경 이미지를 추가하여 타이머에 상자 모양과 아름다운 UI를 부여합니다. 나는 다시 를 분리했다. 타이머 설계 이제 우리의 구조는 준비되었으니 카운트다운 타이머에.. 2022. 3. 10. Vuetify CSS 그리드 클래스 사용 불행하게도 Vuetify.js는 여전히 css 그리드를 사용하지 않으며, 제가 온라인에서 찾은 주제에 대해 살펴본 바로는 이 문제만 있는데, 이 문제는 비활성으로 인해 종결되었습니다. 저는 vuetify.js와 그리드 CSS를 함께 작업하고 싶은 모든 사람에게 이 스타일을 제공하고 싶습니다. 복잡하고 혼란스러워 보일 수도 있지만, 만약 여러분이 지시를 따르면, 여러분은 성공할 것입니다. 2022. 3. 10. CSS는 범위 입력용 특수 선택기를 지원합니다 :in-range 및 :out of range 값을 최소 및 최대 특성 범위 내에서/최대값으로 선택할 수 있습니다. 2022. 3. 10. 자바스크립트로 배경과 텍스트의 색상 대비를 어떻게 동기화하나요? 배경과 텍스트의 색상 대비를 동기화하는 것은 UI 담당자의 일이겠죠? 99.9%의 사례에서 그렇습니다. 하지만, 어떤 상황들은 고정관념에서 벗어나 약간의 고민과 생각이 필요합니다. 이전에 일했던 회사 중 한 곳에서 필터 리스트를 스타일링한 적이 있습니다. 목록 자체는 특별한 것이 아니라 텍스트와 x자 모양의 닫기 버튼이 있는 알약 같은 요소들 한 뭉치였다. The default look of the selected filters 이제 까다로운 부분이군요. 우리의 고객은 맞춤 배경색으로 세일 필터를 만들기를 원했습니다. 커스텀 컬러는 그것들을 돋보이게 하려고 했어요. 그들의 요구에는 평범하지 않은 것이 하나도 없었다. 하지만, 우리 쪽에 몇 가지 문제가 있었습니다. 우리는 CMS에 대한 추가 개발을 할 수.. 2022. 3. 10. 목 대 목: 더 적음 vs Scss Less와 Scss는 오늘날 가장 널리 사용되는 CSS 전처리장치이다. 대부분의 프로젝트는 둘 중 하나를 사용하며, 다른 프로젝트를 꽤 오랫동안 수행할 때 하나를 어떻게 구현해야 하는지 기억하기가 어렵습니다. 그래서 나는 이 기사가 Less에서 Scss로, 그리고 Visa에서 context 전환을 위한 빠른 조회 역할을 할 수 있기를 목표로 하고 있습니다. 종속성 가져오기 --- less --- @import @import () // read about keywords here - https://lesscss.org/features/#import-atrules-feature --- scss --- @import @use @forward 기본 클래스 확장 .base-class { border: 1px so.. 2022. 3. 10. SASS 기본 튜토리얼 2022. 3. 10. JavaScript가 필요하지 않을 수 있습니다. 자바스크립트 좋아요, 너무 좋아요. 그러나 많은 경우 HTML과 CSS를 사용해도 같은 결과를 얻을 수 있습니다. 자바스크립트를 사용하지 않고도 할 수 있는 몇 가지 일들을 살펴보자. 이미지 슬라이더 이미지 슬라이더는 인기가 있으며 이미지 슬라이더를 만드는 데 사용할 수 있는 수많은 JS 플러그인이 있습니다. 불행하게도, 이것들은 당신의 코드베이스를 부풀리고 당신의 웹사이트 속도를 느리게 할 수 있는 엄청난 JS 오버헤드를 동반한다. 일반 HTML과 CSS를 사용하면 실제로 몇 줄의 코드만으로 이미지 슬라이더를 만들 수 있습니다. SVG 애니메이션 개발자가 SVG 애니메이션을 만들고 싶을 때 Tweenmax와 같은 JS 애니메이션 라이브러리를 사용하는 경우가 많습니다. 그러나 일반 CSS를 사용하면 JS.. 2022. 3. 10. Angular에서 macOS 클론 구축 나는 내 유튜브 채널에서 새로운 시리즈를 시작했어. 이 과정 동안 Mac OS 클론을 구축할 것입니다. 우리는 Angular 13을 프런트엔드 프레임워크로 사용하고 PrimeNg를 주 UI 라이브러리로 사용할 것입니다. 이 코스에는 최소 10개의 PrimeNg 구성 요소가 사용됩니다. 메뉴바(화면 상단에 가로로 나열되어 있는 ‘파일(F)’, ‘편집(E)’, ‘도움말(H)’ 같은 메뉴) TabView 부두, 선창 DynamicDialog 공항 터미널 컨텍스트 메뉴 자동 완성 ProgressBar 입력 텍스트 사이드 바. 2022. 3. 10. 빌딩 설계 시스템: CSS 스타일 처리 방법 디자인 시스템을 스타일링할 수 있는 유용한 정보 설계 시스템은 설계 및 제품 팀의 일관성을 유지하는 데 도움이 되는 설계 토큰, 작업 방식 및 재사용 가능한 구성요소의 집합입니다. 색상, 타이포그래피, 아이콘 등은 브랜드가 UI에 표시되는 방식을 결정하는 데 도움이 되는 스타일과 관련이 있습니다. 따라서 디자인 시스템을 개발할 때 스타일링이 중요한 역할을 합니다. 당신의 브랜드 아이덴티티에 힘을 실어주고 지속적인 브랜딩과 사용자 경험 기준을 세우는 것이 중요합니다. 이 기사에서는 디자인 시스템을 스타일링할 때 고려해야 할 몇 가지 사실을 살펴보겠습니다. 2022. 3. 10. #100DaysOfCode의 26일 안녕 여러분 오늘 자바스크립트30 26번째 영상을 완성했습니다! 프로젝트 26: 줄무늬 추적 드롭다운 출처: https://javascript30.com 학습: 탐색 막대를 따라 이어지는 드롭다운 요소를 설정하는 작업을 수행했습니다. 요소는 메뉴의 각 항목에 대해 사용자 정의되었습니다. 우리는 내비게이션 바를 구성하고 있는 주문되지 않은 리스트 안에 세 가지 리스트 항목을 설정했어요. 여기에는 불투명도와 표시 특성을 포함하는 드롭다운 CSS 클래스가 포함되어 있습니다. 나에게 새로운 CSS 속성은 나중에 요소 변경을 예상하도록 브라우저에 힌트를 주는 will-changes 속성입니다. .dropdown { opacity: 0; will-change: opacity; display: none; } 그런 다.. 2022. 3. 7. HTML 기본사항 - 문서 연결 믿거나 말거나, 모든 것이 개발자에 의해 만들어질 필요는 없습니다. 나처럼 시각 예술 기술이 전혀 없는 사람들에게 다행스럽게도 글꼴은 그런 것들 중 하나이다. 그리고 그것보다 더 좋은 것은 우리가 HTML 프로젝트에 가져올 수 있는 것은 글꼴뿐만이 아니다. 스타일시트를 가져오는 것이 가장 일반적인 방법이며(자세한 내용은 향후의 CSS Basics 시리즈 참조) 별도의 문서에서 HTML 요소를 스타일링할 수 있습니다. 이는 다른 방법으로는 투명하지 않은 HTML 물을 인라인 스타일로 더럽히지 않기 위해 중요합니다… 으… 이 모든 것은 태그로 이루어집니다. HTML 문서는 이러한 것들을 백만 개 포함할 수 있지만, 그것들은 항상 문서의 맨 위에 있는태그에 들어간다. 저는 개인적으로 태그를 아래에 붙여서 문서.. 2022. 3. 7. CSS 사양: 캐스케이드 레이어 - 빠른 소개 및 사용 예 해결해야 할 문제 계산 후 예측할 수 없는 CSS 값입니다. CSS 충돌로 인한 퇴행과의 끝없는 싸움: CSS 특이성을 유지하기 위한 비대해진 CSS 선택기 복잡성 CSS 선택기 충돌로 인한 취약한 CSS 규칙 순서 지정 !어디서나 오는 중요한! CSS 캐스케이드 레이어의 목표 캐스케이드 레이어를 사용하면 스타일시트에 걸쳐 규칙 집합의 특이성과 순서를 제어할 수 있어 유지관리 가능하고 예측 가능한 CSS 값을 생성할 수 있다. 계층이 존재할 때, 계층들은 각각이 포함하는 CSS 규칙의 특수성에 관계 없이 먼저 정렬된다. 예: @layer base, specific; .p { color: blue; } @layer base { color: red; } @layer specific { color: green.. 2022. 3. 7. #100DaysOfCode 중 Day27 안녕 여러분 오늘 나는 자바스크립트30 27번째 영상을 완성했어! 프로젝트 27: 스크롤하려면 클릭하여 끌기 출처: https://javascript30.com 학습: 그래서 오늘은 깔끔한 가로 스크롤 클릭과 드래그 아코디언 또는 회전목마를 만드는 과제를 수행했습니다. 이를 위해 마우스다운, 마우스리브, 마우스업 및 마우스무브와 같은 다양한 이벤트 수신기가 사용됩니다. 마우스가 아래로 이동했는지 위로 이동했는지 추적하는 부울을 유지하고 Element.scrollLeft 속성을 사용자가 요소를 끈 픽셀 수로 설정했습니다. 이제 몇 가지 변수를 설정해 보겠습니다. const slider = document.querySelector('.items'); let isDown = false; let startX; .. 2022. 3. 7. 각 목록 항목 스타일을 사용자 정의하는 CSS 트릭 List style type CSS 목록은 모든 유형의 문서에서 일반적으로 사용되는 데이터 표현 형식입니다. HTML에는 순서 목록과 순서 없는 목록의 두 가지 유형이 있습니다. 정렬된 목록에서 항목은 일련 번호 또는 순서대로 된 문자로 표시됩니다. 정렬되지 않은 목록에서 목록 항목은 다양한 유형의 글머리 기호, 디스크, 원, 사각형 또는 이미지로 표시됩니다. 기본적으로 정렬된 목록 항목은 숫자로 표시되고 정렬되지 않은 목록 항목은 디스크 글머리 기호로 표시됩니다. Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 스타일 리스트 스타일 유형 스타일 리스트의 경우 CSS 리스트 속성이 있는데, 이 속성을 사용하여 리스트 스타일 타입, 리스트 위치를 변경하고 리스트 항목의 글머리 기.. 2022. 3. 7. 이전 1 2 3 4 ··· 10 다음