본문 바로가기

분류 전체보기380

자습서 - HTML로 된 응답 등록 양식 img 최근 유튜브 동영상에서는 순수 HTML로 아름다운 등록 양식을 만들고 있습니다. 유튜브 영상을 꼭 좋아해 주세요 참고로 Youtube의 동영상 설명에 소스 코드 링크도 제공했습니다. 이 게시물에 대해 다음과 같이 응답하여 주시기 바랍니다. ️ + 및 북마크 향후 참조를 위해 Twitter, Linkedin과 같은 소셜 플랫폼에서 웹 개발 및 프로그래밍과 관련된 Tips+ Guide + Resources 를 정기적으로 게시하는 연결/팔로우하십시오. 내 트위터 내 링크드인 내 웹사이트 팔로우 버튼을 눌러 내 컨텐츠 에 대한 최신 정보를 얻으십시오. ️를 지원해 주셔서 감사합니다. 2022. 3. 7.
CSS 선택기 img CSS 선택기는 CSS 규칙 집합의 구성 요소이며 스타일 지정하려는 웹 페이지의 내용을 선택하기 위해 구현됩니다. CSS 선택기는 클래스, 유형, 속성, ID 등을 기준으로 HTML의 요소를 선택합니다. 선택자는 다른 스타일에 지정하는 이름입니다. 스타일을 작성할 때 크기, 색상 등을 기준으로 각 선택기의 작동 방식을 정의합니다. 다음은 CSS용 셀렉터의 몇 가지 기본적인 유형이다. CSS 클래스 선택기 CSS ID 선택기 CSS 범용 선택기 CSS 요소 선택기. 클래스 선택기 CSS 클래스 선택기는 특정 클래스 특성에 따라 스타일을 지정할 요소를 선택합니다. 클래스 이름 뒤에 점 기호 " . "가 붙습니다. .nameOfClass { CSS Declarations } 이것은 CSS의 클래스 선택.. 2022. 3. 7.
테일윈드가 뭐야? 제대로 설정하는 방법도요. 요즘 CSS를 위해 테일윈드를 사용하고 있습니다. 첫눈에 테일윈드는 꽤 못생기고 해독하기 어려워 보인다. 이걸 좀 봐. 그것은 정말 못생겼지만 잘 작동해요! Atomic CSS와 유틸리티 클래스(1 클래스 = 1 스타일)에서 영감을 받아 Tailwind는 몇 가지 강력한 설계 결정을 내린다. 마크업과 스타일은 서로 옆에 있어야 합니다(bye, bye 스타일시트). 따라서 두 개의 다른 파일을 변경할 필요가 없으므로 구성 요소를 더 쉽게 작성하고 업데이트할 수 있습니다. 글로벌 네임스페이스를 변경하면 웹 사이트의 여러 항목에 영향을 미칠 수 있으므로 글로벌 CSS는 시간이 지나도 유지 관리가 어렵습니다. 수업 이름을 생각해 내는 것은 시간 낭비입니다. CSS는 브라우저 렌더링 모델에 직접 매핑하는 표현형 .. 2022. 3. 3.
Ethersjs로 나만의 첫 번째 이더리움 디앱 만들기 한 현명한 사람이 "배우는 것은 재미있지만 사람들은 그렇게 보지 않는다"고 말한 적이 있습니다. 이 프로젝트를 하는 것은 편안한 곳에서 벗어나 열심히 갈 수 있기 때문에 흥미로웠습니다. 이제 그만 얘기합시다 에 대해 알아야 합니다. 하이퍼텍스트 기술용 언어(Hypertext Mark-up Language) 솔리드 스마트 계약 웹 페이지와 ethersjs 상호 작용 html과 css 코드를 만드세요 반면 css 코드는 Lite 서버에서 웹 페이지를 렌더링할 수 있습니다. 기본 스마트 계약 작성 •Metamask가 Ropsten Testnet에 연결되어 있는지 확인합니다. 솔리드 계약과 일치하는 올바른 컴파일러 버전을 선택하십시오(컴파일 탭에서). •"Solidity Compiler" 탭을 사용하여 코드를 .. 2022. 3. 3.
Chrome Devtools의 일부 덜 알려진 기능 여기서는 제가 최근에 크롬 데브툴에 대해 알게 된 덜 알려진 기능들에 대해 알아보려고 하는데, 그 기능들을 공유해볼까 생각 중입니다. [현재 Chrome 98을 사용하여 버전을 확인하고 있습니다. Chrome://settings/help로 이동합니다.] 혹시 다른 기능들이 보이면 댓글로 올려주세요. 추가 장치 크롬은 웹페이지를 테스트할 수 있는 장치를 추가할 수 있는 기능을 제공합니다. 장치를 추가/제거하려면 설정 -> 장치 -> 확인/선택 취소로 이동하십시오. 웹 접근성 요소 탭의 "액세스빌티" 탭을 클릭하여 특정 요소(예: h1,p 등)의 접근성을 알 수 있습니다. 네트워크 탭 로그 보존 - 페이지 로드 간에 요청을 저장하려면 로그 보존을 확인합니다. 캐시 사용 안 함 - 이 상자를 선택하면 반복 방.. 2022. 3. 2.
프로그래밍은 배우기 어려운가? 얼마 전 코딩 여정을 시작한 사람(2022년 1월)으로서 튜토리얼과 실제 코딩 사이에 보이지 않는 벽에 부딪히는 기분이 어떤지 잘 알고 있다. 프로그래밍이 배우기 어렵거나 심지어 배울 수 있는 것인지 궁금하다면 제대로 찾아온 것이다. 프로그래밍은 배우기 어려울 수 있지만 코딩 여정을 어디서 시작하느냐에 따라 달라질 수 있습니다. 좀 더 고급적이거나 복잡한 언어로 시작하면 프로그래밍을 배우기가 어려울 수 있습니다. 그렇기 때문에 가장 배우기 좋은 프로그래밍 언어는 HTML이라고 생각합니다. 이 기사에서는 프로그래밍 언어를 배우기로 결심했을 때 직면했던 몇 가지 도전과 이를 극복한 경우, 그리고 코딩 여정을 성공적으로 마칠 수 있는 가능성을 높이기 위해 오늘 할 수 있는 일들을 풀어줄 것입니다. 목차. 프로.. 2022. 3. 2.
Axentix v2를 사용하면 사용할 수 있습니다. v1 발매 이후 Axentix에 대해 들어보셨을지 모르지만, 그 이후로 많은 변화가 있었습니다. 이 기사를 읽으면 시도해 보고 계속하게 될 위험이 있습니다. 먼저, 이 새로운 버전은 개발자의 경험에 초점을 맞추고 있습니다. 주요 목표는 완전한 맞춤 구성 요소를 제공하는 것입니다. 주요 기능 미리 알림 레이아웃 Axentix는 1 클래스 레이아웃 제어 때문에 2019년부터 주로 사용되고 있다. 실제로 본문 클래스와 함께 페이지 레이아웃을 선택할 수 있습니다. 4가지 레이아웃이 준비되어 있으며 앞으로 더 많이 나올 예정입니다. 다음은 현재 사용 가능한 레이아웃 목록입니다. Grix - 그리드 시스템 Axentix 그리드는 CSS 그리드를 기반으로 하여 가장 발전된 제품입니다. 다른 프레임워크 그리드 시스템을.. 2022. 3. 2.
재료 설계 색상 팔레트 생성기 아름답고 일관된 색상 팔레트를 만드는 것은 어렵습니다. 적당한 색을 찾아서 다 잘 어울리게 해야 해. 웹 사이트나 앱에서 보기 좋은 응집력 있는 색상 팔레트를 만드는 것은 어려울 수 있습니다. 제대로 못 맞추면 디자인이 엉망진창으로 보일 거예요. 재료 설계 색상 팔레트 생성기를 사용하면 Google의 재료 설계 지침에 따라 아름답고 일관된 색상 팔레트를 쉽게 만들 수 있습니다. 간단한 도구를 사용하여 수십 가지 색조 중에서 선택하여 프로젝트에 적합한 색상 팔레트를 만들 수 있습니다. 재료 설계란 무엇입니까? 재료 디자인은 구글이 2014년에 개발한 디자인 언어입니다. 그것은 그림자와 조명을 사용하여 3차원 효과를 만들고, 앱과 웹사이트가 더 통일되고 일관된 모습을 보이도록 하기 위한 것이다. 출시 이후,.. 2022. 3. 2.
내 현재 테일윈드 CSS 중단점은? 사이트를 설계하고 각 중단점, 모바일(기본값), sm:, md: 및 그 이상에서 어떤 Tailwind CSS 클래스가 적용되어야 하는지 만지작거릴 때 브라우저가 현재 활성 상태인 중단점을 알려주는 것이 매우 편리할 수 있습니다. 다음 HTML로 부분/파열/구성 요소를 만듭니다. 이 HTML은 고정 z-50 top-2 left-2 클래스를 사용하여 작은 배지가 항상 왼쪽 상단 모서리에 나타나도록 합니다. Breakpoint: mobile sm md lg xl 2xl 3xl 4xl+ 다음으로, 당신의 가장 바깥쪽 레이아웃에서, 현재 페이지의 파라미터가 dev=1 또는 비슷한 것을 포함할 때,태그의 상단 근처에 이 부분/구성 요소를 주입한다. 예를 들어, Ruby on Rails에서 다음을 applicatio.. 2022. 3. 2.
프라메이로 프로제토 다 조르나다 DEV conclusuido - 1/52 세마나스 야단났어요!! 파이널멘테 콘세기 파이널리자 오 프로제토, 에세 포이 오 프라임이로 데사피오 페소알. 시고 에스투단도 HTML e CSS com o cursoemvideo recomendo para quem Estáno da aprendizagem em HTML e CSS, enm de ser super rafido de se fazer. Demorei uns 4 dias, mas poderia ter sido feito em menos tempos, principe se tiver tempo livre Veja como ficou o resultado 결승: 레피토리오는 프로제토를 한다. 비데오 데 코모 피쿠 2022. 3. 2.
웹 사이트 구축에 대한 절대 초보자 안내서. 이 기사 시리즈는 컴퓨터를 사용하는 것에 대해 이미 잘 이해하고 있고 그들 자신, 친구들, 동료들을 위해 웹사이트를 만드는 매우 흥미로운 공간으로 뛰어들기를 원하는 몇몇 사람들에게 절대적인 초보자 친화적인 가이드가 될 것이다.. 이 가이드에서는 앞에서 설명한 대로 컴퓨터 작동 방식에 대해 미리 이해하고 있어야 합니다. 여기에는 컴퓨터 켜기/끄기, 전자 메일 및 소셜 미디어 채팅 보내기 인터넷 사용, 컴퓨터에서 새 파일과 폴더 만들기, 파일 및 디렉터리 이름 바꾸기, 컴퓨터의 창 간 탐색 등이 포함됩니다. 컴퓨터, 컴퓨터 시스템에 응용 프로그램 설치 및 제거. 이 모든 사전 요구 사항을 확인하셨다면, 좋습니다! 우리는 이 기사에서 웹사이트 구축을 진행할 수 있습니다! 2022. 3. 2.
새로 추가된 HTML 요소 CSS로 애니메이션화 우리 모두는 새로 추가된 HTML 요소를 애니메이션화해야 하는 상황에 처해왔습니다. 우리는 클래스를 추가/제거하기 위해 타임아웃, 초기 상태 또는 기타 스크립트 논리를 수정한다. 만약 당신이 간단한 해결책을 원한다면, 여기 당신을 위한 해결책이 있습니다. 새로 추가된 요소를 처리하기 위해 하나의 애니메이션 키프레임만 사용합니다. CSS 애니메이션은 초기 요소 스타일을 기반으로 기본 상태를 관리합니다. @keyframes animate { 100% { opacity: 1; } } css 변환을 사용하여 속성을 재생하여 필요한 애니메이션을 얻을 수도 있습니다. 아래 예에는 두 가지 버전이 있습니다. 일반 항목은 불투명도를 사용하여 페이드인 효과를 만드는 반면, 팬시 항목에는 일부 변환 특성이 부착되어 있습니.. 2022. 3. 2.
8위 포킹 크레이지 CSSBattle 챌린지에 오신 것을 환영합니다! 이 짧은 글에서, 저는 CSSBattle - #8 Forking Crazy 챌린지에 대한 저의 해결책을 살펴봅니다. 나의 사고 과정과 구현 세부 사항에 대한 더 나은 통찰력을 얻으려면 아래의 코드 조각을 참조하세요. 언제나 그렇듯이, 저는 도전의 실행 세부사항에 대한 피드백이나 질문을 환영합니다. 그렇지 않다면, 이것이 유용했기를 바랍니다! 2022. 3. 2.
파일 이름 지정 재미없음 제 개인 웹사이트에서 CSS를 빌드하는 동안 다음과 같은 이름을 시도했습니다. 안타깝게도 광고 차단기가 무자비하다는 것을 잊고 있었습니다. 이 때문에 웹사이트에는 아무런 스타일이 없습니다 운이 나빴군! 2022. 3. 2.
게임 대시보드 UI 게임 대시보드 UI 2022. 3. 2.

티스토리툴바