본문 바로가기

css380

사용자 지정 CSS 확인란 저는 의사 요소, SVG 애니메이션 및 기타 기술을 사용하는 몇 가지 크리에이티브 체크박스를 만드는 작업을 하고 있습니다. 어떤 경우에는, 저는 더 많은 옵션을 허용하기 위해 자바스크립트를 조금 사용했습니다. 가장 성가신 점은 확인란이 on/off 값을 반환한다는 사실이기 때문에 여러 옵션이 있는 확인란 중 일부에 대해 1, 0 또는 중간 숫자를 반환하는 숨겨진 입력을 만들었습니다. 즉, .hidden-value 클래스와 함께 이 숨겨진 입력에서 직접 확인란 값에 액세스할 수 있습니다. 또한 데이터 값 속성 아래의 .checkbox-container 요소에 확인란 값을 추가해 많은 유연성을 제공합니다. CSS의 사용자 지정 확인란 확인란과 입력 양식은 사용자로부터 정보를 수집하기 위해 사용하는 다양한 화.. 2022. 2. 15.
뒷바람의 시작 Tailwind는 유틸리티 우선 CSS 프레임워크로, 마크업에서 직접 모든 디자인을 구성할 수 있도록 구성될 수 있습니다. Tailwind는 매우 사용자 정의가 가능하며 CSS에 많은 노력을 들이지 않고 디자인을 쉽게 구현할 수 있습니다. Html 파일을 남기지 않고 전체 페이지를 스타일링할 수 있습니다. 가장 흔히 사용되는 CSS 속성과 사용하기 쉬운 색상 팔레트가 함께 제공됩니다. 왜 테일윈드 CSS인가? 디자인을 만들 때 반응성을 높이는 것은 골치 아픈 일이라는 것을 우리 모두 알고 있다. 그리고 때때로 CSS는 예기치 않게 행동한다. 또한 새로운 수업마다 새로운 이름을 만드는 것은 어떤 종류의 명명 규칙을 따라야 하는 더 큰 작업이다. 이 모든 것들로 인해, 저는 중요한 기능보다는 올바르게 디자인.. 2022. 2. 15.
우리가 100devs BBC 홈페이지 과제를 속이는 것으로부터 배울 수 있는 것들입니다. 정말 반칙은 아니에요. 만약 당신이 최근에 테크 트위터에 시간을 보낸다면, 당신은 아마도 100devs 해시태그를 알아차렸을 것이고, 사람들은 부유물만을 사용하여 BBC 홈페이지를 만들어야 한다고 약간 "시끄럽다"고 말할 것이다. 전 100devs 코호트 소속은 아니지만 궁금해서요 사실 꽤 흥미로운 배치였어요 그래서 내가 만들었지 GIF 임무를 수행할 필요가 없었기 때문에 저는 모든 종류의 현대적인 css 마법을 부릴 수 있었습니다. 그리고 이 기사에서는 제가 사용한 더 흥미로운 것들을 여러분과 나누고 싶습니다. 확실히 하자면. 이게 최선의 방법이라고 말하는 게 아니라 그냥 내가 한 방법일 뿐이야. 얘기는 그만하고... 코드를 좀 써볼까? 영상 위에 텍스트 배치 트위터에 제 결과를 공유한 후에 제가 질문.. 2022. 2. 15.
UI 라이브러리를 사용하여 대응 앱 스타일을 설정해야 하는 7가지 이유 천천히 그리고 꾸준히 하는 자가 경주에 이긴다. 우리 모두는 이 말을 수천 번 들어봤지만, 새로운 사업과 기술이 매일 출시되는 현대에도 과연 그럴까? 느리고 꾸준하게 완주할 수 있지만 이긴다는 보장은 없다. 이는 매일 새로운 프레임워크, 라이브러리, 도구 및 웹 사이트가 출시되는 기술 분야에서는 더욱 진실이 됩니다. 따라서 개발자는 덜 중요한 태스크를 위임/제거/대체하여 가치가 높은 태스크에 가장 집중하도록 노력해야 합니다. UI 라이브러리를 사용하여 대응 앱 스타일 지정 개발자가 많은 시간을 투자하지만 이상적으로는 하지 말아야 할 영역 중 하나는 웹 앱의 스타일링입니다. 처음부터 CSS 코드를 작성하는 것은 아름다운 경험이 될 수 있지만, 만약 당신이 스타트업, 인디 해커, 취미생활자, 또는 다른 누군.. 2022. 2. 15.
SuiteCRM Theme Brand Builder 제품의 모든 필수 기능 훌륭한 소프트웨어는 멋진 모습을 보여야 합니다. 그것은 결코 여러분을 지루하거나 비생산적으로 느끼게 하지 않습니다. 당신이 완전히 새로운 모습을 보여줄 때 그 팀은 일하는 것을 좋아한다. 따라서 CRM 소프트웨어에 관한 것이라면 SuiteCRM Theme Brand Builder 플러그인을 사용해 보는 것이 좋습니다. 과거에는 조직들이 CRM 소프트웨어를 창의적이고 흥미롭게 만들려고 했습니다. 그들은 매일 CRM 시스템을 사용했기 때문에 회사들은 그것을 더 다채롭게 만들려고 했습니다. 그들은 까다로운 도구들을 가지고 있었지만 회사들은 특정한 테마로 제한되었다. 따라서 CRM 비즈니스는 끝없이 다양한 글꼴, 테마 및 색상을 여는 테마 스타일 작성기 확장에 투자해야 합니다. 여기 제한? 천만에! 선택의 폭이.. 2022. 2. 15.
HTML 초보자 안내서 작성 HTML이란 무엇입니까? HTML은 Hypertext Markup Language(하이퍼텍스트 마크업 언어)의 약자로, 온라인 사이트에서 볼 수 있는 웹 사이트 콘텐츠의 가장 기본적인 구성 요소 중 하나입니다. 대부분의 사람들은 HTML을 단지 한 종류의 언어라고 생각하지만, 실제로는 많은 다른 종류의 HTML이 있다; 몇몇은 다른 것들보다 더 흔하지만, 그들은 모두 같은 기본적인 구문을 공유한다. rules.in 초보자들을 위한 몇몇 HTML 튜토리얼은 HTML을 배울 수 있다. 즉, HTML을 사용하여 페이지 간 하이퍼링크를 만들고, 일부 사진과 다른 디자인 요소를 추가하고, 심지어 비디오나 다른 미디어 플레이어를 페이지에 포함할 수 있습니다. HTML 기본 태그 기본 태그를 사용하여 기본 웹 페이지.. 2022. 2. 15.
더 나은 주석(VSCODE 확장) 얼마 전 유튜브 영상을 보다가 베터 코멘트라는 VSCode Extension에 대해 알게 되었습니다. 그 이후로 계속 쓰고 있어요. 이것은 지루한 회색 디폴트보다는 다른 색상의 코멘트를 허용함으로써 당신의 코드 코멘팅 게임에 재미를 더한다. 사용방법 내선 번호를 사용하는 것은 매우 간단합니다. 일부 특수 문자는 주석 기호(예: javascript의 경우 //)와 실제 주석 앞에 붙여야 한다. 예: 이러한 글꼴 구성은 경고용 빨간색과 같은 모든 주석 유형에 대한 기본 글꼴 구성이지만 사용하는 구성(예: 다른 글꼴 색상, 가중치, 스타일 등)은 전적으로 사용자에게 달려 있습니다. 사용자 설정에서 쉽게 변경할 수 있습니다. 마무리 생각 삶의 질을 높이고 중요한 코멘트를 돋보이게 해서 찾는 데 골머리를 덜 수 .. 2022. 2. 15.
Tailwind CSS를 사용하여 HTML 테이블 스타일 지정 방법 이 게시물은 원래 레드 픽셀 테마에 게시되었습니다. HTML로 테이블을 만들고 Tailwind CSS로 스타일링하려고 합니다. 그러나 마크업을 만들 때 다음과 같은 표가 나타납니다. 다른 HTML 요소들과 마찬가지로, 테이블들은 Tailwind CSS에서 완전히 스타일이 지정되지 않으며, 어떻게 스타일링할지 그리고 그것은 매우 강력할 수 있습니다! 하지만 우리의 표를 어떻게 코딩하는지를 보여주기 전에, Tailwind CSS와 테이블로 작업할 때 당신이 알아야 할 것을 먼저 설명하겠습니다. 테이블 자동 대 테이블 고정 테일윈드에는 테이블과 관련된 클래스가 거의 없지만 크게 두 가지가 있습니다. 표의 크기를 셀 내용에 맞게 자동으로 지정할 수 있는 표-자동 테이블이 내용을 무시하고 열에 고정 너비를 사용할.. 2022. 2. 15.
CSS 텍스트 호버 효과 css 텍스트 호버 효과 2022. 2. 14.
편지 날리기... 2022. 2. 14.
swiper.js를 사용하여 회전식 이미지 슬라이더를 작성하는 방법 이 블로그에서는 간단한 회전목마 이미지 슬라이더 앱을 구축하여 swiper.js에 대해 알아보겠습니다. 비디오 튜토리얼 나는 이것에 대한 동영상을 내 유튜브 채널에 만들었어. 제 채널 많이 봐주시고 구독 많이 해주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다. 세우다 HTML 레이아웃 * { padding: 0; margin: 0; box-sizing: border-box; } body { max-width: 100vw; overflow-x: hidden; } .container { background-color: #292929; display: grid; place-items: center; min-height: 100vh; } .swiper { width: 80%; } .image_.. 2022. 2. 5.
4 HTML 웹 개발 능력 향상에 대한 진지한 고민이 필요한 시점입니다. 해보자! 그것은 스스로에게 주기 쉬운 경력 향상 목표이지만, "멋진 프로그래머가 되는 것"은 단순한 목표가 아니다. 한 가지 예로, "나는 더 나아지고 싶다"고 말하는 것은 당신이 "더 나은" 모습을 인식하고 있다는 것을 가정한다. 게다가, 너무 많은 사람들이 어떻게 그곳에 도달하는지에 대한 인식 없이 개선을 목표로 하고 있습니다. 웹 개발자로서 당신의 능력을 향상시키는 유일한 방법은 연습하고, 연습하고, 연습하는 것입니다. HTML을 사용하는 초보자를 위한 4가지 프로젝트 시작하기 HTML 및 CSS를 사용하여 Instagram 클론 작성 Facebook 등록 만들기 | 로그인 Facebook 홈페이지 재생성 HTML 및 CSS를 사용하여 G.. 2022. 2. 5.
DAY-16 : 랴즈 훈련 날짜: 03/02/2022 데이: 목요일 오늘 오전 10시 45분경부터 일을 시작하니 차분하게 나에게 주어진 작업을 시작하였고, 지금은 보는 코스로 완성되어 html에 대해 배운 것들로 개발하는데 필요한 템플릿 웹사이트부터 시작하는 시간이었다. 2022. 2. 5.
css- part 1에서 속성을 변환합니다. 참고: CSS의 변환 속성을 이해할 수 있는 3부 시리즈 중 첫 번째 부분입니다. 이 부분에서는 변환 속성의 회전 값을 이해할 것입니다. 변환 속성은 요소를 움직이고, 크기를 조정하고, 회전시키는 등의 많은 작업을 가능하게 하기 때문에 애니메이션에서 가장 일반적으로 사용됩니다. 변환 속성에는 5가지 유형의 "회전"이 있습니다. 1. transform: rotate(); 2. transform: rotateX(); 3. transform: rotateY(); 4. transform: rotateZ(); 5. transform: rotate3d; 아래코드에 다음 값을 적용하여 하나씩 이해하겠습니다. 참고: 이미지에 이러한 값을 적용하지만 모든 요소(div, nav, p, h1 등)에 대해서도 동일하게 적용할.. 2022. 2. 5.
UI 재설계 안녕! 저는 최근에 제 웹사이트(팅커테크랩)를 여러분께 소개하는 글을 만들었습니다. 이번에는 제가 사이트를 훨씬 더 멋있게 만드는 데 있어 놀라운 진보를 좀 보여드리고 싶었습니다. @diegofranco 2001에게 연락 양식 제안을 외치십시오! 총 1시간 5분 동안 (야, 나는 그것을 완벽하게 원했어) 나는 내 검색 창과 연락처 양식을 다시 디자인했어, 어떻게 생각하는지 알려줘! 연락처 양식 ————-——————— 이전: 이후: 검색 막대 —————————— 이전: 이후: 이미지가 흐리게 나와서 죄송합니다. 검색창이 응답하므로 사이트를 확인해 보시기 바랍니다! 2022. 2. 5.

티스토리툴바