본문 바로가기

전체 글380

종횡비를 유지하고 화면에 맞는 유체 블록 CSS DIV 블록을 화면에 맞추고 가로 세로 비율을 유지하고 싶은 경우가 있었나요? 여기 제가 만든 예가 있습니다. 빨간색 블록은 가로 세로 비율을 유지하며 화면에 맞습니다. GIF 코드는 이렇습니다. /* quick sanitizer */ * { margin: 0; padding: 0; } .block { background-color: red; height: 100vh; max-width: calc(100vh * 16 / 9); max-height: calc(100vw * 9 / 16); margin: 0 auto; position: relative; width: 100vw; } .container { align-items: center; display: flex; justify-content: cente.. 2022. 2. 23.
CSS의 형제 조합자 우리가 형제라고 부르는 것과 약간의 혼동이 있을 수 있습니다. 그럼, 먼저 그걸 치워버리자. 아래 코드를 참조하십시오. 1st Heading Lorem ipsum text 2nd Heading Lorem ipsum text Lorem ipsum text 위의 코드에서는: h2(1번째 제목)에 형제(상위: .div1)가 없습니다. p, h2(2번째 제목), p 및 p는 형제입니다(상위: .div2) 클래스 div1 및 div2는 형제(상위: 본문)입니다. 형제 조합에는 두 가지 유형이 있습니다. 인접 형제 조합자 일반 형제 조합자 먼저 인접 형제 조합기를 이해하겠습니다. MDN은 다음과 같이 말합니다. 인접한 형제 조합자(+)는 두 개의 선택자를 구분하며 첫 번째 요소 바로 뒤에 오는 경우에만 두 번째 요.. 2022. 2. 23.
SVG를 사용한 대화형 지글리퍼프 대화식 Jiggliffuff로 최신 CodePen 출시 https://codepen.io/nicofonseca/full/YzQZaxj SVG로 제작되고 GreenSock 으로 애니메이션 제작 제 목표는 쌍방향 지글리퍼프를 만들어서 옷을 입히고 가지고 놀 수 있게 하는 거였어요. 디자인, 일러스트, 애니메이션을 만들어 귀엽게 만들면서 정말 재미있었어요. 코드와 관련하여 저는 SVG만 사용하는 것이 목표였기 때문에 요소와 애니메이션을 동시에 가지고 있어 성능이 문제였지만, GSAP는 이를 가능하게 했습니다. 여러분이 지글리퍼프와 즐겁게 놀기를 바랍니다! 2022. 2. 23.
보아스 프라티카스 엠 클래스네임 no CSS 인트로두상 CSS의 Creio qu to desenvolvedor seja 백엔드 acle "receivio" de mexer com. 파즈 우마 에스틸리자상 에 우마파르테 에스피카 다 아플라카상 에 오에스틸로스 아디시오나도스 아카밤 "바잔도" 파라 아우트로스 원소. 학명이 em CSS 상 알타멘테 우틸리자다스 파라 포더(poder)는 에스티리자당 e 탐베엠 우틸리자다스 세레토르 무이타 다스 베즈 오 토마모스 오 퀴다도 니스타리우(ná Tomamos o cuidado muishario me)라는 학명을 사용하며, 그에 따른 포뎀 오코르세 데 에스티우데오라는 학명을 사용한다. O modelo BEM Este modelo BEM, vejo como sendo bem meritouse na separasang.. 2022. 2. 22.
퀘 나시오 에스토? 중요: 에스크리바 세리아멘테, 푸에도, 에스타 엔 크리올로, 아르젠토, 토도 퀘 리스아바호. 핀: 부에나스 부에나스 에스토 이바 a ser unhilo dominguero in Twitter, pero a medida que me escribia me di cuenta cuenta que se iba un poco de las manos... obvio que는 haciendo otra cosa, me distraje y pensé "no me acuerdo y quiero volver a saber ? httml, css, 자바스크립트 y quue primero, el huevo o o or la gallina?"를 설립하였다. 페로 노에, 데자테 데 조더, 사베모스 데 메모리아... 부에노, 코모 레.. 2022. 2. 22.
CSS에서 절대 위치 대 상대 위치 제가 웹 개발을 배우기 시작했을 때, 몇몇 주제들은 저를 혼란스럽게 했습니다. 그중에서도 CSS 포지셔닝이 그 중 하나였다. 저는 이 주제에 대한 명확한 아이디어를 위해 일정 시간을 투자했습니다. 제가 이해한 것은 다음 파라스에 적어보도록 하겠습니다. 저는 전문 용어를 사용하지 않고 복잡함을 피하려고 노력할 것입니다. 우리는 CSS-절대 및 상대적인 두 종류의 위치를 발견한다. 상대 위치: 보조자, 4개의 점들이 있는데, 이 점들은 1, 2, 3, 4로 표시됩니다. 첫 번째, 두 번째, 세 번째 칸은 더 작고 네 번째 칸은 더 큽니다. 큰 div는 작은 div를 둘러싸고 있다. HTML 마크업은 다음과 같다: Button 1 Button 2 Button 3 우리는 브라우저를 보면 아래와 같은 수치를 얻을.. 2022. 2. 22.
CSS를 사용한 배치 배치 배치 이해 도입 CSS로 작업할 때 결국 설계 목표에 도달하기 위해 문서 레이아웃을 재정렬해야 하는 설계에 직면하게 됩니다. CSS는 이러한 작업에 직면했을 때 이를 위한 다양한 방법을 제공합니다. 이 기사에서는 이러한 방법 중 몇 가지를 다룰 것입니다. 위치: 위치 속성은 문서에 요소를 배치하거나 배치하는 방법을 설정합니다. 상단, 하단, 왼쪽 및 오른쪽 특성은 요소의 위치를 설정하는 데 사용됩니다. 이들은 위치 요소에만 영향을 미칩니다. 위치 특성은 요소에 사용되는 위치 지정 방법 유형도 지정합니다. 정적, 상대적, 고정적, 절대적 또는 끈적거릴 수 있습니다. HTML CSS div.ball{ border-radius: 50%; background-color: red; width: 100px; height: 1.. 2022. 2. 22.
HTML, CSS 및 Javascript를 사용한 응답형 사이드바 메뉴 설계 독자 여러분, 오늘은 이 블로그에서 HTML, CSS 및 Javascript를 사용하여 응답성이 뛰어난 사이드바 메뉴 디자인을 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML, CSS, Javascript를 사용하여 반응성이 뛰어난 탐색바 디자인을 만드는 방법을 살펴보았습니다. 이제 반응성이 뛰어난 사이드바 메뉴 설계를 만들 차례입니다. 자바스크립트와 관련된 프로젝트도 많이 공유했습니다. 그러니까 여기 확인하는 거 잊지 마세요. 이 디자인 [응답형 사이드바 메뉴]에는 페이지 왼쪽에 사이드바가 있습니다. 이 사이드바는 배경색이 짙은 파란색입니다. 기존에 공유했던 메뉴 토글 버튼이 있어 버튼을 클릭하면 사이드바에 클래스가 추가되고 부드러운 전환으로 폭이 커집니다. 여기서 미리보기를 사용할 수 .. 2022. 2. 22.
CSS 프레임워크 소개(부트스트랩) 도입 웹 개발에서 프레임워크의 활용에는 다른 측면이 있으며, 더 중요하게는 CSS3와 자바스크립트를 위한 프레임워크를 수반하는 프런트엔드 엔지니어의 영역이다. CSS 프레임워크의 경우 Tailwind와 Bootstrap인 반면 자바스크립트 프레임워크의 경우 Reactjs, Vuejs, AngularJs가 있다. 부트스트랩에 대해 얘기해보도록 하죠 전제 조건 이 프런트 엔드 프레임워크를 사용하기 전에, 전제 조건이라고도 할 수 있는 기본 사항을 이해할 필요가 있습니다. 그리고 이러한 이해는 부트스트랩 프레임워크를 프런트엔드 개발자로 활용하는 방법일 수 있으며 HTML5 및 CSS3 사용 방법에 대한 이해를 수반합니다. 하지만 부트스트랩을 아주 잘 활용할 수 있으려면 이것을 배우고 이해하려는 의지가 있어야 .. 2022. 2. 22.
CSS에서 논리 쓰기 CSS는 스타일 시스템에 초점을 맞춘 고도로 전문화된 프로그래밍 언어이다. 이러한 독특한 사용 사례와 선언적 성격 때문에 때때로 이해하기 어렵습니다. 어떤 사람들은 심지어 그것이 프로그래밍 언어라는 것을 부인하기도 한다. 스마트하고 유연한 스타일의 시스템을 프로그래밍하여 그들이 틀렸다는 것을 증명해 봅시다. 제어 구조 좀 더 전통적인 범용 언어(JavaScript 같은)는 조건(if/then), 루프(loops, for, while), 논리 게이트)와 같은 도구를 제공합니다. 변수 변수는 가장 간단한 변수입니다. CSS에서는 Custom Properties라고 합니다(모두가 변수라고 부르지만 심지어 자신의 구문이라고 부르기도 함). :root { --color: red; } span { color: va.. 2022. 2. 22.
주 이미지 색상 간 전환을 사용하여 프레임 애니메이션화 즉시 고지 사항 - 이미지 프레임에 애니메이션을 적용하는 것이 아니라 이미지 뒤에 있는 배경에 애니메이션을 적용하고 패딩을 추가하는 것입니다. 저는 제 프로젝트 중 하나에 업로드된 이미지 그리드에 있는 몇몇 이미지에 더 많은 관심을 끌고 싶었습니다. 무난한 카드 디자인을 하거나 이미지 주변의 테두리와 그림자를 수정하지 않고 이 기술을 고안해냈습니다. 이 아이디어는 메인 이미지 색상을 추출하고 그 사이의 전환을 통해 그라데이션(gradient)을 구성하는 것입니다. 이 그라데이션은 이미지를 "원 둘레"로 만들어 더욱 생동감 있고 활기차게 보이게 합니다. 동시에, 각 이미지는 고유한 애니메이션 그라데이션이 있을 것이며, 이는 이미지, 이미지 프레임, 용기 배경색 간의 전환을 더욱 원활하게 만들어 줄 것이라고.. 2022. 2. 22.
jarallax.js로 아름다운 시차 랜딩 페이지를 만드는 방법 이 기사에서는 jarallax.js로 아름다운 시차 랜딩 페이지를 만드는 방법을 보여드리겠습니다. 소스 코드 GitHub에서 이 저장소의 소스 코드와 이미지를 찾을 수 있습니다. 당신이 그것을 좋아한다면 그것을 스타로 만들고 자신만의 버전을 만들기 위해 포크를 하세요. 비디오 튜토리얼 나는 이미 내 유튜브 채널에 그것에 대한 동영상을 만들었어. 저것 좀 봐봐. Cules Coding 많이 좋아해주시고 구독해 주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다. CDN HTML Parallax Consectetur sunt Dolor odio. Adipisicing pariatur Consectetur accusamus? Ipsum deleniti? ``` 설명: - 우리는 모든 jarall.. 2022. 2. 22.
무한 루프 React 구성 요소 얼마 전, 제가 작업하던 프로젝트가 특이한 요구 사항을 제시했습니다. 기본적으로 콘텐츠의 한 부분이 화면을 무한정 미끄러져 지나가야 한다는 것입니다. 텍스트, 이미지 등 무엇이든 될 수 있으며 상황에 따라 왼쪽 또는 오른쪽으로 그리고 다른 속도로 미끄러져야 합니다. 무한 루프 구성 요소를 생성하는 것은 어떨까요? 이것은 어느 정도 보이는 대로다. 추가적인 요구사항은 콘텐츠를 상위 요소의 전체 너비(대개 뷰포트의 전체 너비)를 포괄하기 위해 필요한 만큼 수평적으로 반복해야 한다는 것이었다. 큰 이미지는 단지 몇 가지 예만 필요로 하는 반면 작은 이미지는 더 많은 예만 필요로 합니다. 저는 단지 일부 콘텐츠를 구성 요소에 넣고 속도와 방향을 전달한 후, 그것이 나머지를 처리하도록 할 수 있기를 원했습니다. .. 2022. 2. 22.
https 집에서 시도하지 마십시오: CSS _as_ 백엔드 - Cascading Server Sheet 소개! 또 시작이네! 이것들 중 또 하나, 그리고 약속해, 이번 사건 이후로 내 제정신인지 의심하게 될 거야. 막 장을 보고 있었어요. 그게 날 덮쳤을 때 동네 가게로 가는 길을 걸었어요. 계단식... 서버 시트! 오늘은 서버측 언어로 CSS를 사용할 것입니다. 맞아요. CSS를 사용하여 라우팅을 선언하거나, 수학을 하거나, 헉, 심지어 CSS를 사용하여 템플릿 작성을 수행합니다! 그리고 우리는 SASS나 LESS (pff, 우리는 냄새나는 루프가 필요하지 않아!) 같은 것을 사용하지 않지만, 플레인 ol` CSS를 사용합니다. 뭐라고요? 왜요? SMBC는 양자컴퓨터에 관한 코믹의 일부이긴 하지만, 최근 이 표현을 꽤 잘 쓰고 있다. 허블 망원경으로 타이어를 바꾼다고 상상해 보세요. 잘 안 풀리죠, 그렇죠? 그.. 2022. 2. 22.
다음 React 프로젝트를 위한 상위 3가지 UI 키트 프런트 엔드에서 아름다운 부분에 대해 이야기할 때 사용자 인터페이스가 가장 중요하며 프로젝트에 적합한 패키지를 선택하는 것도 매우 중요합니다. 현재 작업 중인 프로젝트에 따르면 다크 모드, 달력 날짜 처리 구성 요소, freedom을 커스터마이징하거나 단순히 라이브러리가 당신을 좋아하기 때문에 그게 다입니다. 다음 UI 맨틴 기수 UI 이들 모두 다음과 같은 프로 기능을 갖추고 있다. 다크 모드 완전한 맞춤 제작이 가능한. 오픈 소스 2022. 2. 22.

티스토리툴바