본문 바로가기

css380

컨셉토스 바시코스 드 CSS Lenguaje de Hojas de Estilo in Cascada Que presentacion en el navegador de un documento escrito en formato HTML. la sintaxis principle del lenguaje CSS se basa en el uso de estilo, las cuales는 HTML postorente modificar su presentacion을 허용한다. El siguiente es un ejemplo de una regla de estilo plicada aun emlemento HTML tipo 2022. 1. 31.
CSS 프리프로세서: LESS 및 SAS CSS는 HTML로 작성된 웹 페이지의 콘텐츠를 스타일링하기 위해 사용되며, 매우 멋있게 보이고 사이트에서 콘텐츠가 표시되는 위치를 결정합니다. 또한 웹 사이트가 잠재 고객을 사이트로 유치하는 데 도움이 됩니다. 그러나 때로는 일반 CSS를 사용하여 크고 복잡한 웹 페이지를 스타일링하는 것은 오류가 발생하기 쉽고 시간이 많이 걸립니다. 그것은 우리를 천천히 움직이게 하고 유지하기가 더 어렵게 만듭니다. 일반 CSS를 사용할 때의 또 다른 단점은 브라우저마다 다르게 동작한다는 것이다. 일반 CSS를 사용하는 동안 브라우저 간 문제가 발생할 수 있습니다. IE와 오페라는 CSS를 다른 논리로 지원한다. CSS 프리프로세서를 사용하면 브라우저 간 호환성을 통해 브라우저와의 호환성 문제를 해결할 수 있다. 이것.. 2022. 1. 31.
주간 다이제스트 04/2022 올해 위클리 다이제스트 #4에 오신 것을 환영합니다. 이번 주간 다이제스트에는 내가 이번 주 동안 소비한 흥미롭고 영감을 주는 기사, 동영상, 트윗, 팟캐스트, 디자인이 많이 담겨 있다. 흥미로운 읽을거리 마스크를 사용한 화려한 CSS 경계 이 기사에서는 배경 이미지를 사용하지 않고도 세 가지 화려한 CSS 경계를 만들 수 있는 현대 CSS 마스크 기술을 살펴본다. 마스크를 이용한 화려한 CSS 경계 | CSS-Tricks 무료 콘텐츠 만들기 웹3에서 워들과 무료로 물건을 짓는 급진적인 개념입니다. 무료 콘텐츠 만들기 2022년 프런트엔드 예측 마이크로 프런트엔드 기능성 JavaScript의 복귀를 포함하여 향후에 예상되는 사항에 대한 생각 2022년 프런트엔드 예측 | 제이 프리스톤 이번 주에 본 좋은.. 2022. 1. 31.
CSS를 사용하여 요소의 중심을 맞추는 방법 웹 개발자가 할 수 있는 가장 어려운 일은 가로 세로로 중심을 맞추는 것입니다. 중심화 요소는 웹 개발에서 흔히 볼 수 있으며, 그 일을 완수하기 위한 수많은 방법들이 있다. 다음은 CSS를 사용하여 요소의 중심을 맞추는 몇 가지 방법입니다. 텍스트 정렬 접근 방식 가장 일반적인 가운데 맞춤 방법은 텍스트를 가운데에 맞추는 것입니다. 즉, 상위 요소를 텍스트 정렬(중앙 및 표시할 하위 요소)로 설정합니다. 인라인 블록. 꽤 설명이 잘 되네요 (클래식) 절대적 접근법 요소의 중심을 맞추는 일반적인 방법은 상위 요소를 절대(또는 고정)로 설정하고 상단 및 왼쪽 속성을 50% 설정하는 것입니다. 요소를 다른 방향으로 이동하려면 변환 특성을 사용하여 x축과 y축을 -50% 변환합니다. 최종 코드는 다음과 같습니.. 2022. 1. 31.
Css와 Javascript 또는 Gsap으로 스포트라이트 효과를 생성하세요. Combinig Css 마스크, 방사형 그라데이션 및 Javascript의 작은 조각 이번 주 초에는 css 마스크와 선형 그라데이션이 결합된 작은 코데펜(기다릴 수 없다면 여기를 체크)을 만들어 스포트라이트 효과를 냈고, 빛이 마우스 커서를 따라가게끔 자바스크립트를 조금 추가했다. 사람들이 데모를 좋아하는 것 같으니, 이 글에서는 데모가 어떻게 작동하는지 궁금하신 분들을 위해 데모 뒤에 있는 개념들을 설명하겠습니다. 시작해 봅시다! 배경 이미지 먼저 우리는 신체 요소의 배경 이미지를 설정해야 합니다. 또한 div 또는 원하는 모든 요소에 대해 이 작업을 수행할 수 있습니다(사이트의 한 섹션에서 사용하려는 경우). body { margin: 0; height: 100vh; background-image:.. 2022. 1. 27.
HTML과 CSS를 사용하여 멋진 프로필 카드를 만드는 방법 독자 여러분, 오늘 이 블로그에서 HTML과 CSS를 사용하여 멋진 프로필 카드를 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML과 CSS를 사용하여 스크롤 투 탑 또는 백 투 탑 버튼을 만드는 방법을 살펴보았습니다. 이제 또 다른 멋진 카드를 만들 차례입니다. 카드 디자인도 몇 가지 더 공유했습니다. 여기서 그것을 확인하는 것을 잊지 마세요. 요즘 거의 모든 포트폴리오 웹사이트에는 프로필 카드가 있습니다. 포트폴리오 웹사이트란 무엇인가? 그것은 개인이나 조직에 대한 전문적인 정보를 제공하고 그들의 서비스에 대한 설명을 제공합니다. 대부분의 개발자들은 자신의 기술과 경험을 보여주기 위해 포트폴리오 웹사이트를 만듭니다. 프로필 카드에는 기본 정보가 나와 있습니다. 당신은 이것을 좋아할 것이다.. 2022. 1. 27.
뒷바람-이색 소개: 자동 핸들 역방향 어두운 색상 테일윈드에는 다크 모드가 활성화되었을 때 사이트 스타일을 다르게 지정할 수 있는 다크 변형이 포함되어 있습니다. 예: 페이지의 배경색은 밝은 모드에서는 흰색이고 어두운 모드에서는 검은색입니다. 공무원으로부터 또 다른 예를 들어보겠습니다. The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. 텍스트 색상은 밝은 모드에서는 슬레이트-500이고 어두운 모드에서는 슬레이트-400입니다. 그러나 당신은 곧 그것이 얼마나 지루한 작품인지를 알게 될 것이다. 백인 대 흑인 슬레이트-500 대 슬레이트-400 ... 어? 색깔이 반대야? 재밌는 뒷바람의 색상 팔레트를 .. 2022. 1. 27.
CSS 변수: 그것들은 무엇이고 그것들을 어떻게 사용하는가 소행성이란 무엇일까요? CSS 사용자 지정 속성 일명 CSS 변수를 사용하면 반복해서 사용할 수 있는 변수에 속성을 정의할 수 있습니다. 브랜드 또는 특정 테마에 동일한 색상을 사용하는 경우가 많습니다. 일반적으로 사용되는 속성에 변수를 사용할 때의 큰 이점은 변수를 더 아래로 변경해야 하는 경우 변수를 변경할 수 있다는 것입니다. 이렇게 하면 해당 속성을 사용한 코드의 모든 부분을 찾을 필요가 없습니다. 사용 방법 요소에 변수 적용 먼저 어떤 요소에 적용해야 하는지 선언해야 합니다. 모든 요소에 적용할 수 있지만 CSS(글로벌 범위)의 모든 위치에서 사용할 수 있도록 루트 요소에 적용하는 것이 일반적입니다. :element {} 구문을 사용하여 요소를 선택하십시오. 변수의 이름은 원하는 대로 선택할 수.. 2022. 1. 27.
Flexbox를 한 단계 업그레이드 유동적인 유연한 방향과 유연한 래핑의 혼합 .container { display: flex; flex-flow: row wrap; } 내용을 정당화하다 내용을 정당화하다 기본값: flex-start 얼라인먼트하다 기본값: 스트레치 a) 상위 요소의 높이가 있고, b) 일부 항목이 더 큰 경우 정렬-수정 작업 .mbs { 정렬-비틀기: 기준선 /* 텍스트의 첫 줄을 맞추다 */ } 얼라인먼트하다 여러 행에서 작동합니다. 개별 행 안의 항목에 대해 사용할 수 있는 정렬 항목. 기본값: 스트레치 유연하게 성장하다 유연하게 성장하다 기본값: flex-grow: 0 플렉스 아이템은 주어진 플렉스 성장 단위에 비례하여 성장한다. flex-grow의 경우 0은 콘텐츠의 최소 크기에 맞기 때문에 커지지 않습니다. 신축.. 2022. 1. 27.
로그인 - 등록/로그인 - 로그인 2022. 1. 27.
CSS 특이성 점수 체계 설명 특이성은 계단식 알고리즘의 핵심 부분이다. 간단히 말해서, 특이성은 어떤 CSS 규칙이 특정 HTML 요소에 대해 가장 구체적인지를 결정하는 데 사용되는 알고리즘이다. 이를 위해 채점 시스템을 사용한다. 이 기사에서는 이 채점 시스템이 어떻게 작동하는지 심층적으로 이해하고, 실제로 CSS의 특수성을 배우게 될 것이다. 당신은 CSS의 특수성을 기본적인 형태로 이미 알고 있을 것입니다. 하지만 내 말 믿어봐, 그건 더 특별함을 높이기 위해 후손 선택자들을 결합하는 것보다 더 많은 것이 있어. 우선 계단식 효과에 대해 설명하겠습니다. 다음과 같은 코드를 생각해 보십시오. lorem ipsum 위의 경우, 당신은 문단의 색상이 무엇이 될 것으로 예상합니까? 글쎄, 보라색이야. 보라색은 빨간색 다음에 오기 때문.. 2022. 1. 27.
Um breve comentário sobre 층() e camadas em cascata O C do CSS comechando a ter um novo sentido Desde o ano passado foi comentado so bre a nova propriedade do CSS, o layer() a temo Objetivo de trabalhar melhor, o o o other) a ordem dos se se seletores a ordem nas folato nas folato nas foles do folas de es do f coisas exadamente na ordem em qué vocé vai escrever로서 para quem sabe o CSS, ou seja, ele vai 실행자. Mas o layer() , eté entang , mudar um po.. 2022. 1. 27.
JavaScript 클래스가 있는 응답 메시지 상자 JavaScript 클래스가 있는 응답 메시지 상자 이 메시지 상자는 재료 디자인의 토스트 메시지에서 영감을 받아 자바스크립트로 구현되었습니다. 저는 메시지 상자를 구현하기 위해 네이티브 자바스크립트 클래스를 사용했습니다. 이전 브라우저에서는 네이티브 JavaScript 클래스와의 호환성 문제로 인해 작동하지 않을 수 있습니다. 화면 너비가 768픽셀 이상인 경우 화면 오른쪽 상단 모서리에 토스트 메시지가 나타납니다. 그렇지 않으면 화면 중앙 하단에 토스트 메시지가 나타납니다. 사용. MessageBox 클래스 인스턴스 만들기: let msg = new MessageBox("#id", option) 사용 가능한 옵션(유형: 객체): const option = { // number: Count in mil.. 2022. 1. 27.
CSS Funstuff: 애니메이션 파형 우와! 우와우와우와우와우와우와우와! 저는 또 다른 CSS 튜토리얼과 여러분이 이를 빠트릴 수 있는 더 재미있는 것들을 가지고 돌아왔습니다! 파형이란? 파형은 여기서 설명한 바와 같이 모든 종류의 파동을 시각적으로 표현한 것입니다. 이 예에서는 파형을 실제 데이터에 연결하지 않지만 모험적인 사용자라면 약간의 JavaScript를 사용하여 이러한 작업을 수행할 수 있습니다! 최종 결과 스크린샷: 참고: 문서 하단에 이 프로젝트의 전체 소스 코드를 공유하지만 이 문서에서는 반드시 필요한 항목만 설명합니다. 기본을 다지기 HTML 코드: 먼저, 우리는 섹션으로 마무리된 7개의 div가 필요합니다. 각각은 고유한 클래스로: 수업을 원하는 대로 불러도 되지만, 저는 일을 쉽게 하기 위해 "wave0"에서 "wave.. 2022. 1. 27.
CSS용 Flexbox Froggy(플렉스박스를 배우는 재미있는 방법) 최근에 저는 CSS 박스 모델과 플렉스박스에 대해 배우고 있는데 이 놀라운 작은 웹사이트를 발견하게 되었습니다. Flexbox Froggy를 소개합니다! Flexbox Froggy는 웹 페이지에서 플렉스 상자를 정렬하고 이동하는 방법을 알려주는 무료 대화형 브라우저 게임입니다. 이 게임은 작은 개구리들을 각각의 백합 위로 옮기도록 도와주는 24개의 코딩 레슨으로 구성되어 있습니다. 저는 개인적으로 인터랙티브 게임을 통해 코딩을 가르치는 이런 웹사이트들을 좋아합니다. Flexbox 학습에 도움이 되는 리소스를 알려 주십시오! 2022. 1. 27.

티스토리툴바