본문 바로가기

분류 전체보기380

시각적 계층 How you can control users what to see and when. . . . . . . . . 설계 구성요소 배치는 사용자가 제품을 볼 수 있는 순서에 영향을 미치는 중요한 역할을 합니다. 시각적 계층은 그저 그것이다. 스타일링, 콘트라스트, 사이즈, 스케일, 밸런스가 효과적인 제품을 만드는데 도움을 줄 수 있습니다. 사용자의 마음에 쏙 드는 제품. 저는 여기서 더 많은 사례를 접했을 때 깜짝 놀랐습니다. 여기 제 코드펜이 있습니다. 생각? 알려주세요! :) 감사합니다. 2022. 3. 9.
무료 소스 코드 다운로드 img CSS를 사용한 다중 색상 텍스트 효과 csstexteffect #csstext #texteffectwithcss YouTube 전체 튜토리얼 보기 무료 소스 코드 다운로드 2022. 3. 9.
세군도 프로제토 2/52 img 호제 민하 이르망 me mostrou seu livro de Inglés da escola, e Umas das atividades um site de resita, como nang tinha decido qual projeto ia etha sema semana sema sema semana semana, 데시타, 데시타, 데시타, decido inspir is secir seo inspirca is secirca sea 아세세이는 데 셰프들을 이 피줌 모델로의 무화과입니다. 난오텐호 탄타 경험 없음 마스 콘세귀 체가르 음 결과도 케 고스테이, 아고라 소 팔타 콜로카 엠 프라티카. 보 데이샤르 오 링크 도 피그마 파라 켐 콰이저 텐타르 탬베엠! 무화과 2022. 3. 7.
당신의 코드가 디자인과 일치하는지 어떻게 확인할 수 있나요? img 프로그래머의 CSS 속성, 특히 여백과 패딩의 손실 트랙도 있다. 그러나 UI 디자이너들은 항상 너무 똑똑해서 차이점을 발견할 수 없습니다. 마지막 주 업무에서 코드가 맞지 않아 두 번이나 티켓(지라 티켓)을 돌려받았습니다. 저는 똑같아 보였어요. 하지만 그 디자이너는 작은 차이를 알아챘습니다. 그래서 저는 그들에게 그 차이를 비교하기 위해 어떻게 또는 어떤 소프트웨어를 사용하냐고 물었습니다. 알고 보니 그들은 내가 만든 최종 제품의 스크린샷을 디자인 위에 덧씌우기 위해 간단한 피그마와 포토샵을 사용하고 있습니다. 하지만 개발자로서 피그마를 편집할 수 있는 권한이 항상 있는 것은 아니기 때문에 다른 솔루션을 찾아야 합니다. 여기 완벽한 픽셀 크롬 플러그인이 있습니다! 현재 웹사이트 위에 사진을 오.. 2022. 3. 7.
우리 둘 다 바닐라로 끈적끈적한 나바를 만들자. img 블로그를 포함한 많은 웹사이트에 끈적끈적한 내비게이션 바가 있다는 것을 우리 중 많은 사람들이 알아챘습니다. 지프, 지아이에프, 그래픽 인터체인지 포맷(Graphic Interchange Format) 여기 GIF에서는 보시다시피 Navbar가 페이지 상단에 고정되어 있습니다. 끈적끈적한 내바를 유지하는 유일한 목적은 매력적으로 보이고 접근하기 어렵게 만든다. 그래서, 네 웹사이트에 끈적끈적한 탐색기를 추가하고 싶어? 먼저 Vanilla CSS cape부터 시작하겠습니다. 탐색바의 기본 층계 작성 stickattop 스크롤을 만들 이미지 추가 ``` CSS 를 시작할 시간입니다. - 스타일링 탐색 막대 ```js .container{ position: fixed; top: 0; width: 100.. 2022. 3. 7.
Github를 WordPress 웹 사이트 호스팅에 사용하는 방법 Github Pages, Apache Support를 지원하지 않으므로 PHP 콘텐츠를 표시할 수 없지만 Github 무료에서 PHP 기반 WordPress 웹 사이트를 호스팅할 수 있습니다. 그렇다면 어떻게 Github에서 WordPress를 호스팅할 수 있을까요? 이 프로세스에는 5가지 주요 단계가 있습니다. 개발자를 위한 무료 웹 호스팅 제공 인터넷에는 무료 웹 호스팅 사이트가 많이 존재하지만, 이제 우리는 PHP 웹 사이트를 포함한 무료 웹 호스팅을 제공하는 FreeHosta를 사용할 것입니다. FreeHosta의 기능 다른 무료 웹 호스팅 서비스와 달리 FreeHosta는 다음을 제공한다: 웹 사이트 고속 로드 속도(평균 480Ms) 50,000개 아이노드(InfinityFree보다 14500개.. 2022. 3. 7.
HTML CSS가 포함된 웹 세미나 예약 웹 사이트 템플릿 완료 img 안녕하십니까 여러분, 저는 atulcodex.com의 atul입니다. 이번 개발 포스트에서 저는 저의 #10웹사이트 #10mlcss 챌린지의 5번째 응답형 웹사이트에 대해 말씀드리겠습니다. HTML CSS가 있는 10개 웹사이트라는 도전에 대해 이름만 들어도 알 수 있듯이 이 사이트만 제외하고 HTML과 CSS만으로 구성된 응답형 웹사이트 5개를 보게 된다. Webinar 예약 웹 사이트 여기는 웹 세미나 예약 사이트이거나 깔때기 사이트라고 할 수 있습니다. 참석자의 정보를 수집하여 후보자의 좌석 수를 조정할 수 있는 웹 세미나 주최자에게 유용합니다. 이 간단하고 깨끗한 웹사이트는 스마트폰, 노트북, 데스크탑, 심지어 TV와 같은 모든 기기에서 반응합니다. 아, 미안하다 이 사이트 전에 만들었던 .. 2022. 3. 7.
[시론] 2022년 img 응용 프로그램의 프런트엔드를 설계하거나 엔지니어링한 경우, 설계 시스템의 개념에 이미 익숙할 수 있습니다. 익숙하지 않은 사람들을 위해, 설계 시스템은 규모에 맞게 설계를 관리하기 위한 일련의 지침과 원칙을 조직한다. 그들은 그 자체로 다른 제품의 개발에 도움이 되는 극도로 긴밀한 엔지니어링 및 설계 협업을 가진 제품이다. 저는 개인적으로 디자인 시스템으로 작업하는 것을 매우 좋아합니다. 이 기사에서는 수년간 디자인 시스템으로 작업하면서 배운 몇 가지 기본 원칙과 자신만의 시스템을 구축하는 데 사용할 수 있는 툴링에 대해 알아보겠습니다. 음 그래 예술. 바라건대, 당신이 이 기사를 읽고 이렇게 느끼길 바랍니다. 디자인 시스템이란 정확히 무엇입니까? 그렇다면 실제로 디자인 시스템이란 무엇일까요? 본.. 2022. 3. 7.
4가지 데모에서 설명하는 CSS From Font 가치 img UI Components의 Advention을 하던 중 텍스트 장식 두께 CSS 속성의 From font 값을 우연히 발견했습니다. 그게 궁금해서 조금 조사를 해봤는데 제가 발견한 것(배운 것)이 재미있기도 하고 공유할 가치가 있다고 생각합니다. From-font 값 정보 MDN이 from-font 값을 정의하는 방법은 다음과 같습니다. 따라서 From-font 값은 글꼴 파일에 선의 두께에 대한 정의가 있는 경우에만 사용됩니다. 그렇지 않으면 브라우저는 두께를 선택하라는 자동 값을 사용합니다. 어떻게 작동하는지 알고 싶어서 다른 값과 비교해서 몇 가지 데모를 만들었습니다. 데모 1: 텍스트 장식 두께: 자동 첫 번째 데모에서는 두께에 대한 자동 값이 기본 글꼴 패밀리에 대한 밑줄, 겹침 및 취소.. 2022. 3. 7.
MUI CSS 스타일 구성 요소 슬라이더 mui でのスタイリングの 2 種類の比較 https://mui.com/guides/understand-mui-packages/ themeprovider, styled のスタイリング api が存在して、どちらかを選ぶらしい。 前のチームでは themeprovider を使っていて 今回のチームでは styled を使っている。 https://mui.com/customization/theming/#무엇보다 빠른 theming で毎回 themeprovider を書いてネストするので汚くなりがち。 스타일링한 styled themeprovider でのラップと比べて、 export された名前の component を吐き出すので、使用するコンポーネントでテーマを意識しなくていいのが特徴。 스타일링한 つ 2つ import { styled } fr.. 2022. 3. 7.
뮤 스타일 mu 박스 に 아코디언 sx x 스타일 mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu mu Image description 参考に ttp してサイドバーを styled の訓練として作ってみる 아코디언 を accord accord accord accord accord https://mui.com/components/accordion/ npm i @mui/icons-material icons が必要なので別途 import する mui のサンプルをコピーしてくるとこうなる。 accordion 1 のコードに注力してみる。 Accordion 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. 아코디언 の accord accord accord.. 2022. 3. 7.
3D 텍스트 효과 2022. 3. 7.
CSS 소개 CSS(Cascading Style Sheets)는 HTML과 같은 마크업 언어로 작성된 문서가 어떻게 보이는지를 표현하기 위한 스타일시트 언어입니다. CSS는 레이아웃, 색상 및 글꼴을 포함하여 프리젠테이션을 내용과 분리할 수 있는 스타일시트 언어입니다. 이러한 분리는 콘텐츠 접근성을 향상시키고, 프리젠테이션 특성에 대한 더 많은 유연성과 제어를 제공하며, 여러 웹 페이지가 별도의 .css 파일에 관련 CSS를 지정하여 포맷을 공유할 수 있게 하며, 구조적 콘텐츠의 복잡성과 반복을 줄이고, .css 파일을 캐시할 수 있게 한다.파일을 공유하는 페이지와 파일 형식 간의 페이지 로드 속도. 선택기는 우리가 웹페이지에서 커스터마이징하고 싶은 HTML 구성 요소를 대상으로 하기 위해 CSS에서 사용된다. CS.. 2022. 3. 7.
인도에서 해커톤을 연 가장 큰 학생 img 우리는 모든 아이디어와 혁신이 사회에 상당한 이익을 줄 수 있다고 믿는다. 적절한 기술과 결합할 경우, 계획 IIIT 알라하바드의 학생들에 의해 매년 조직된 북한의 핵은 빠르게 성장하여 인도에서 가장 큰 학생들이 소유한 해커톤 중 하나가 되었다. 기술과 다양성의 기념행사인 이번 행사는 기여자들이 안전하고 포괄적인 환경을 마련해 실생활 문제에 대한 해결방안을 모색하는 데 목적이 있다. ** 대상 - 60,000권 2위 - 5만 명 2위 주자 - 40,000명 대표성이 낮은 카테고리에서 최고의 팀 - Rs. 30,000 최고의 디자인 - 20,000점 이를 염두에 두고, 우리는 프로그래머와 디자이너 지망생 모두를 IIIT 알라하바드 학생들이 주최하는 36시간의 해커톤인 핵인더노스(Hack In The.. 2022. 3. 7.
프런트 엔드 개발자로서 색상 대비율이 충분한 시기를 어떻게 알 수 있습니까? 저는 2가지 색상을 취해서 예상 대비율을 얻기 위해 어떤 것을 바꾸고 싶은지 물어본 후 비율이 맞는 2가지 색상이 있는지 찾아봤습니다. 제가 이것을 테스트해 봤는데, 사용자라면 매우 유용한 것 같아요. 또한 값을 필요한 색으로 설정하여 나중에 복사할 수 있도록 하는 것도 도움이 됩니다. https://chrome.google.com/webstore/detail/fix-contrast/pbbcgecjmpkglppfjjggkkbhdnlemhkg/related 하지만 위와 같은 시스템을 갖추면 좋을 것 같습니다. 그런 도구 아시는 분? 고마워요. 2022. 3. 7.

티스토리툴바