본문 바로가기

css380

HTML 및 CSS를 사용한 간단한 상단 탐색 메뉴 - [소스 코드 포함] 모든 웹 사이트는 이 웹 페이지에 오는 사용자가 웹 페이지 사이를 쉽게 이동할 수 있도록 일종의 탐색이 필요합니다. 웹사이트에 사이드 네비게이션, 상단 네비게이션, 우측 네비게이션 등 다양한 네비게이션 메뉴를 만들 수 있다. 어디를 배치하든, 이러한 내비게이션 메뉴나 내비게이션 메뉴는 웹사이트의 필수적인 부분입니다. HTML과 CSS 코딩으로 시작할 때는 처음부터 만드는 것이 그리 간단할 수 없다. 그래서 이 블로그 포스트에 HTML과 CSS를 이용하여 처음부터 상위 탐색 메뉴나 탐색바를 만들고 소스 코드도 첨부하겠습니다. 웹 사이트에 대한 폴더 구조 만들기 저는 Nav1이라는 이름의 폴더를 만들었고 이 폴더 안에 Visual Studio 코드로 HTML과 CSS 코드를 작성할 편집자가 될 것입니다. 비.. 2022. 2. 5.
PNG 영상에 대한 테일윈드 CSS 드롭 그림자 효과 당신은 PNG 이미지에 드롭 섀도를 적용할 수 있다는 것을 알고 있었나요? 이 드롭 섀도는 이미지의 윤곽을 따라갑니다! 이 글에서는 Tailwind CSS에서 이러한 드롭 섀도우 효과를 달성하는 방법을 보여드리겠습니다. 위 이미지에서 왼쪽은 기본 PNG 이미지, 오른쪽은 드롭 섀도 효과를 볼 수 있습니다. 테일윈드 CSS 드롭 그림자 효과 이 효과를 얻으려면 PNG 이미지(투명 이미지)를 사용해야 합니다. 그리고 드랍 섀도 클래스를 적용합니다. 다음 버전 중 하나를 선택할 수 있습니다. 드롭-스미시 드롭스테이프팅하다 드롭-스파이프-md 드롭-페어-lg 드롭-스파이크 드롭-드롭-스파이프 테일윈드 CSS 박스 그림자 효과 또는 박스섀도 효과를 보거나 들어본 적이 있을 것이다. 이 효과는 PNG의 가장자리를 .. 2022. 2. 5.
변수를 sass로 정의하고 사용하는 방법 $ 기호를 사용하여 변수 $variable_name: variable_value를 정의합니다. 아래에서는 Codever 프로젝트에 사용되는 _colors.scss 파일에서 무연탄-회색을 정의합니다. 그런 다음 클래스 정의에서 변수를 참조합니다. $anthracite-gray: #4A5054; .anthracite-gray { color: $anthracite-gray; } 참조 - https://sass-lang.com/documentation/variables 2022. 2. 5.
상자 모델 whether you`re a rookie, an experienced developer or someone in the center of the stack, one of the most crucial css concepts to comprehend is " ." Q.) "박스 모델"은 무엇입니까? "박스 모델 개념에 따르면 페이지의 모든 요소는 직사각형 상자이며 너비, 높이, 여백, 테두리 및 여백이 있을 수 있습니다." every every every every every every: 페이지의 모든 요소는 직사각형 상자입니다. 모든 요소는 직사각형 상자이며, 상자의 크기를 결정하는 몇 가지 특성이 있습니다. 상자의 코어는 요소의 폭과 높이에 의해 정의되며, 에 의해 결정될 수 있습니다. the pro.. 2022. 2. 5.
Pure CSS에서 단일 Div를 사용한 Google 로고 2022. 2. 5.
순수 CSS에서 2Div만 사용한 React 로고 2022. 2. 5.
상위 5개의 CSS 프레임워크 CSS 프레임워크란? CSS 프레임워크는 수많은 미리 정의된 스타일을 포함하고 있는 코드 라이브러리이므로 처음부터 모든 스타일을 작성할 필요가 없습니다. CSS 프레임워크를 사용해야 하나요? 뭐, 나름이지. 프레임워크를 사용한다고 해서 개발력이 떨어지는 것은 아닙니다. 다음과 같은 이유로 사용할 수 있습니다. 빨리 필요한 게 있어요. CSS를 쓰는 것은 많은 시간이 걸릴 수 있다. 프레임워크가 있으면 웹사이트를 매우 빠르게 만들 수 있습니다. 아마도 당신은 CSS를 쓰는 것을 좋아하지 않을 것입니다. 넌 디자인엔 서툴잖아 이용할 수 있는 엄청난 양의 CSS 프레임워크가 있다. 여기 맨 위에 있는 것들이 있습니다. 그렇다고 다른 것들이 나쁘다는 뜻은 아니야. 다른 프레임워크도 얼마든지 시도해 보세요. 또한.. 2022. 2. 5.
SASS를 사용하여 간격 클래스와 같은 부트스트랩 생성 지난달 우리는 Angular와 Angular Material로 새로운 프로젝트를 시작했습니다. 시간이 지나면서 몇몇 동료들이 여백과 패딩을 위해 인라인 스타일을 자주 쓰고 있다는 것을 알게 되었습니다. With inline style 그들 중 일부는 (나를 포함한) 필요한 모든 구성 요소를 위한 유사한 css 클래스를 만들고 있습니다. .set-padding { padding: 10px 0; } .left-spacer { margin-left: 10px; } 그때 나는 우리가 마진이나 패딩 클래스와 같은 부트스트랩을 놓치고 있다는 것을 깨달았다. 제 동료 중 한 명이 테일윈드 CSS를 사용하자고 제안했습니다. 그러나 Angular Material은 이미 컴포넌트 라이브러리에 사용하고 있기 때문에 일부 공.. 2022. 2. 5.
2022년에 알아야 할 5가지 CSS 방법론 크고 복잡하고 빠르게 반복되는 시스템에서 CSS는 유지하기가 매우 어렵다. CSS에 내장된 범위 지정 메커니즘이 없는 것도 원인 중 하나다. CSS에서는 모든 것이 글로벌합니다. CSS가 네이티브 범위 지정 메커니즘을 얻기 전까지는 HTML 문서의 특정 섹션에 대한 스타일을 고정하는 우리만의 시스템을 고안해야 합니다. CSS 방법론이 해결책입니다. 이 기사에서는 2022년에 알아야 할 CSS 방법론에 대해 알아보겠습니다! 1. 객체 지향 CSS OOCSS 개념은 유연하고 모듈식이며 상호 호환 가능한 구성 요소를 작성하는 데 도움이 됩니다. 예를 들어, 단추 요소의 스타일은 다음과 같은 클래스를 통해 설정할 수 있습니다. .button — 버튼의 기본 구조를 제공합니다. .grey-btn — 색상 및 기타.. 2022. 2. 5.
내 첫 번째 설문 조사 양식 지금까지 알아낸 건 이렇습니다. https://codepen.io/Sweetslr/pen/yLPeKwN 2022. 2. 5.
다음 프로젝트를 시작할 수 있는 30개의 무료 테일윈드 CSS 템플릿 지난 한 해 동안 테일윈드 CSS는 프론트엔드 개발 세계에서 느리지만 꾸준히 인기를 얻고 있다. 그 이유는 이 라이브러리가 다른 프레임워크와 함께 사용할 때 "믿을 수 없는" 성능을 가진 믿을 수 없을 정도로 사용하기 쉽고 완전한 사용자 지정이 가능한 라이브러리이기 때문입니다. 그러나 무료 Tailwind CSS 템플릿은 인터넷에서 템플릿과 테마를 검색할 때 거의 찾을 수 없습니다. 빨리 검색한다고 해서 많은 결과가 나오지도 않습니다. 이를 염두에 두고 Tailwind CSS를 기반으로 30개의 무료 템플릿과 테마를 찾아 헤맸는데, 여기에는 UI Kit와 같은 광범위한 추가 리소스 목록과 React, Vue와 같은 현대 자바스크립트 프레임워크를 기반으로 한 컴포넌트 라이브러리가 포함되어 있습니다. 이 기.. 2022. 2. 3.
웹 개발을 위한 초보자의 로드맵 월드 와이드 웹(World Wide Web)은 하이퍼링크로 연결된 서버와 클라이언트로 구성된 정보 및 자원 공유 시스템이다. 웹의 문서와 자원은 브라우저에 의해 요청되고 HTTP(Hypertext Transfer Protocol)를 통해 전송되며, HTTP는 브라우저에 표시될 수 있습니다. 다음 사이트에서 이 튜토리얼의 소스 코드를 다운로드할 수 있습니다. 소스 코드 다운로드 이번 웹 개발 초보자 가이드에서는 웹 개발의 기본에 대해 간단한 예를 들어 설명하겠습니다. 시작하기 전에, 월드 와이드 웹으로 몇 가지 기본적인 개념에 대해 이야기해보자. 월드 와이드 웹 소개 문서 보기 HTML은 웹의 기본 구성 요소이며, 각 웹 페이지가 어떤 정보를 포함해야 하는지를 정의하고, CSS는 이러한 데이터가 웹 페이지.. 2022. 2. 3.
FREE Response Chakra UI 대시보드(오픈 소스) Chakra UI 및 React를 위한 혁신적인 관리 템플릿으로 개발을 시작하십시오. 그 모습이 좋다면 https://www.creative-tim.com/product/argon-dashboard-chakra 2022. 2. 3.
CSS 또는 프레임워크? 나도 한때 이런 딜레마에 빠졌던 적이 있었는데, 조사를 해보니 비슷한 상황에 처한 사람들을 돕기 위해 이 가이드를 쓰게 된 가장 큰 이유가 뭔지 알게 되었습니다. 우선, CSS는 그 자체로 엔터티이며, CSS 프레임워크는 종속적인 것으로서, 기능하는 것은 CSS가 기능하는 것은 CSS에 달려있다. 그것은 뿌리와 가지의 관계와 같다. 바닐라 CSS는 스타일링을 제한 없이 완벽하게 제어할 수 있는 반면, 프레임워크는 작업할 구성 요소만 제공합니다. 당신은 당신의 페이지를 부풀리고 웹사이트 속도를 느리게 하는 프레임워크를 사용할 때 필요하지 않은 많은 코드베이스를 가져오고 있는 반면, 바닐라 CSS는 핵심에 대해 미니멀리즘적인 반면, 당신은 당신이 사용할 스타일만 만들 것이다. 대부분의 프레임 워크 스타일의 .. 2022. 2. 3.
Rythm.js, 당신의 페이지를 춤추게 하는 자바스크립트 라이브러리 | 스포트라이트 오브 데이 시리즈 페이지를 춤추게 하는 자바스크립트 라이브러리입니다. 포스트 Rythm.js, 당신의 페이지를 춤추게 하는 자바스크립트 라이브러리 | 하루 시리즈의 스포트라이트는 Coding is Love에 처음 등장했다. 2022. 2. 3.

티스토리툴바