전체 글380 CSS 스킬 향상을 위한 팁 img 독자 여러분 안녕하십니까, 이 블로그에서 저는 CSS를 개선하기 위한 몇 가지 팁을 공유하겠습니다. 나는 많은 개발자들이 CSS와 씨름하는 것을 봐왔고, CSS가 조금 위협적일 수 있다는 것을 알고 있습니다. 한 번에 모든 속성에 대해 배우는 것은 어려울 수 있습니다. 나도 CSS를 배울 때 같은 느낌을 받았어. 중간에 잠깐 쉬었다가 나중에 계속했어요. 다음은 CSS를 개선하는 몇 가지 팁입니다. 프로젝트 만들기 네, 잘 들으셨어요. 프로젝트를 만듭니다. 작업을 가장 효율적으로 또는 가장 잘 수행하지 못하고 있을 가능성이 높습니다. 하지만 처음부터 프로젝트를 만드는 것은 여러분이 생각하고 기술을 개발할 수 있게 해줍니다. 여러분이 얼마나 많은 튜토리얼을 사용하든, 여러분이 그것을 코딩하거나 시도할.. 2022. 3. 10. CSS를 배울 수 있는 10가지 놀라운 게임 img CSS를 배우는 것은 꽤 어려울 수 있다. 지름길은 없고 손을 더럽히고 마법의 세계인 CSS로 뛰어들어야 한다. 하지만! CSS라고 불리는 이 괴물을 배울 수 있는 재미있는 방법들이 있습니다. 이 자료에서는 CSS를 배우기 위해 할 수 있는 10가지 놀라운 게임에 대해 설명합니다. 1. 플렉스박스 개구리 플렉스박스 개구리는 내가 처음 해 본 CSS 해결 게임 중 하나였고, 나는 그것을 좋아한다. 이것은 전체적으로 플렉스박스 포지션을 학습하는 매우 재미있는 방법입니다. CSS 플렉스를 사용하여 올바른 릴리 위에 개구리를 놓습니다. 그것은 24개의 레벨이 있고, 여러분은 결과를 빠르게 볼 수 있습니다. 플렉스박스 개구리 놀이 2. Flexbox 방어 플렉스를 배울 수 있는 또 다른 멋진 CSS 게임은.. 2022. 3. 10. 해시 및 해시 테이블 img 해시(고기와 감자를 잘게 다져 섞어 요리하여 따뜻하게 차려 낸 것) 해시 함수는 문자열이나 파일 내용과 같은 데이터를 가져다가 고정된 크기의 문자열이나 숫자인 해시를 출력한다. 예를 들어, MD5 해시(MD5는 일반적인 해시 함수)는 단순히 "케이크"를 포함하는 파일에 대해 다음과 같다: DF7CE038E2FA96EDF39206F898DF134D 다음은 같은 파일에 대한 해시가 "케이크"로 편집된 후의 모습입니다. 0E9091167610558FDA6F69BD6716771 해시 테이블 기타 이름: 해시, 해시 맵, 맵, 정렬되지 않은 맵, 사전 해시 테이블은 지정된 키에 대한 값을 빠르게 검색할 수 있도록 데이터를 구성합니다. 장점: 빠른 검색. 검색은 평균 O(1)O(1)시간이 걸립니다. 유연한 .. 2022. 3. 9. CSS 셀렉터가 뭐야? CSS 선택기는 어떻게 작동합니까? "선택기는 HTML 또는 XML 문서에서 요소를 선택하여 (스타일) 특성을 첨부하는 데 사용됩니다." 가장 많이 사용되는 CSS 선택기는 클래스별이지만 id별로도 요소 집합에 스타일을 추가하는 데 쉽고 공정하게 사용할 수 있는 선택기가 많습니다. 각 셀렉터에 대한 간략한 설명과 함께 사용 가능한 모든 종류의 셀렉터를 살펴보겠습니다. 셀렉터 div p 하위 선택기 다른 요소 내부의 요소를 선택합니다. div 내부의 모든 p 요소를 선택합니다. div p { bacground-color: #fff; display: flex; text-aling: center; } #user.admin / ul.class Decentant Combinator 임의의 선택기와 하위 선택기를 결합할 수 있습니다. user.adm.. 2022. 3. 9. 대응에서 구문 강조를 통해 JSON을 예쁜 인쇄로 표시 img 이 게시물에서는 RespectJS/JS 앱에서 컬러로 강조 표시된 구문과 함께 JSON 데이터를 인쇄된 것으로 표시하는 방법에 대해 알아보겠습니다. 바로 아래의 유틸리티 기능으로 넘어가겠습니다. export function syntaxHighlight(json) { if (!json) return ""; //no JSON from response json = json .replace(/&/g, "&") .replace(//g, ">"); return json.replace( /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { v.. 2022. 3. 9. 스타일링된 구성요소의 사용자 지정 구성요소에 오신 것을 환영합니다! 리액트 또는 유사한 JS 라이브러리를 연습하는 경우 여러 개의 div 또는 HTML 태그를 만드는 작업이 종종 복잡합니다. 그리고 HTML 태그로 스타일링하고 관리하는 것도 힘든 일입니다. 자신만의 맞춤식 Stlyed 구성 요소를 만들기 위해 "Styled-Components"는 이러한 유형의 작업에 널리 사용되는 솔루션입니다. *스타일 구성 요소란? * 스타일 구성 요소의 몇 가지 이점: 개인 설정된 구성 요소 이름 클래스 이름 충돌 없음 CSS의 손쉬운 삭제 및 문제 해결 소품 값을 사용한 동적 스타일링 기본 CSS, Easy Maintanece 등. 이게 뭔지 기본적인 생각을 했으니까. 기본 사항에 대해 살펴보기 전에 설치 방법에 대해 알아보겠습니다. # with npm npm install --s.. 2022. 3. 9. CSS 캐스케이드 레이어를 사용한 계층화 img 내가 사는 곳의 날씨는 마침내 옷을 입지 않고도 외출할 수 있을 만큼 따뜻해지기 시작했지만, 알고 보니, 아직은 겹겹이 쌓는 것을 끝낼 수 없다! 최근 세 가지 주요 브라우저(크롬, Safari* 및 Firefox) 모두 최신 업데이트에 완전히 새로운 방식으로 레이어링할 수 있는 새로운 CSS 기능을 포함했습니다! 물론 캐스케이드 레이어를 말하는 겁니다. CSS의 캐스케이드 및 특수성 측면은 기능에 내재되어 있지만, 다른 프로그래밍 언어들이 작동하는 방식과 매우 다르며, 일부 사람들에게 약간의 루프를 안겨준다. 그러나 이 새로운 업데이트로 인해 우리는 이전보다 훨씬 더 폭포를 제어할 수 있는 새로운 도구를 갖게 되었습니다. 이는 스타일시트를 개별적으로 구성하는 방식과 대규모 애플리케이션 스타일의 .. 2022. 3. 9. 뉴 캐스케이드로부터의 질문들 캐스케이드 층은 아마도 CSS 캐스케이드가 시작된 이래 가장 큰 업그레이드일 것이다. 크롬은 기본적으로 계단식 레이어를 활성화하는 데 파이어폭스에 동참했고, 이를 설명하는 다양한 기사들이 있으니, 이제 그것들을 어떻게 사용하는지에 대해 생각해 볼 때이다. 아직 못 만져봤어? 자신을 테스트하기 위해, 여기에 그들에 대한 세 가지 작은 질문과 답변에 대한 설명이 있습니다. 시작합시다. 질문 1 다음에서 전경 텍스트 및 페이지 배경에 사용되는 색상은 무엇입니까? Hello World 대답이 있는 코드펜 (링크, dev.to은 공개 섹션 내에 코드펜을 내장하는 것을 지원하지 않는 것 같기 때문입니다.) 질문 2 이 문제는 비슷해 보여요. 레이어되지 않은 스타일은 본체 요소의 인라인 스타일로 이동되었습니다. 다시.. 2022. 3. 9. 이 놀라운 호버 효과로 어떻게 로고를 디자인할 수 있을까요? img 알아? 이렇게 로고를 디자인하는 방법은 무엇입니까? 이러한 놀라운 호버 효과로 로고를 디자인하는 방법은 무엇일까요? 상자 모양을 사용하여 객체를 설계할 수 있습니다.  호버에서 "inset" 키워드만 사용하면 됩니다!  img 플렉스 레이아웃은 유연한 상자 레이아웃으로 유연한 항목의 길이를 설정하고 복잡한 레이아웃을 만드는 데 사용됩니다. 유연한 레이아웃을 사용하여 항목을 매우 쉽게 정렬할 수 있습니다. 유연한 레이아웃은 응답성이 매우 높습니다. Flex property는 flex-grow, flex-shrink, flex-basis를 의미합니다. 플렉스와 그리드의 차이: Flex는 다른 손 그리드의 1차원 레이아웃이며 행과 열이 있는 2차원 레이아웃입니다. 플렉스는 소규모 배치를 위해 설계되었으며 그리드는 대규모 배치를 위해 설계되었습니다. Flexbox는 그리드보다 잘 제어 가능 플렉스 방향은 수직 및 수평으로 제어할 수 있지만 그리드는 자동으로 열과 행을 조정합니다. 2022. 3. 9. HTML CSS를 사용한 부드러운 애니메이션 도구 설명 img 비디오 튜토리얼 소스 코드 2022. 3. 9. 이전 1 2 3 4 ··· 26 다음