본문 바로가기

css380

HTML, CSS 및 JavaScript로 사용자 지정 파일 업로드 버튼을 만드는 방법 목차. 도입 시작해 봅시다! HTML 코드 CSS 코드 JavaScript 코드 jQuery 코드 작동 방식! 전체 코드 도입 최근에 저는 프로젝트를 하고 있었습니다. 요구 사항 중 하나가 맞춤형 파일 업로드 버튼을 만드는 것이었다. 이런 걸 만들어야 했어요 구글에서 조금만 검색하면 자세한 튜토리얼을 쉽게 찾을 수 있을 것 같았는데 아쉽게도 찾지 못했어요. 간단해 보이지만 만들기 위해 많은 시간을 들여야 했어요. 이 문서는 만드는 방법에 대한 자세한 튜토리얼입니다. :) 시작해 봅시다! 초보자 친화적인 기사를 쓰겠습니다. 우선 기초부터 시작하죠. HTML 파일을 만들고 인덱스라는 이름을 지정했습니다. 아무 이름이나 지정할 수 있습니다. 이제 .css 파일을 생성합니다. 컨벤션을 따라 style.css라고.. 2022. 1. 27.
전환이 있는 간단한 CSS 카드 구축 간단한 HTML과 CSS로 당신의 사이트를 더 상호작용하게 만들고 싶으신 적 있으세요? 만약 그렇다면, 이 게시물은 저는 플렉스와 스케일을 이용한 인터랙티브 카드를 만드는 방법에 대해 설명하겠습니다. 먼저 HTML을 설정하겠습니다. div에는 2개의 다른 div가 있습니다. 이것은 그들에게 유연성을 적용하기가 더 쉬워집니다. CSS는 비교적 쉬워요! .card { height: 200px; width: 400px; } 카드의 너비를 400px로 하는 것은 또한 카드를 나란히 놓는 것을 가능하게 할 수 있고 플렉스 랩은 다른 카드를 포장하는 데 쉽게 사용될 수 있다. 더 반응적인 느낌을 줄 수 있는 카드. 두 번째로 이미지를 추가하겠습니다. 사이즈 문제를 피하기 위해 원하는 이미지 크기를 설정해주시고, 이.. 2022. 1. 27.
html css 와 typescript 를 사용하여 안드로이드 게임을 만들었다. 나는 html과 css를 사용하여 안드로이드에서 클로즈드 박스 게임을 만들었습니다. UI와 게임플레이 경험에 대한 피드백이 꼭 필요합니다. 이 게임에는 배경과 주사위를 위한 새로운 디자인을 살 수 있는 가게가 포함되어 있습니다. 상자 닫기 - 저장소 재생 깃허브 레포 2022. 1. 27.
가장 작은 스타일시트 이것은 가장 작은 CSS 스타일시트를 만들거나 찾기 위한 저의 실험입니다. 실험은 접근성 및 사용자 경험에 대해 염려하면서도 내 웹 사이트의 가장 작은 스타일시트를 찾아 만드는 것입니다. 면책의 경우 스타일시트가 없고 Google Analytics를 사용하므로 Sheat-King 웹 사이트와 같은 웹 사이트는 계산되지 않습니다. 두 번째 참가자는 3가지 규칙이 있는 스타일시트와 다크 모드에 대한 미디어 쿼리(다크 모드에 대한 포인트!)가 있는 Ferfect Sheat-cking 웹사이트입니다. 스타일시트를 다운받아서 444바이트를 받았는데 압축이 풀리고 마이닝이 되지 않았습니다. 스타일시트: body { max-width:650px; margin:40px auto; padding:0 10px; font:.. 2022. 1. 27.
순수 HTML/CSS로 된 애니메이션 측면 탐색 안녕, 동료 크리에이터들 웹 사이트에 애니메이션 사이드 네비게이션을 추가하시겠습니까? 순수 HTML로 하는 방법은 다음과 같습니다. 비디오 버전을 보고 싶으시다면 바로 여기 있습니다. 1. 기본 파일. 일반적인 HTML "헤드" 태그로 시작하고 지금은 빈 본문으로 시작하십시오. CSS 파일의 경우, 간단한 재설정으로 시작하여 본문 배경에 어두운 색을 선택합니다. *, ::before, ::after{ box-sizing: border-box; margin: 0; padding: 0; } body { background: #222; font-family: Raleway, Helvetica, sans-serif; position: relative; } 2. HTML로 탐색을 만듭니다. 용기와 점 세 개가 있.. 2022. 1. 26.
FreeCodeCamp Response Web Design 인증서를 더 빨리 받기 위한 팁 프리코드캠프는 웹 개발과 머신러닝에 관한 다양한 강좌를 제공하는 비영리 단체이다. 다양한 연구와 1,800시간 이상의 자료로 제공되는 여러 프리코드캠프 인증이 있다. 지난 달에 프리코드캠프 응답형 웹디자인 과정을 수료했습니다. 프리코드캠프 과정은 대부분 300시간 정도 소요됩니다. 반응형 웹디자인 강좌는 웹개발에 막 입문한 초보자에게 적합한 강좌다. 그래서, 제가 이 과정을 더 빨리 마칠 수 있도록 도와준 몇 가지 팁이 있습니다. 기본기를 마친 후 건축 프로젝트로 넘어갑니다. 처음 2개의 모듈을 완료한 후 프로젝트 섹션으로 이동하여 첫 번째 프로젝트(Tribute Page)를 시작합니다. 이 모듈에서 배운 모든 내용을 구현하는 데 도움이 될 것입니다. 헌정 페이지 프로젝트는 가장 간단한 프로젝트이며 플렉.. 2022. 1. 26.
CSS Hacks: ::전 및 ::후는 무엇입니까? ::앞 및 ::뒤는 CSS 유사 요소입니다. 해당 요소의 앞이나 뒤에 내용을 추가할 수 있습니다. 이것이 구문입니다. .class::after { content: "some content" } 유사 클래스와 함께 사용하여 이벤트 발생 시 콘텐츠를 추가할 수 있습니다. 아래 예제에서는 호버 이벤트가 있을 때 텍스트가 추가됩니다. ::앞 및 ::뒤에 유사 요소를 내용 없이 추가할 수 있으며 문서에 스타일을 추가하는 데 사용할 수 있습니다. 다음 예에서는 ::after 및 변환 속성으로 가리킬 때 경계를 추가하는 방법을 보여 줍니다. ::전, ::후로 또 무엇을 할 수 있습니까? 아래에 댓글을 남겨주세요. 2022. 1. 26.
나의 넬슨 만델라 추모 페이지 이것은 넬슨 만델라의 프리코데캠프에 대한 헌정 페이지 과제입니다.제발요, 수정해 주세요, 감사합니다 2022. 1. 26.
HTML CSS의 임의 배경 로그인 페이지 I Design this LogIn 페이지는 언플래시 API를 통해 임의의 배경 이미지로 리프레시 할 때마다 달라집니다. 기본기를 터득하기 위해 초보자들에게 강력 추천합니다. 2022. 1. 26.
3가지 놀라운 CSS 애니메이션 팁 CSS 애니메이션은 웹 페이지를 흥미롭고 흥미롭게 만드는 데 사용할 수 있는 강력한 도구입니다. CSS 애니메이션을 사용하면 제어하기 쉬운 간단한 애니메이션이나 다른 방법으로는 제작하기 어려운 복잡한 애니메이션을 만들 수 있습니다. 이 문서에서는 CSS 애니메이션의 기본 사항에 대해 알아보고 프로젝트에서 CSS 애니메이션을 사용하는 방법에 대해 설명합니다. 당신이 CSS 애니메이션에 대해 알아야 할 첫 번째 사항은 페이지에 있는 요소의 속성을 애니메이션화하여 동작한다는 것입니다. 이러한 속성은 페이지의 요소 위치부터 색상 또는 크기에 이르기까지 모든 것이 될 수 있습니다. 시간이 지남에 따라 변경할 수 있는 방법이 있는 한 원하는 속성을 애니메이션화할 수 있습니다. 애니메이션할 속성을 결정했으면 해당 속.. 2022. 1. 26.
HTML 및 CSS를 사용하여 맨 위 버튼으로 스크롤 독자 여러분, 오늘은 이 블로그에서 HTML과 CSS를 사용하여 스크롤 투 톱 버튼을 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML, CSS, Javascript를 사용하여 멋진 쿠키 동의 상자를 만드는 방법을 보았습니다. 이제 Back-to-top 버튼을 생성할 차례입니다. 또한 HTML과 CSS와 관련된 유용한 블로그도 많이 공유해 왔으니 잊지 말고 확인해보세요. 오늘날 거의 모든 웹사이트는 웹 페이지에 백투톱 또는 스크롤투톱 버튼을 제공한다. 사용자가 콘텐츠에 관심을 갖기 시작하면 웹 사이트의 맨 아래로 여러 번 이동한 후 아래로 스크롤하여 더 많은 콘텐츠를 읽기 시작합니다. 당신은 이것을 좋아할 것이다:- 클립보드에 복사 도구 애니메이션 카드 설계 놀라운 로그인 디자인 암호 토글러.. 2022. 1. 26.
왜 내가 스타일링된 구성품보다 테일윈드씨스를 더 좋아하는가? 왼쪽에는 스타일 구성 요소가 있고 오른쪽에는 테일윈드씨(tailwindcss)를 사용하는 동일한 코드가 있습니다. 내가 tailwindcss를 사용하는 것이 스타일링된 구성 요소를 사용하는 것보다 더 낫다고 생각하는 이유는 다음과 같습니다. 스타일을 추가할 때마다 클래스 이름(.welcome .mention)과 구성 요소(DivStyled)에 이름을 지정할 필요가 없습니다. 스타일은 검색할 필요가 없습니다. HTML/JSX에 코로케이션되어 있기 때문에 div의 테두리 블랙이 1px인 것을 알 수 있습니다, 명시적입니다. 그리고 유틸리티 클래스가 너무 많으면 변수에 저장할 수도 있습니다. 나는 CSS 선언을 유지할 필요가 없다. 클래스 이름이 .mention인 요소를 제거할 경우 DivStyled에서 선언.. 2022. 1. 26.
html css 와 typescript 를 사용하여 안드로이드 게임을 만들었다. 나는 html과 css를 사용하여 안드로이드에서 클로즈드 박스 게임을 만들었습니다. UI와 게임플레이 경험에 대한 피드백이 꼭 필요합니다. 이 게임에는 배경과 주사위를 위한 새로운 디자인을 살 수 있는 가게가 포함되어 있습니다. 상자 닫기 - 저장소 재생 깃허브 레포 2022. 1. 26.
CodePen Challenge - 예술에 영감을 받은 작품 이번 주 도전 : 다른 예술가로부터 영감을 받은 예술을 만들어 내세요. 이 펜은 예술가 카를로스 크루즈-디에즈가 그린 벽화 684A에서 영감을 받았습니다. 이 펜을 실현하기 위해 무엇이 필요한가? CSS를 생성하기 위한 전처리기인 SASS. 선형 그라데이션: 각 정사각형을 그립니다. 그리드 레이아웃: 각 정사각형을 배치합니다. 큐브 배치: 각 벽을 배치합니다. 임의: 각 그라데이션 작성. 노이즈: 그리기/페인팅 질감을 추가합니다. 애니메이션, 큐브를 이동합니다. 선형 그라데이션 그라데이션은 함수 그라데이션 선을 사용하여 그려집니다. 그것은 각 색상과 동일하게 표면을 분할하고 제공된 각도로 선형 그라데이트를 반환합니다. @function gradient-lines($colors, $angle) { $len.. 2022. 1. 26.
CSS 모듈을 사용하여 사용자 지정이 가능한 설계 시스템을 구축하는 방법 Bonfire에서는 크리에이터가 웹3 자산을 기반으로 자체 브랜드 플랫폼에서 커뮤니티를 호스팅할 수 있도록 인프라를 구축하고 있습니다. 우리는 크리에이터들의 개성이 빛을 발할 수 있도록 하면서도 사용하기 쉬운 드래그 앤 드롭 인터페이스를 제공한다. 우리가 직면한 과제는 크리에이터들이 자신만의 색상과 배경 이미지, 어둡거나 밝은 모드로 페이지를 커스터마이징할 수 있는 디자인 시스템을 구축하는 것이었습니다. 이 블로그 게시물은 우리의 접근 방식과 우리가 만든 기술적 절충에 대해 설명합니다. 기술 스택 React, Nextjs, CSS 모듈을 사용하고 있습니다. React는 역동적이고 상태 저장 UI를 구축하기 위한 훌륭한 프런트 엔드 프레임워크입니다. Nextjs는 서버측 렌더링을 즉시 사용할 수 있도록 지.. 2022. 1. 26.

티스토리툴바