본문 바로가기

css380

HTML 다음 사이트에서 이 튜토리얼의 소스 코드를 다운로드할 수 있습니다. 소스 코드 다운로드 요소 및 속성 문서 보기 블록 및 인라인 레벨 요소 문서 보기 미디어 파일 및 그래픽 문서 보기 양식 문서 보기 기호 및 문자 집합 문서 보기 포트폴리오 웹 사이트 만들기: 제1부 문서 보기 첫 단계 문서 보기 몇 가지 기본 구성 요소 문서 보기 위치, 오버플로 및 정렬 문서 보기 그리드 시스템 및 응답 설계 문서 보기 몇 가지 고급 항목 문서 보기 부트스트랩 문서 보기 포트폴리오 웹사이트 작성: 제2부 문서 보기 포트폴리오 웹 사이트 만들기: 제3부 문서 보기 2022. 2. 3.
CSS의 미디어 쿼리 미디어 쿼리의 MDN 정의: 미디어 쿼리는 장치의 일반 유형(예: 인쇄 대 화면) 또는 특정 특성 및 매개 변수(예: 화면 해상도 또는 브라우저 뷰포트 너비)에 따라 사이트 또는 앱을 수정하려는 경우에 유용합니다. 이제 MDN이 말한 의 예를 들어 보겠습니다. This is Awesome GIF 위의 예에서 화면 폭이 600px 이하로 내려가면 글꼴 색상이 녹색에서 파란색으로 변하는 것을 알 수 있었습니다. 따라서 미디어 블록 내부의 스타일은 제공된 조건이 참일 때만 실행된다는 것을 알게 되었습니다. 웹 사이트를 만들 때 사용하는 다양한 접근 방식이 있습니다. 일부는 모바일 우선 접근 방식을 사용하고 일부는 미디어 쿼리를 적용하여 동일한 웹 사이트가 바탕 화면에 열릴 때 다른 속성을 설정하고 일부는 데스.. 2022. 2. 3.
바닐라 JS를 이용한 나의 새로운 우주선 브라우저 게임 저는 미니 게임을 만들거나 웹에서 상호작용 디자인을 구현하는 것을 즐깁니다. 그리고 제가 최근에 만든 브라우저 게임입니다! 소스 코드: https://github.com/danialdezfouli/spacecraft-game 온라인 데모: https://spacep.vercel.app/ 자유롭게 질문하거나 당신의 생각을 저에게 공유하세요 :) 2022. 2. 3.
CSS를 사용한 양방향 센터링 때로는 요소를 웹 페이지의 세로 및 가로 가운데에 배치하고자 할 수 있습니다(따라서 양방향). 이 가이드에서는 이를 위해 사용할 수 있는 두 가지 간단한 CSS 기술을 살펴보겠습니다. 이러한 CSS 기술은 포지션과 플렉스박스입니다. 전제조건 이 안내서의 내용을 이해하려면 다음을 충족해야 합니다. 코드 편집기(Visual Studio Code 사용 중) HTML 및 CSS(특히 포지션 및 플렉스박스)에 대한 기본 지식 웹 브라우저(Google Chrome 사용 중) 위치 매개 변수 사용 양방향 센터링을 위해 위치 특성(및 변환 특성)을 사용하여 상위 요소 내의 어디에나 하위 요소를 배치할 수 있습니다. 상위 요소의 위치가 상대적인 경우, 직계 하위 요소는 그 치수, 즉 폭과 높이로 제한됩니다. 어떻게 작동.. 2022. 2. 3.
React, 스타일 구성 요소 및 Framer Motion을 사용한 React형 개인 포트폴리오 웹사이트 동영상 설명에 제공된 링크에서 템플릿을 가져올 수 있습니다. 사용된 기술: 반응하다 CSS 사용된 라이브러리 및 자산: 반응 아이콘 프레이머 모션 스타일링된 구성요소 반응 교차 관측자 포트폴리오 섹션 반응형 탐색 막대 집입니다 서비스 포트폴리오 마일스톤 블로그 프로모션 비디오 가격 책정 추천서 기술들 연락 바닥글 당신은 무엇을 배울 것입니까? 멋진 반응 스타일 구성요소 작성 Framer Motion Animation Library의 사용법 CSS 라이브러리를 사용하지 않고 구성요소 작성 응답형 레이아웃 포트폴리오 섹션의 고급 그리드 레이아웃 추가 요소를 사용하지 않고 응답형 탐색 막대 작성 부드럽게 스크롤하고 맨 위로 스크롤 사용자 지정 추천 슬라이더 만들기 변환과 같은 고급 CSS 속성 이 템플릿을 만.. 2022. 1. 31.
안드로이드 앱 Java,Kotlin,Django,html 2022. 1. 31.
고유한 아바타 색상을 임의로 자동 생성 그리고 새로 고칠 때마다 배경색은 그대로 유지됩니다. 이제 어떻게 이런 일이 일어나는지 잠시 생각해 보세요. 두 가지 간단한 방법이 있을 수 있습니다. DB의 각 사용자에 대해 배경색을 저장하고 다른 사용자 세부 정보와 함께 가져올 수 있습니다. 일부 고유한 사용자 속성(예: 이메일, 사용자 이름 또는 사용자)을 기반으로 고유하지만 일관된 배경색을 생성합니다.아이디) 2번부터 시작하겠습니다. 임의 색상 생성 먼저 웹페이지에서 CSS 컬러의 기본에 대해 알아보겠습니다. 그리고 우리는 이것을 하기 위해 다음 여정을 따라갈 것입니다. CSS 색상 형식에 대해 알아보기 색상 형식 선택 문자열 해싱의 기본 사항 해시 정규화 해시를 사용하여 고유한 CSS 색상 생성 CSS 색상 형식 이 MDN 페이지에서 일반적인 .. 2022. 1. 31.
이것은 타임을 배우는 예시 프로젝트입니다. 이것은 이번 프로젝트에서 완료한 나의 페르소넬 페이지입니다. 링크를 확인합니다. https://athifbinu.github.io/loging.page/ 2022. 1. 31.
당신의 웹사이트에서 멋진 타이핑 애니메이션을 만드세요 | 하루 시리즈의 스포트라이트 실제 사용자가 입력하는 것처럼 보이는 멋진 텍스트 애니메이션을 만드는 방법 알아보기 참조 링크 Typed.js GitHub – https://github.com/mattboldt/typed.js Typed.js 웹 사이트 – https://mattboldt.com/demos/typed-js Create cool typing animation in your 웹사이트 | Spotlight of the day 시리즈는 Coding is Love에 처음 등장했다. 2022. 1. 31.
부트스트랩을 사용하지 마십시오! 경우에 당신이 부트 스트랩은, 부트 스트랩은 전투 근무 지원 체계 알지 못한다. 여기 부트스트랩을 사용하면 안 되는 이유가 있습니다. 모든 사이트가 동일하게 보입니다! 동일한 레이아웃이 계속해서 보이기 시작하면 사용자는 튜닝하기 시작합니다. 넌 날 잃었어. 당신의 디자인은 6천개의 다른 사이트들 중 하나처럼 보입니다. 그리고 같은 일반적인 레이아웃이 아니라 정확한 레이아웃입니다. 똑같아, 부품들 파일은 H U G e! 부트스트랩은 매력적이고 반응성이 좋은 웹사이트를 구축하는 데 도움이 될 것이지만, 일부 모바일 사용자들은 느린 로딩 시간과 배터리 방전 문제로 외면당할 수 있다. 부트스트랩은 CSS와 JS의 많은 라인이 함께 나오는데, 이것은 좋은 점이기도 하지만 인터넷 연결이 좋지 않기 때문에 나쁜 점이.. 2022. 1. 31.
'Voir plus', fair un ellipsis personnalisé comment fair un 줄임말 HTML/CSS에서는 lorsque bottre texte est trop grand pour la place 속성, vousouvez ajouter la valeur text-overflow : 줄임표 pour afficer … ar la fin. 르 프로블렘 에스트 케 셀라 퐁트네 독특함은 sur seule et une et qu`y a pas moyen de voir le texte en entier입니다. 아우저드후이, 누 알롱알롱 돈 보어 엑스 메소데즈 후 텍스 뒤 뒤 뒤 텍스, 산퀼 네 데파스 따위를 부어라! La Methode CSS만 해당 Cette premiier est probablement la methode la pluspre, CSS에서의 엘르스 이력 특색, mais nous ve.. 2022. 1. 31.
나는 나의 첫 번째 웹사이트를 만들었는데, 이 사이트는 HTML 양식에서 이메일로 답변을 보냅니다. 간단한 정적 웹사이트를 만들어서 사용자의 답변을 받아 내 이메일 계정으로 보냅니다. 그래서 HTML, Css, javascript를 이용하여 간단한 웹사이트를 만들었습니다. 웹사이트에 사용된 다른 기술들은 우편물 발송을 위한 노드와 익스프레스였다. 나는 2 npm 패키지 노드 메일러와 노드 메일러-메일러-운송을 이용했어요. 이 소포들의 도움으로 저는 메일을 주고받을 수 있었습니다. 웹사이트가 완성된 후, 저는 그것을 헤로쿠에 배포했습니다. 사이트 방문 제 아이디어가 마음에 드셨다면 학생들과 공유해주시면 감사하겠습니다. 따라오세요. 깃헙 링크드인 2022. 1. 31.
Flexbox(CSS): 알아야 할 모든 것 자, 이제 파티를 시작합시다. (참고: 저는 실천을 통한 학습을 믿습니다. 따라서 이 기사에서 최대한의 가치를 얻으려면 코드 편집기를 열고 기사의 코드를 복사하여 붙여넣어 마법이 일어나는 것을 볼 것을 제안합니다.) Flexbox는 유연한 상자를 의미합니다. 용기의 항목을 쉽고 효율적으로 정렬할 수 있는 방법을 제공합니다. Flex 항목: 정렬하려는 요소입니다. Flex 컨테이너: 이러한 Flex 항목을 포함하는 상위 컨테이너입니다. 주축: 플렉스 아이템을 정렬하려는 축입니다. 교차 축: 축은 주축에 수직입니다. 이해를 높이기 위해 flexbox 속성을 두 부분으로 나눕니다. (1) 플렉스 컨테이너에 적용되는 특성: (a) flex-direction (b) flex-wrap (c) justify-cont.. 2022. 1. 31.
CSS 포지션 절대 대 상대 쉬운 방법! CSS 위치 속성 CSS 위치 속성은 요소의 위치를 결정하며 요소가 브라우저에 표시되는 방법에 중요한 역할을 합니다. 절대위치 절대 위치에서 요소는 상위 요소에 대한 위치와 레이아웃을 변경합니다. 부모를 찾지 못한 경우 문서 본문을 사용합니다. 상대 위치 상대적 위치에서 요소는 배치에 영향을 미치지 않고 현재 위치 내에서 위치를 변경합니다. 2022. 1. 31.
7 2022년 웹 사이트에 가장 적합한 글꼴 웹 사이트에 적합한 글꼴을 선택하는 것은 어려운 작업일 수 있습니다. 그리고 그것들은 당신의 WordPress나 HTML 웹사이트의 디자인에 중추적인 역할을 하기 때문에, 당신이 당신의 브랜드의 특성을 반영하는 글꼴을 선택하는 것이 중요하다. 사용자에게 친숙하고 읽기 쉬우며 모든 브라우저와 호환되어야 합니다. 이 기사에서는 2021년에 사용할 수 있는 웹 사이트에 가장 적합한 글꼴 7개를 살펴봅니다. 자, 시작합시다. 하지만 먼저, 그것들이 왜 중요한지 살펴보자. 글꼴이 중요한 이유 웹사이트 디자인의 90%가 글꼴을 기반으로 한다는 것을 알고 있었나요? 따라서 올바른 글꼴을 선택하는 것이 중요합니다. 이유는 이렇습니다. 당신의 브랜드를 반영합니다. 고객에게 올바른 브랜드 메시지를 전달할 수 있지만 글꼴 .. 2022. 1. 31.

티스토리툴바