본문 바로가기

css380

TIL CSS 원뿔 그라데이션 저는 현재 CSS와 바닐라 자바스크립트로 작은 프로젝트를 만드는 우데미 코스를 통해 일하고 있으며 원추형 그라데이션에 대해 배웠습니다. CSS 그라데이션은 오래전에 배웠음에도 불구하고 거의 사용하지 않고 매번 올려다봐야 하는 것인데, 이 프로젝트에 나타나기 전까지 원추형 그라데이션은 들어본 적이 없었다. MDN에 대한 정보 예: .gradient { background: conic-gradient(red, orange, yellow, green, blue); } 그것들은 멋진 효과를 만들어 내고, 저는 반드시 향후 프로젝트에 사용할 수 있도록 노력할 것입니다. 이런 종류의 그라데이션에 대한 사용 사례가 있는 사람 있나요? 2022. 1. 25.
주간 다이제스트 03/2022 올해의 위클리 다이제스트 3호에 오신 것을 환영합니다. 이번 주간 다이제스트에는 내가 이번 주 동안 소비한 흥미롭고 영감을 주는 기사, 동영상, 트윗, 팟캐스트, 디자인이 많이 담겨 있다. 흥미로운 읽을거리 ECMAScript 제안: .groupBy() 및 .groupBy를 통해 배열 그룹화ToMap() 이 블로그 게시물은 Justin Ridgewell의 ECMAScript 제안 "Array grouping"에 대해 설명합니다. ECMAScript 제안: .groupBy() 및 .groupBy를 통해 배열 그룹화ToMap() DOM 접기 이 게시물에서는 실제로 문자를 접는 것과 같이 DOM 노드를 "접는" 데 사용할 수 있는 기술에 대해 알아보겠습니다. 그 여정에서, 우리는 3D 변환과 CSS 애니메이션.. 2022. 1. 25.
HTML, CSS 및 Javascript를 사용한 등록 및 로그인 페이지 이 글에서는 HTML, CSS, Javascript를 이용하여 반응성 로그인 + 등록 페이지를 만드는 방법에 대해 알아보겠습니다. 당신이 원한다면 아래 다운로드 링크에서 직접 파일을 다운받을 수 있습니다. 로그인 페이지(login page)는 사용자 인증과 인증이 필요한 웹 페이지 또는 웹 사이트 입구 페이지로, 사용자 이름과 암호를 입력하여 수행되는 경우가 많습니다. 로그인은 사이트 전체 또는 사이트 일부에 대한 액세스 권한을 부여할 수 있습니다. 사이트 접속을 가능하게 할 뿐만 아니라, 웹사이트는 사용자의 활동과 습관을 추적할 수 있다. 반면에 등록 양식/페이지는 새로운 사용자 또는 회원이 사이트에 가입할 수 있도록 허용하는 웹 페이지입니다. 다음은 응답 로그인 양식/로그인 페이지 및 CSS 코드가 .. 2022. 1. 25.
CSS 변수와 프런트엔드 일치 저는 웹사이트를 만들 때 CSS 파일에 전역 변수를 설정하는 경우가 많습니다. 예를들면 /* style.css */ :root { /* Colors */ --color-black: #222; --color-red: #e12; --color-white: #fff; /* Fonts */ --font-family-roboto: 'Roboto', sans-serif; --font-family-opensans: 'Open Sans', sans-serif; } :root에 변수를 설정하면 프런트엔드 프로젝트에서 언제 어디서나 이러한 값을 사용할 수 있습니다. 예를들면 .wrapper { font-family: var(--font-family-roboto); color: var(--color-black); } a {.. 2022. 1. 25.
지금 바로 기술 경력을 시작하세요! 우리는 유능한 강사들의 온라인 실시간 강의와 대화식 토론을 제공합니다. 어디서든지 주잇과 함께 코딩을 배워보세요! 자세한 내용을 보려면 여기를 클릭하십시오. https://zuitt.co/global/?http=2112-http-cnb 2022. 1. 25.
CSS Funstuff: 애니메이션의 절반 테두리 안녕, 오랜만이야, 하지만 다른 CSS 튜토리얼로 돌아왔어! 이것은 꽤 빠르겠지만, 특별한 것을 추론하고 만들 수 있는 좋은 시작점이 될 것입니다. 이제 다음을 사용하여 요소의 특정 측면에 테두리를 추가할 수 있습니다. .border-top { border-top: 1px solid white; } 결과: 하지만 여러분이 깨닫지 못할 수도 있는 것은, 매우 간단한 추가 특성인 테두리 반지름을 추가할 때 일어나는 일입니다! 아주 명백하게 들릴지 모르지만, 얼마나 멋진지는 여러분이 직접 보기 전까지는 분명하지 않으니 그렇게 합시다. .border-top-round { border-radius: 50%; border-top: 1px solid white; } 결과: 멋지지 않니? 아니야? 그럼 그렇게 만들자!.. 2022. 1. 25.
박스 - 보드 게임 닫기(Android) 나는 안드로이드로 박스 게임을 만들었어. UI와 게임플레이 경험에 대한 피드백이 꼭 필요합니다. 이 게임에는 배경과 주사위를 위한 새로운 디자인을 살 수 있는 가게가 포함되어 있습니다. 상자 닫기 - 저장소 재생 2022. 1. 25.
배경 이미지의 srcset인 이미지 세트를 사용한 React형 배경 이미지 소스 세트는 웹 사이트가 더 빨리 로딩되도록 도와줍니다. 우리는 화면 크기, 픽셀 밀도 또는 네트워크 속도에 맞춰 동일한 이미지의 대체 버전을 브라우저에 제공하기 위해 그것들을 다양한 방법으로 사용할 수 있습니다. 배경 이미지의 소스 세트 이미지 세트 속성을 통해 CSS의 배경 이미지에 대해서도 동일한 작업을 수행할 수 있습니다. 이 기능은 수년 동안 요청되었지만 상위 선택기 또는 컨테이너 쿼리와 같은 다른 최신 CSS 기능과 같은 과대 포장되지 않았습니다. 단계별로 이미지 세트 이해 먼저 소스 세트를 이해하고 있는지 확인합시다. 소스 세트란 무엇이며 사용 방법은 무엇입니까? 일반적인 사용 사례에서는 다양한 이미지 버전을 제공하고 적절한 화면 크기에 대한 권장 사항을 추가하지만 로드할 이미지는 브라우저에.. 2022. 1. 25.
HTML, CSS 및 Javascript를 사용한 암호 토글러 표시/숨기기 독자 여러분, 오늘은 HTML, CSS 및 Javascript를 사용하여 비밀번호 표시/숨기기 토글러를 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML과 CSS를 사용하여 탐색 모음을 만드는 방법을 보았습니다. 이제 HTML, CSS, Javascript를 사용하여 Show/Hide 토글러를 만들 차례입니다. 비밀번호 입력은 로그인 양식 및 등록 양식에서 사용자 확인을 위한 자격 증명을 입력하는 데 사용됩니다. 비밀번호 표시 또는 숨기기를 통해 사용자는 JavaScript를 통해 비밀번호를 쉽게 숨기거나 표시할 수 있습니다. 토글 아이콘이나 버튼을 클릭하면 입력 유형이 텍스트로 바뀌고 암호가 보인다는 논리다. 당신은 이것을 좋아할 것이다:- 멋진 로그인 양식 클립보드에 복사 도구 애니메이션.. 2022. 1. 25.
2022년에 따라야 할 최신 웹 개발 및 자바스크립트 동향 DHTMLX의 우리에게는 웹 개발의 세계에서 다가오는 해의 결과, 특히 자바스크립트를 종합하고 다가오는 해를 예측하는 것이 좋은 전통이 되었다. 매년 전문 개발자와 웹 기술 애호가들에게 새롭고 흥미로운 것을 가져다주며, 올해도 예외는 아니다. 웹 전용 설문 조사 및 관련 통계 데이터를 분석한 후 가장 특이한 결과를 공유할 준비가 되었습니다. 체리탑으로서 DHTMLX의 생애에서 가장 주목할 만한 사건들과 2022년 계획에 대한 리뷰도 제공할 것입니다. JavaScript는 여전히 널리 사용되지만 개발자들의 사랑을 받지 못합니다. 자바스크립트는 우리가 가장 관심 있는 기술이기 때문에, 우리는 프로그래밍 언어 평가에서 그것의 현재 위치를 추정하는 것부터 시작해야 합니다. 이를 위해 Stack Overflow의.. 2022. 1. 25.
CSS에서의 서리 효과 안녕, 동료 크리에이터들 CSS에서 어떻게 유리 지평(동결 효과)을 만들 수 있습니까? 비디오 버전을 보고 싶으시다면 바로 여기 있습니다. 1. HTML 구조. 두 개의 div 내에 버튼을 작성합니다. Welcome 2. 단추 스타일을 맞추세요. 페이지 배경에 이미지 추가: .home { background: url("https://images.unsplash.com/photo-1631515998058-69359a50da68?ixlib"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100vh; padding-top: 125px; } 이제 프로스트처럼 보일 용기를 스타일링합니다. .c.. 2022. 1. 25.
CSS 유사 선택기: :선행형과 :선행형의 차이점이 무엇입니까? first-of-type과 first-child는 매우 유사한 유사 선택기이며 종종 동일한 요소를 대상으로 한다. 그들이 그렇지 않을 때는 혼란스러울 수 있으니, 그들이 무엇을 하는지 보자. 첫째 아이 첫째 자식 요소는 첫째 자식 요소만 봅니다. 예에서 .example-one div:first-child {} 아래의 예에서 첫 번째 div가 선택됩니다. 예제 2를 사용하여 .example-2 div: 첫째 자식 {}을(를) 쓴다면 아무것도 선택하지 않을 것이다. 첫째 자식은 점이 아니라 이기 때문입니다. Hello World 첫 번째 유형 첫 번째 유형의 유사 선택기를 사용하면 해당 유형과 일치하는 첫 번째 하위 요소가 선택됩니다. 위와 같은 코드지만 First-of-type을 고려하십시오. 예제-1 d.. 2022. 1. 25.
ecom 웹사이트 part 2 [ 소스 코드 ]를 완벽하게 작동하는 방법 안녕 얘들아, 잘 왔어. 오늘 기사에서는 작동하는 ecom 웹 사이트를 만드는 방법을 살펴보겠습니다. 음, 이건 그것의 두번째 부분입니다. 그래서 홈페이지, 상품페이지, 검색페이지, 404페이지를 만든 첫 부분을 못 보셨다면요. 그럼 그 부분부터 먼저 보시라고 추천해드릴게요. 두 번째 시간에는 워킹가입 페이지를 만드는 법을 배울 것입니다. 우리는 express.js를 이용하여 자체 localhost 서버를 만들 것입니다. 또한 다음을 사용하여 양식 데이터의 유효성을 확인하는 방법도 배울 것입니다. 만약 당신이 튜토리얼이 마음에 든다면, 그것을 칭찬하고 내 채널을 구독하는 것도 고려해보세요. 읽어주셔서 감사합니다 2022. 1. 25.
CSS 유사 클래스: 요소 상태 지금까지 우리는 이미 링크를 살펴보고 의사 클래스를 형성했습니다. 이 기사에서는 원소 상태에 대해 살펴보겠습니다. 요소 상태는 요소가 가질 수 있는 특정 조건을 반영합니다. 예를 들어, 첫 번째 유형 또는 마지막 하위 유형일 수 있습니다. 저는 이것을 4개의 시리즈로 나누었습니다. 여기서 이것은 의사 상태에 대한 세번째 부분입니다. 다른 부분: 유사 상태 연결 의사 상태를 형성합니다. 요소 상태 선택기(이 ) 기타 유사 상태(곧 출시 예정) 요소 상태 선택기 요소 상태 선택기는 제가 기사에서 많이 사용했던 유사 클래스입니다. 특정 일치 요소를 선택하고 특정 스타일을 적용할 수 있는 좋은 방법입니다. 다음과 같은 옵션이 있습니다. :첫째 자식 :마지막 자식 :자식만 있음 :제1종류 : 꼴찌 유형 :n번째 .. 2022. 1. 25.
뛰어난 응답성을 갖춘 디자인 만들기에 대한 팁: React형 디자인이 우세할 때? 웹 디자인은 끊임없이 발전하고 있습니다. 요즘은 휴대폰이 꾸준히 인터넷 트래픽을 지배하고 있기 때문에 대응성을 보장하는 것이 모든 사이트 소유주의 우선순위가 되어야 한다. 응답형 웹 디자인은 웹 사이트, 블로그 및 웹 앱이 서로 다른 화면 크기와 해상도를 기반으로 레이아웃을 조정할 수 있도록 합니다. 가독성 향상 외에도, 응답성이 뛰어난 웹 설계는 모바일 사용자의 참여율, 전환율 및 투자 수익률을 높일 수 있도록 지원합니다. 모바일 친화적인 웹사이트를 만드는 것은 고급 기술 전문지식을 필요로 하지 않지만, 많은 웹사이트 소유자들은 어디서부터 시작해야 할지 모른다. 이 문서는 반응성이 뛰어난 웹 디자인을 만들기 위한 8가지 팁을 다룹니다. 슬슬 출발 해야지. 1. 당신의 디자인을 유동적으로 만드세요 과거에.. 2022. 1. 25.

티스토리툴바