본문 바로가기

css380

⚡HTML CSS를 사용하여 응답형 랜딩 페이지 작성 안녕하세요, 개발자 여러분, 새해 복 많이 받으세요! 그래서 오랜 휴식 후에. 또 다른 반응? 예, 응답성 랜딩 페이지 작성에 관한 다양한 블로그를 만들어 보았으며, 링크는 http 아래에 있습니다. 전체 블로그 게시물을 읽는 대신 코드 튜토리얼을 시청하는 데 관심이 있다면 아래의 비디오를 시청하십시오. 이 게시물의 소스 코드는 Github에서 모든 이미지와 함께 사용 가능하므로 소스 코드를 얻으려면 아래 링크를 방문하십시오. 다시 한 번 코딩 블로그 포스트에서, 우리는 가장 근본적인 두 가지를 다루고 있다. 당신은 둘 사이의 주요 차이점이 무엇인지 알고 있었나요? 만약 당신이 이미 알고 있다면, 만약 당신이 절대적인 천재라면, 걱정마세요, 아래에 주어진 이미지는 CSS Flexbox VS CSS Gri.. 2022. 1. 13.
마이크로소프트 메이크코드 아케이드를 사용하여 짧은 게임을 만들었다. 저는 마이크로소프트 메이크코드 아케이드를 사용하여 게임을 만들었습니다. 여기서 접속할 수 있습니다. 소도 게임 내 웹사이트가 세계에 알리다 이전 장 2022. 1. 13.
웹 사이트 확인을 위한 확장 크롬 이것은 좋은 연장선이다 모든 장치 크기로 프로젝트를 확인하고 보려면 응답 뷰어를 검색한 후 Google로 이동합니다. 또한 이 링크를 클릭할 수 있습니다. 확장 응답 뷰어 그것은 어떻게 작동합니까? 당신은 아무 웹사이트나 가서 이 도구를 클릭해야 한다. 2022. 1. 13.
CSS의 세 가지 필수 요소 아, CSS, 웹의 위대한 화가. CSS를 사용하면 원하는 만큼 웹을 예쁘거나 못생기게 만들 수 있습니다. CSS는 Cascading Style Sheets의 줄임말이며, 그것의 이름은 말할 것도 없이 그것이 실제로 하는 일을 나타냅니다. 이것은 브라우저가 웹의 스타일을 맞추기 위해 읽는 텍스트의 한 장입니다. 캐스케이드 이제 이 필수 사항들에 대해 알아보겠습니다. 내가 이전에 암시했듯이 첫 번째는 이름에서 찾을 수 있다. 캐스캐이딩은 첫 번째이자 가장 중요한 개념인데, 다른 두 가지는 불완전하고 그것 없이는 이치에 맞지 않기 때문이다. 캐스케이딩은 브라우저가 파일을 읽는 방식을 말합니다. 폭포 위로 물이 폭포처럼 쏟아지는 것을 생각해 보세요. 물은 높은 곳에서 낮은 곳으로 흐릅니다. 그리고 우리 인간이.. 2022. 1. 13.
놀라운 CSS 프레임워크의 세계 2018년 2월에 저는 Dev.to 에 가입했고 놀라운 Awesome CSS Frameworks를 발견했습니다. 나는 부스트랩을 제외한 모든 세상을 사랑했다. 저는 repo와 저만의 광범위한 목록을 작성했고, 제 스타일로 제가 만나고 싶은 새로운 CSS Framework를 쉽게 검색할 수 있도록 구성했습니다. 그렇게 해서 가보의 어메이징 CSS 프레임워크와 UI 라이브러리가 탄생했습니다. 4년 동안 이 보고서를 유지한 후 공유하고자 하는 몇 가지 정보가 웹에 관심을 가질 수 있습니다. CSS 프레임워크/프레임워크가 필요한 경우 다음 TOP 5는 협력하기에 매우 적합한 후보입니다. 부트스트랩 - 155K 뒷바람 CSS - 51K 불마 - 45K 구체화 - 39K 기초 - 29K 리액트에 빠져 있는 경우 그.. 2022. 1. 13.
100일 코드 안녕하세요 저는 초보자이며 풀 스택 웹 개발을 배우려고 합니다. 그래서 오늘부터 #100DaysOfCode 도전을 받아들이기로 했고 꼭 해낼 수 있기를 희망합니다. 내가 해낼 수 있었으면 좋겠어. 2022. 1. 13.
커서 사용자 지정 시작하기 전에 몇 가지 문맥을 알려드리겠습니다. 우리 모두가 사용하는 전형적인 커서의 커스터마이즈에 영감을 받았습니다. 구글링, 조사, 비디오 시청을 했지만 아무런 가치도 찾을 수 없었다. 자, 여기 여러분만의 멋진 커서를 만드는 것에 대한 기사가 있습니다. 이것이 오늘 우리가 짓고 있는 것입니다. 사용자 정의 커서 - 비디오 보기 시작해보자: 개요는 다음과 같습니다. 위에 보이는 화려한 커서는 반지처럼 보이게 스타일링된 2개의 디브일 뿐이다. 원래 커서의 위치를 추적합니다. 원래 커서의 위치에 따라 사용자 정의된 커서를 이동합니다. 그리고 마지막으로 원래의 커서를 숨깁니다. 네, 그렇게 간단합니다. CustomCursor 구성 요소: 리버스 엔지니어링. 다음과 같은 방식으로 app.js에서 Custom.. 2022. 1. 13.
FreeCodeCamp의 FCC 구축: Shrikant Dayje의 개인 포트폴리오 2022. 1. 13.
저는 100대의 '다크 모드' CSS 로더로 돌아왔습니다. 지난 컬렉션 이후 오랜만인데, 다른 컬렉션과 함께 하게 되었네요. CSS 전용 적재기 100대로 2022년을 시작합시다. 이번에는 다크사이드에 합류해서 다크모드 로더를 만들었습니다. 항상 동일한 규칙: One div = One loader. 어서 가자! 목차 더 무빙 인피니티 II 메이즈 더 스퀘어 서클 더 아이즈 더 팩토리 더 스퀘어 대 더 서클 블롭 2 3D 더 무빙 인피니티 II 메이즈 미로에서 길을 잃은 점... 더 스퀘어 서클 더 아이즈 보고 있어요. 더 팩토리 더 스퀘어 대 더 서클 블롭 2 3D 아래를 보기 위해 3D 안경이 필요하지 않습니다! 그거야! 다음 컬렉션에서 봬요 날 지지하고 싶어? 2022. 1. 13.
페이지 속도 저희 웹사이트의 개설 속도에 어떤 기술적 문제가 있다고 생각하시나요? 샘플 페이지 https://or.av.tr/faaliyet-alanlari/ankara-bosanma-avukati-aile-ve-bosanma-davalari/ boshanma avukaté 앙카라 2022. 1. 13.
HTML을 사용한 Facebook 우체통 복제 여러분, 오늘 이 튜토리얼에서는 HTML CSS로 Facebook 우편함을 만드는 방법을 배우게 될 것입니다. 만약 당신이 페이스북 사서함 복제에 관한 전체 기사를 읽고 싶다면 당신은 코드기안에서 읽을 수 있다. 2022. 1. 13.
깃허브에서 어떻게 조종했지? 팝업 에피소드 1: 드롭다운 에피소드2: 모달 대화 상자 에피소드3: 햄버거 메뉴 에피소드4: 팝업 씌우다 지난 회에서 우리는 디테일과 요약 태그가 있는 햄버거 메뉴를 만들었습니다. 지금이다 이것은 이 멋진 태그를 사용하여 팝업을 만드는 이 시리즈의 마지막 에피소드입니다. 평소처럼 지루하고 반복적인 html로 시작합시다. I'm a popcorn You are awesome!! 아, 팝콘 영화 볼 시간이야 잠깐, 멍청한 아코디언이지 그래 그래 너의 좌절감을 봤어.. 술을 마시다 있잖아, 이걸 위해 처음부터 다시 시작할 필요는 없어. 팝업은 우리가 첫 번째 에피소드에서 디자인한 드롭다운과 동일합니다. 차이점은 다음과 같다. 팝업은 모든 유형의 내용을 포함할 수 있는 반면 드롭다운은 선택사항 목록을 포함합니다. .. 2022. 1. 13.
CSS 방법론 CSS를 쓰는 것은 쉽다. 확장 가능하고 유지 보수 가능하게 만드는 것은 그렇지 않습니다. 앱의 CSS를 업데이트하고 다른 것을 깨트렸을 때 시나리오를 경험하셨나 보네요? 당신이 바꿔야 할 CSS가 어디서 오는지 궁금했나요? HTML을 업데이트했는데 디자인이 망가졌나요? 당신은 왜 그것이 브라우저에 적용되지 않았고 그리고나서 결국 다른 CSS에 의해 오버라이드 된 것을 발견했는지 궁금해 한 적이 있는가? 이것은 여러분이 더 나은 방법이 있다고 결정하고 CSS 방법론을 발견했을 때입니다. 이것은 모든 두통에 대한 좋은 해결책으로 보입니다. CSS 방법론에는 여러 가지가 있지만, 결국 여러분의 프로젝트에 맞는 것이 무엇이냐가 관건입니다. 또한, 여러분은 그것들이 없어도 완벽하게 괜찮다고 생각할 수 있고 여러.. 2022. 1. 13.
CSS를 사용하여 클레이모피즘 만들기 시작합시다. 이 프로젝트의 전제조건은 매우 낮고 우리의 모든 초보 친구들이 할 수 있다; 우리가 필요한 것은 HTML과 CSS에 대한 기본적인 지식이다. 클레이모피즘은 다음과 같다. 기본적인 CSS를 추가하고 내용을 중앙에 배치해 보겠습니다. * { box-sizing: border-box; } body { margin: 0; background: #a2e5ff; color: #2D3557; font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; } 참고: 프로젝트에 Poppins 글꼴 가져오기 이제 HTML 파일로 우리의 카드를 만들 차례입니다. Hav.. 2022. 1. 13.
JavaScript 페이지 스크롤 진행률 표시줄 페이지 상단에 진행률 표시줄이 있는 여러 블로그/뉴스 기사 웹 사이트를 발견했을 것입니다. 이 웹 사이트는 페이지 전체를 스크롤하면서 계속 변경됩니다. 여기서 HTML, CSS, 간단한 자바스크립트를 사용하여 구현하는 방법을 알아보겠습니다. 여기서 코드펜에 직접 접속할 수 있습니다. 먼저 HTML 마크업의 본문 태그 바로 뒤에 id progressBar가 있는 빈 div를 추가합니다. 이 표시는 페이지 상단에 고정될 것입니다. 이를 위해 CSS 속성을 추가해 보겠습니다. div는 처음에 비어 있으므로 표시기 너비의 변경 사항은 전체 div 너비(진행 표시줄이라고도 함)에 영향을 미칩니다. 너비:0부터 시작하여 JavaScript를 사용하여 전체 페이지를 스크롤할 때 이 너비의 스타일을 계산하고 다양화할 .. 2022. 1. 13.

티스토리툴바