본문 바로가기

css380

CSSBattle 대상 #4 안녕하세요 저는 CSSBattle Series로 돌아왔습니다! 이 문서는 CSSBattle의 Target#4 "Ups n Downs"에 대한 것입니다. 지금까지 제가 할 수 있는 최선의 방법은 아래와 같습니다. body{ display:flex; margin:134 50; background:#62306D} p{ width:100;height:100; background:#F7EC7D; border-radius:0 0 50% 50} #b{ transform:rotate(180deg); position:relative;top:-100 이것은 196자로 응축하는 나의 최단 해결책이었다. CSS 그리드를 사용하는 또 다른 접근법은 다음과 같다. body{ margin:-16 50; background:#623.. 2022. 2. 16.
CSS에서 이미지를 React적으로 만드는 방법이야 안녕하세요 여러분 안녕 친구들, 여기는 스노우비트입니다. 저는 열정적이고 독학한 젊은 프런트엔드 웹 개발자로 성공적인 개발자가 되고자 합니다. 오늘, 저는 여러분을 곤경에 빠트리는 것을 돕고 구할 수 있는 멋진 CSS 트릭을 가지고 왔습니다. 가자... 웹 개발자가 모바일 반응 이미지를 만들고 모든 콘텐츠를 뷰포트에 적절히 맞추는 것은 매우 중요하다. [플래시 안 함]에서 이미지를 선택합니다. (선택 사항 중 하나) 이제 HTML 파일에 이미지를 추가할 차례입니다. 이제 결과를 살짝 볼까 합니다. 이미지 크기를 조정하려고 노력하셨나 보네요? 이미지가 반응하지 않고 에서 휴대 전화에서 보기 불편함을 알 수 있습니다. 이제 CSS의 초강대국 를 도입하여 정중하게 살펴보겠습니다. width: 100%; max.. 2022. 2. 16.
브라우저별 CSS 코드 작성 방법 모든 웹 페이지는 브라우저마다 다르게 렌더링됩니다. 브라우저가 웹사이트 뒤에 있는 코드를 읽을 때, 그것은 정보를 기본 설정으로 변환합니다. 예를 들어, Safari와 Internet Explorer는 기본 글꼴이 다르므로 이러한 브라우저에서 특정 사이트의 글꼴이 변경됩니다. Safari는 Helvetica 제품군이 기본 설정이고 Microsoft의 Internet Explorer는 Arial 글꼴 제품군이 기본 설정입니다. 이 문서에서는 웹 사이트에 대한 교차 브라우저 호환성을 보장하기 위해 브라우저별 CSS 코드를 만드는 방법에 대해 설명합니다. 일반적인 CSS 브라우저 호환성 문제 브라우저 간에 차이가 발생하는 가장 흔한 원인은 기본 문제일 수 있습니다. HTML과 CSS로 작업할 때 동일한 웹 응.. 2022. 2. 16.
내가 모든 프로젝트에 Tailwind CSS를 사용하는 4가지 이유 저는 UI 프레임워크를 많이 사용하곤 했습니다. 부트스트랩, 재료 UI, 개미 디자인… 네, 편리하고 전체 프로젝트에서 몇 줄의 CSS만 작성하면 됩니다. 하지만 문제는 웹사이트가 부트스트랩을 기반으로 만들어졌다는 것입니다. 다른 많은 웹사이트들처럼 말이죠. UI 프레임워크는 구성 요소가 너무 엄격하게 정의되어 있기 때문에 웹 사이트의 고유한 스타일에 맞게 사용자 지정하기가 어렵습니다. 그것들은 제 웹사이트를 "내 것"처럼 보이게 하지 않고, 모든 사람들이 사용하는 인기 있는 템플릿에서 나온 것입니다. 저는 작년에 Tailwind CSS를 도입하면서 제 프로젝트마다 사용하기 시작했고, 기존의 프로젝트들을 재구성했습니다. CSS 프레임워크이긴 하지만 UI 프레임웍스처럼 간단하게 커스터마이징 가능한 스타일을.. 2022. 2. 16.
CSS를 효율적으로 사전 처리하세요! CSS 전처리는 전처리의 고유한 구문에서 CSS를 생성할 수 있는 프로그램입니다. 이 문법은 사용자가 CSS 코드에서 변수, 중첩, 상속, 믹스인, 함수, 수학적 연산과 같은 논리를 사용할 수 있게 한다. 또한 반복 작업을 쉽게 자동화하고 오류와 코드 블롯을 줄이며 재사용 가능한 코드 스니펫을 생성하고 이전 버전과의 호환성을 보장할 수 있습니다. CSS 프리프로세서는 전처리의 구문을 사용하여 작성된 이 코드를 컴파일하고 CSS 파일을 만들어 주 HTML 문서에 의해 참조될 수 있다. 여기서는 프로젝트에 통합하기 위해 선택할 수 있는 몇 가지 CSS 프리프로세서를 살펴보겠습니다. 1. Sass/Scss SCSS는 Sassy Cascading Style Sheet의 약자입니다. CSS의 더 발전된 변형은 S.. 2022. 2. 16.
62.5% 내가 가장 좋아하는 CSS 값(지금까지) 제가 작년에 웹사이트를 만들기 시작했을 때 주로 HTML과 SASS로 작업했을 때, 저는 구성 요소 사이징을 위해서만 px 단위를 사용하려고 했습니다. 저는 웹 페이지를 필요한 만큼 반응성 있게 만드는 것에 별로 관심이 없었습니다. 왜냐하면 제 초점은 인터페이스 디자인을 최대한 살리는 것이었기 때문입니다. 저는 2~3개 정도의 학교 프로젝트를 마치고 케빈 파월의 CSS 유닛이 결국 렘 유닛에 대해 배우는 영상을 보고 그 이후 거의 모든 것에 사용하고 있습니다. 렘 및 62.5% 값 루트 html의 기본 글꼴 크기는 16px이며 rem 단위를 사용할 때마다 이 값을 참조합니다. 1 rem은 16px와 같습니다. 그러나 정확한 px 단위 값을 얻기 위해서는 계산을 해야 하기 때문에 이 값은 구성 요소의 크기.. 2022. 2. 16.
CSS 포지셔닝: 초보자의 CSS 포지셔닝 소개 CSS 포지셔닝이란 무엇입니까? CSS 위치는 문서에 요소를 배치할 위치입니다. 상단, 하단, 오른쪽 및 왼쪽 속성을 사용하여 요소의 정확한 위치를 지정할 수 있습니다. CSS 위치 유형 CSS 포지셔닝에는 5가지 유형이 있다. 정적 관련있는 절대적 고정된. 끈적거리는 한 명씩 봅시다. 정적 위치 지정 이것은 문서에서 요소의 기본 위치입니다. 그것은 위에서 아래로 그들을 위치시킵니다. 또한 필요하지 않은 위치가 있는 요소의 위치를 재설정하는 데 사용할 수 있습니다. 부모나 주변 요소에는 영향을 주지 않습니다. 여기서 Child1은 정적 위치를 가정합니다. 상대 포지셔닝 요소가 이 위치를 가정할 때, 해당 요소는 초기 위치를 기준으로 배치됩니다. 그러나 위쪽, 오른쪽, 왼쪽 또는 아래쪽 좌표를 나타내지 않.. 2022. 2. 16.
3D CSS 뒤집을 수 있는 카드 만들기 얼마 전에 3D 인터랙티브 CSS 버튼에 관한 기사를 썼어요. 유사한 기술을 사용하여 3D 인터랙티브(그리고 뒤집을 수 있는) CSS 사용자 카드를 디자인하기로 결정했습니다. 또한 은행 카드 UI, 플레이 카드 UI 또는 팀 페이지와 같은 다양한 작업에도 유용합니다. 데모는 아래에서 확인할 수 있습니다! 전체 코드는 항상 CodePen에서 사용할 수 있습니다. CSS 및 Javascript를 사용한 3D 뒤집기 카드 아래 카드 위에 마우스를 올려놓거나 모바일에서 카드의 아무 곳이나 누르면 효과가 제대로 나타나는지 확인할 수 있습니다. 이러한 효과를 얻으려면 Javascript와 CSS에서 몇 가지 다른 사항을 결합해야 합니다. 먼저 마우스 위치에 따라 카드의 각도를 조작할 수 있는 기능을 만들어야 합니다.. 2022. 2. 16.
초보 개발자를 위한 아이디어. 안녕, 나는 안토니오야. 그리고 저는 새로운 웹 개발자 지망생입니다. 간단한 프로젝트 아이디어를 찾고 있습니다. 말도 안되게 복잡하거나 그런건 아니야. 연습해야 할 것들이야. 어떤 조언이라도 도움이 될 거예요, 고마워요. 2022. 2. 15.
Flexbox 도움말 안녕하세요, 데브 커뮤니티. 나는 프런트엔더 소셜 프루프 섹션 프로젝트를 일주일 넘게 진행하고 있어. 저는 Flexbox를 계속 사용하고 있습니다. Flexbox Froggy 덕분에 Flexbox를 사용하는 기본 원리를 이해했습니다. 지금까지 제가 이해한 것은 다음과 같습니다. justice-content는 항목을 주축에 배치하는 데 사용됩니다(가로). 얼라인먼트하다 유연한 방향은 항목을 행(수평) 또는 열(수직)에 배치하는 데 사용됩니다. flex-conting은 아이템을 포장하는 데 사용된다. flex-box를 사용하여 항목을 포지셔닝하는 방법에 대해 고민하고 있습니다. HTML 코드 10,000+ of our users love our products. We only provide great pro.. 2022. 2. 15.
JavaScript를 활용하여 디스플레이를 사용하는 CSS 전환 구현: 없음 CSS는 디스플레이를 사용하는 전환을 기본적으로 애니메이션화할 수 없습니다: 없음. 가시성(숨김 및 높이: 0)을 혼합하여 "충분히 가깝게" 만들 수 있습니다. 대부분의 경우 이러한 솔루션이 적합하지만 디스플레이를 사용하는 것과 완전히 같지는 않습니다: 없음. 이 게시물은 디스플레이를 트리거하는 CSS 전환과 함께 없음: JavaScript를 사용하는 CSS 속성을 포함하지 않음. 우리가 만들고 있는 것 단추를 클릭하면 불투명도가 1에서 불투명도 0으로 전환되는 상자를 만든 다음 전환이 완료되면 초기 디스플레이 속성에서 JavaScript를 사용하여 표시하지 않습니다. 최종 결과는 다음과 같습니다. 코드 다음은 위에 표시된 애니메이션 전환을 구현하기 위한 코드입니다. Toggle visibility /*.. 2022. 2. 15.
Ruby - Sinatra 웹 앱 // 만다린 카드 만다린 카드 이것은 액티브 레코드를 채용한 간단한 루비 시나트라 웹 앱입니다. 기본 아이디어는 만다린 플래시카드를 만들고 저장하는 것이었다. 플래시카드는 실수가 있을 경우 편집할 수 있다. 또한 카드가 더 이상 필요하지 않으면 폐기될 수 있습니다. 걱정하지 마세요, 당신의 카드는 당신에게만 보일 것이고, 당신은 당신의 카드만 보일 것입니다. 로마자, 한자 또는 汉 ((한자)를 입력할 수 있습니다! 이 앱을 만들면서, 나는 아마도 컴퓨터 프로그래밍에서 나의 가장 큰 어려움은 나의 형편없는 철자법이 될 것이라는 것을 배웠다. 그 외에도, 프로젝트를 만드는 것은 꽤 간단했습니다. 봐야 할 유튜브 튜토리얼은 물론 읽을 만한 설명서가 많았다. 제가 해결하는 데 가장 긴 버그는 "사용자"와 "작성자"를 한 곳에 불.. 2022. 2. 15.
코이사스컴 플렉스박스 역의 센트럴리잔도 올라, 페소알 호제 eu vim com u ma dica da pida de como centralizar coisas no cSS usando o Flexbox. 콘티누아 아퀴고 케 에우 테 모스트라 코모 펑시오나 에세 탈 알린하멘토. 이니시안도 컴 플렉스박스 USAREmos duas div`s. 네세플로우 유사레모스 두아스. div mais externa de cor cinza, eu vo chamar de ou elemento pai, já a div mais interna de cor losa, eu vo chamar de box imediato div pai. Dito isso, vamos innicializar o Flexbox inserindo는 용기가 없는 프리데이드 "표시: 플렉스"입니다.. 2022. 2. 15.
구축하기 좋은 5가지 HTML 및 CSS 프로젝트(코데펜 미리 보기 포함) 코딩은 재미있고 신나는 연습이지만 학습 여정의 진도를 어떻게 측정하나요? 여기 당신의 기술을 시험하기 위해 만들 수 있는 멋진 아이디어들이 있습니다. 설문조사 양식 설문 조사 양식은 매우 인기 있는 첫 번째 프로젝트이며 HTML 양식 검증에 대한 당신의 기술을 테스트하는 좋은 방법입니다. 또한 설문 양식을 만들면 서로 다른 양식 요소(라디오, 확인란, 텍스트 영역 등)를 모두 하나의 형식으로 테스트할 수 있습니다. 다음과 같은 간단한 형태로 시작할 수 있습니다. 그런 다음 이 설문 조사 양식과 같이 스타일과 응답성이 뛰어난 양식으로 이동합니다. 헌정 페이지 헌정 페이지는 HTML과 CSS에 대한 기본적인 기술만을 요구하기 때문에 초보자로서 만들 수 있는 가장 간단한 웹 페이지 중 하나이다. 당신은 CSS.. 2022. 2. 15.
뉴턴의 요람 코드 참조 2022. 2. 15.

티스토리툴바