본문 바로가기

css380

첫 번째 DEV 게시물! 펌핑!! 내가 이걸 타이핑하다니... 자... 저는 2021년 11월 친구로부터 프로그래밍을 소개받았습니다. 나는 그것에 대해 사전 지식이 없어서 무서웠어. 제가 그 언어들을 이해할 수 있는 두뇌 능력이 있었나요? 난 그렇게 생각하지 않았다. 오늘로 돌아가면, 저는 현재 2,000달러 상당의 프로그래밍 장학금을 기다리고 있으며, Scrimba에 대한 HTML과 CSS 과정을 수강하고 있는데, 매우 흥미로운 여행이었습니다. 저는 오늘 이렇게 타자를 치며 이 놀라운 커뮤니티에 참여하게 되어 매우 기쁩니다. 나는 어떻게든 너에게 배우고 싶어. 로그아웃, 대마초 2022. 1. 19.
웹 개발 시작하기 웹 개발(대부분 프런트 엔드)을 시작하는 데 관심이 있는 경우 이러한 항목을 가장 많이 참조할 수 있습니다. 이 페이지는 사람들이 웹 개발을 배울 때 내가 가장 흔히 연결해주는 자료로 쓰입니다. 사람들을 압도하지 않도록 짧아야 해요. 필수 지식 2022 Web Dev 시작/경력 가이드 비디오 - 필수 시청 MarkSheet - HTML/CSS/Sass JSFiddle - 코드 작업에 문제가 있거나 다른 사람의 도움이 필요할 때 사용합니다. CodePen - 계정을 만듭니다. 추적하거나 기존 예제를 검색할 때 사용합니다. 자유 코드 캠프 - 부트스트랩, JS 등 사용 가능 - 특정 웹 기능이 지원하는 브라우저가 무엇인지 알려줍니다. Chrome Dev Tools 학습 - 기본적으로 다른 브라우저에서도 동일.. 2022. 1. 19.
TailwindCSS에 사용자 지정 글꼴 클래스 추가 이 문서에서는 TailwindCSS와 함께 사용자 지정 글꼴을 사용하고 Tailwind 클래스로 제공하는 방법에 대해 알아보겠습니다. TailwindCSS는 현재까지 가장 유용한 CSS 프레임워크 중 하나이며 아름다운 UI를 빠르고 간단하게 만들 수 있는 수많은 놀라운 기능을 가지고 있다. 많은 기능이 즉시 제공되며 이러한 구성 요소를 사용자가 상상하는 UI에 결합하는 것은 사용자의 몫입니다. TailwindCSS는 한 단계 더 나아가 지원하지 않는 특정 요구사항이 있을 경우 사용 가능한 테마를 확장하여 사용자 지정 옵션을 구성할 수 있도록 지원합니다. 더 골 사용자 지정 글꼴을 사용하는 방법에 대해 알아 보려면 다음을 수행합니다. 기본 Response 앱 시작 테일윈드CSS 설정 사용자 지정 글꼴을 추.. 2022. 1. 19.
CSS Flexbox를 연습한 방법 저는 dribble.com과 핀터레스트를 이용했습니다. 한 페이지 웹 사이트 UI를 검색하여 HTML과 CSS 템플릿으로 변환했습니다. 이걸 어떻게 하는지 보여줄게. UI를 찾은 후 이미 색 조합 및 전체 레이아웃과 같은 몇 가지 항목이 있습니다. 그 후 Google 글꼴에서 UI 디자인과 일치하는 비슷한 글꼴을 찾습니다. Unsplash를 사용하는 이미지의 경우 픽셀이 좋은 대안입니다. 모든 것을 하나의 폴더에 모은 후 최대한 동일하게 ui를 코드화하려고 합니다. 어떤 것을 배우려면 당신은 그것을 점점 더 연습해야 합니다. 플렉스박스는 충분히 사용해 봤기 때문에 UI를 만들 때 자신감도 있고 여러분도 만들 수 있습니다. 만약 당신이 당신의 개발자 친구들과 공유하는 것보다 내가 공유하는 것이 유용하다고 .. 2022. 1. 19.
CSS에서의 선형 그라데이션 애니메이션 안녕, 동료 크리에이터들 CSS에서 두 선형 그라데이션 사이에 호버 애니메이션을 만들 수는 없지만 다른 방법이 있습니다. 1분 안에 그것이 무엇인지 배워봅시다! 비디오 버전을 보고 싶으시다면 바로 여기 있습니다. 1. HTML 구조. 다음과 같은 제목의 카드 만들기: São Paulo 2. 카드를 스타일링하세요. 카드의 너비와 높이를 지정하고 카드 내용물의 가운데에 맞추고 배경을 추가합니다. .card { width: 400px; height: 400px; border-radius: 25px; margin: 100px auto; position: relative; z-index: 1; background: linear-gradient(to right, #2193b0, #6dd5ed); display: f.. 2022. 1. 19.
프리즘 및 Next.js를 사용한 구문 강조 표시 블로그를 처음부터 구축하고 웹 사이트를 아름답게 디자인하고 모든 것이 훌륭하지만 블로그 게시물에 코드 블록을 포함시키는 경우 몇 가지 어려움에 직면할 수 있습니다. 구문 강조표시는 코드를 쉽게 읽을 수 있는 좋은 방법입니다. 이 튜토리얼에서는 PrismJs를 Next.js와 함께 사용하여 블로그 게시물에서 코드 블록의 구문을 강조 표시하는 방법을 보여드리겠습니다. 안녕하세요, 저는 도슨이고 웹 개발을 좋아합니다. 저는 웹 개발과 최근 프로젝트에 대한 블로그와 트윗을 작성하는데 관심이 있으시다면 팔로우 부탁드립니다. 왜 프리즘Js인가? PrismJS는 브라우저에서 바로 자바스크립트로 구문 강조 표시에 이상적인 선택입니다. 프리즘JS는 모든 최신 브라우저를 지원한다. npmjs.com에서 매주 5백만 건의 .. 2022. 1. 19.
React형 웹사이트를 2시간 만에 새로 만들었습니다. 저는 새로운 개인 웹사이트를 만들었습니다. 왜냐하면 나는 시원하고 반응성이 좋은 웹사이트를 가지고 있지 않기 때문이에요. 그래서 나는 예전 웹사이트를 새로운 사이트로 바꿨어. 제 웹사이트는 https://sanath.live에서 확인하실 수 있습니다. 내가 어떻게 2시간 만에 웹사이트를 만들었지? 먼저 간단한 html과 CSS를 이용하여 웹사이트를 만들 계획이었어요. 하지만 노트북에 부트스트랩 스튜디오가 설치되어 있다는 것을 깨달았습니다. 그래서 부트스트랩 스튜디오에서 템플릿을 골라서 2시간 만에 웹사이트를 만들었습니다. 이 웹사이트는 2시간 또는 1시간 안에 만들 수 있습니다. 이 블로그를 읽어주셔서 감사드리며 개발자 친구들에게 공유해 주세요. 2022. 1. 19.
#100일 코드 1일차 완료 2022. 1. 19.
기본 은행 시스템 사이트 정보: Sparks 재단의 GRIP 인턴쉽의 일부로 만들어진 뱅킹 웹사이트이다. 우리는 세부사항을 입력하면 빠르게 계좌를 개설할 수 있습니다. 우리는 한 고객으로부터 다른 고객으로 돈을 이체할 수 있습니다. 그리고 모든 거래를 기록해 두세요. 코드에 대한 링크 : 웹 사이트의 흐름: 홈 페이지 계정 만들기 송금 사용된 기술: HTML PHP 내 SQL CSS 자바스크립트 아약스 부트스트랩 2022. 1. 19.
컴퓨터가 없다고요? 다음은 전화기를 사용하여 웹 사이트를 구축하는 방법입니다. 기술 애호가로서, 저는 웹 앱의 웹사이트, 앱, 디자인, 창의성, 기능성, 사용자 경험 및 인터페이스를 항상 검토하고 있습니다. 저는 웹사이트를 가지고 노는 것과 디자이너들의 창의성에 감탄하는 것을 좋아합니다. 친구가 저에 대해 알게 되었고, 여러 브랜드 사이트에서 리뷰 블로그를 시작했다고 조언했습니다. 그렇게 하면 디자인에 대해 더 많이 알게 되고 리뷰를 보관할 수 있는 자료도 갖게 될 것입니다. 그래서 블로그를 만들기로 결심했지만, 개인용 컴퓨터가 없다는 제약이 있었습니다. 핸드폰이랑 인터넷만. 나는 컴퓨터가 부족해서 꾸물거리지 않을 거라고 스스로에게 말했어. 항상 그렇듯이 이걸 나중으로 미루지 않을 거예요. 제 또 다른 점은, 저는 전문성을 사랑한다는 것입니다. 네, 전문적이고 사용자 친화적으로 보.. 2022. 1. 19.
CSS 소개 CSS는 Cascading Style Sheet의 약자로 웹사이트에 스타일을 추가하는 데 사용됩니다. 기본적으로 브라우저는 웹 사이트를 스타일이 없는 일반 HTML 문서로 렌더링합니다. CSS를 사용하면 다양한 HTML 요소의 크기, 텍스트, 색상, 정렬, 레이아웃(및 기타 많은 속성)을 수정하여 HTML 문서가 렌더링되는 방식을 제어할 수 있습니다. 따라서 CSS를 사용하여 버튼에 다양한 모양, 크기, 색상을 부여하고 웹사이트의 배경을 변경하며 로딩 스피너와 같은 애니메이션을 추가할 수 있습니다. 첫 번째 버전의 CSS는 1996년에 출시되었다. 스타일링으로 웹사이트를 렌더링하는 기능이 도입된 것은 이번이 처음이다. CSS 2의 두 번째 버전이 1998년에 출시되면서 빠르게 인기를 끌었다. 2000년까.. 2022. 1. 19.
전자상거래 개발 저는 전자상거래 분야에 경험이 있는 숙련된 개발자입니다. 리뉴얼이 필요한 전자상거래 매장이 있거나 매출이 없는 전자상거래 매장이 있습니까? 내가 해결해줄게 있으니 걱정하지 마. 이제 연락하시면 됩니다. 2022. 1. 19.
애니메이션 햄버거 메뉴 데모: - https://codepen.io/iammanojrathod/pen/RwLOZGE HTML 코드: - CSS 코드: - *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; background: black; height: 100vh; } .button{ width: 100px; height: 100px; border: 3px solid white; border-radius: 10px; position: relative; display: flex; justify-content: center; align-items: center; curso.. 2022. 1. 19.
어두워짐(모드) 일부 새로운 기능 제안과 관련하여 웹 앱 매니페스트 사용을 분석하는 툴링 작업을 하는 동안 다크/라이트 모드 지원을 위해 제안된 구문이 포함된 테스트 매니페스트가 필요하게 되었습니다. 나는 내 사이트를 실험 대상으로 만들기로 결심했고 그것을 실현시키기 위해 한 시간 정도 여러 가지를 수정했다. 여기 제가 한 일의 개요가 있습니다. CSS 수정 첫 번째 단계는 선호 색상의 미디어 쿼리에 추가하는 것이었다. 생소한 분들은 이렇게 보입니다. /* Your regular rules go here */ @media (prefers-color-scheme: dark) { /* Overrides for the "dark" theme go here */ } @media (prefers-color-scheme: ligh.. 2022. 1. 19.
테일윈드 CSS가 당신의 리뷰 과정을 개선할 수 있을까요? 시리즈는 아니지만 제 마지막 게시물 의 파트 2로 하겠습니다. 저는 (현재는) Tailwind CSS를 일상 업무에서 사용하지 않더라도 Tailwind CSS 열성팬입니다. 제대로 답변은 못 드리지만 잠재력이 보이고 궁금해요. 팀 내에서 사용하고 있습니까? 기술 리뷰 중에 몇 가지 이점이 있습니까? 2022. 1. 19.

티스토리툴바