-
- Flexbox로 유연한 레이아웃을 만듭니다
- Flexbox : CSS 레이아웃 강국 Flexbox 또는 CSS Flexible Box 레이아웃 모듈은 1 차원 레이아웃을 단순화합니다. 디스플레이 적용 : Flex (또는 Display : Inline-Flex)가 컨테이너에 직접 어린이를 변환합니다 int
- CSS 튜토리얼 . 웹 프론트엔드 773 2025-02-10 11:01:08
-
- 현대 CSS를 마스터하는 데 도움이되는 5 개의 프로젝트
- 많은 사람들은 CSS가 프로그래밍 언어가 아니라고 생각하며 동의합니다. 마스터하기가 더 어렵습니다. CSS의 숙련도에는 설계 능력, 결정, 창의성, 경험 및 코딩 기술 (특히 SASS와 같은 전처리기를 사용할 때)이 필요합니다. CSS는 브라우저에 레이아웃과 스타일을 제안합니다. 브라우저는 이러한 제안을 마음대로 설명 할 수 있으며 사용자 나 장치조차도 모든 속성을 무시하거나 덮어 쓸 수 있습니다. 모든 장치 및 화면 해상도에서 잘 작동하는 고성능 코드를 작성하는 것은 어려운 일이며이를 시도하거나 성공적으로 완료하는 사람은 거의 없습니다. 그러나 보상은 흥미로울 수 있습니다. 가장 쉬운 것으로 시작하여 다음 프로젝트 제안은 Sitepoint Premium에서 제공하는 책을 통해 CSS Mastery Path에 착수하는 데 도움이됩니다. 핵심 사항 CSS의 숙련도에는 설계 능력이 필요합니다
- CSS 튜토리얼 . 웹 프론트엔드 182 2025-02-10 10:57:39
-
- CSS 아키텍처 : BEM (Block-Element-Modifier) 및 원자 CSS
- 이 기사는 Tiffany의 새 저서 "The Master of CSS, Second Edition"에서 발췌 한 것입니다. 우리는 두 가지 CSS 명명 방법론을 탐구 할 것입니다. 두 방법 모두 대규모 웹 사이트 및 대규모 팀의 개발 프로세스를 개선하기 위해 만들어졌지만 단일 팀에도 동일하게 적용됩니다. 자신에 따라 선택하거나 혼합 할 수 있습니다. 그들을 소개하는 목적은 자신의 CS를 작성하는 방법에 대해 생각하는 데 도움이됩니다. 핵심 사항 BEM (Block-Element-Modifier)은 개발자가 웹 사이트를 재사용 가능한 구성 요소 블록 모음으로 생각하도록 장려하는 CSS 방법론입니다. 웹 사이트의 여러 부분, 특히 대규모 개발 팀 간의 관계를보다 쉽게 이해할 수있는 명확한 명명 시스템을 제공합니다. 반대로, 원자 CSS는 전문화됩니다
- CSS 튜토리얼 . 웹 프론트엔드 430 2025-02-10 10:55:15
-
- 반응 형 웹 디자인 크로스 브라우저 호환성을 테스트하는 방법
- 반응 형 웹 디자인 (RWD)의 핵심 사항 RWD (Responsive Web Design)는 웹 사이트에 다양한 화면 크기의 장치에서 액세스 가능하고 사용자 친화적이되도록해야합니다. 2010 년 Ethan Marcotte가 제안했으며 화면 크기 나 뷰포트 크기에 관계없이 단일 웹 사이트가 모든 장치에서 제대로 작동 할 수 있습니다. RWD는 HTML 뷰포트 메타 태그, 미디어 쿼리, CSS 뷰포트 장치, CSS 열, CSS Flexbox 및 그리드 및 JavaScript RWD 옵션을 포함한 다양한 기술과 방법을 사용합니다. 이 모든 것은 CSS 그리드가 현재 사용할 수있는 좋은 브라우저 지원을 제공합니다.
- CSS 튜토리얼 . 웹 프론트엔드 419 2025-02-10 10:49:09
-
- CSS의 CyberPunk 2077 버튼 글리치 효과를 재현하십시오
- 이 기사는 CSS 만 사용하여 CyberPunk 2077 웹 사이트에서 볼 수있는 세련되고 결함이있는 버튼 효과를 재현합니다. 이 미래의 모습을 달성하는 방법을 살펴 보겠습니다. 자습서는 버튼의 독특한 기능을 복제하는 데 중점을 둡니다.
- CSS 튜토리얼 . 웹 프론트엔드 1076 2025-02-10 10:43:08
-
- CSS 애니메이션을 시작하는 방법
- CSS 애니메이션 : CSS 전환 이상의 동적 효과 CSS 애니메이션은 CSS 전환의 고급 버전입니다. 무한 루프를 지원하고 키 프레임을 사용하여 애니메이션 재생 중에 일시 중지 할 수 있습니다. 이 기사는 CSS 애니메이션의 모든 측면을 탐색 하여이 강력한 웹 디자인 기술을 쉽게 마스터 할 수 있도록 도와줍니다. CSS 애니메이션 : 키 프레임 및 애니메이션 속성을 만듭니다 CSS 애니메이션을 만들려면 먼저 애니메이션 이름을 지정하고 키 프레임 규칙을 그룹화하는 @keyframes 규칙을 정의해야합니다. 그런 다음 애니메이션을 대상 요소에 적용하십시오. CSS 애니메이션은 애니메이션 지연 및 애니메이션 기간을 포함한 다양한 속성을 통해 제어 할 수 있습니다.
- CSS 튜토리얼 . 웹 프론트엔드 406 2025-02-10 10:20:16
-
- CSS에서 2D 변환 함수를 사용하는 방법
- Tiffany의 새 저서 "The Master of CSS, Second Edition"에서 발췌 CSS 변환 기능은 다른 방법을 달성 할 수없는 효과와 상호 작용을 만들 수있는 능력을 제공합니다. 전환과 애니메이션을 결합하여 회전, 춤 및 규모의 요소와 인터페이스를 만들 수 있습니다. 특히 3 차원 변형으로 물리적 물체를 시뮬레이션 할 수 있습니다. 이 기사는 2 차원 변환 기능을 탐색 할 것입니다 (3 차원 함수는 여기에 소개됩니다). 회전, 스케일링, 기울기 및 변위의 네 가지 주요 2 차원 변환 기능이 있습니다. 6 가지 다른 기능은 단일 차원을 따라 요소를 변환 할 수 있습니다. 핵심 사항 CSS의 4 가지 주요 2 차원 변환 기능은 R입니다.
- CSS 튜토리얼 . 웹 프론트엔드 744 2025-02-10 10:19:09
-
- 쉽고 반응이 좋은 최신 CSS 그리드 레이아웃
- 핵심 포인트 CSS 그리드는 HTML이 아닌 CSS에서 그리드 구조를 생성 할 수있는 강력한 레이아웃 시스템입니다. 대부분의 최신 브라우저는 이전 버전을 지원하는 IE11을 제외하고이를 지원합니다. 이 기사는 반응 형 최신 CSS 그리드 레이아웃을 만드는 방법을 보여줍니다. 단계별 CSS 그리드를 추가하고 이전 브라우저에 폴백 코드를 제공합니다. 여기에는 센터 요소에 대한 기술, 스팬 프로젝트 및 소형 장비의 레이아웃을 조정하는 것이 포함됩니다. CSS Grid는 그리드-컬럼 및 그리드 행과 같은 유틸리티를 제공하여 그리드 프로젝트를 찾는 것뿐만 아니라 정당화 항목, Alig를 제공합니다.
- CSS 튜토리얼 . 웹 프론트엔드 791 2025-02-10 10:13:10
-
- CSS에서 스냅 스크롤 : 스크롤 동작 제어
- CSS 스크롤 스냅 : 부드러운 스크롤 인터페이스를 쉽게 만듭니다 Tiffany의 CSS 마스터 2nd Edition에서 발췌 한 것은 현대적이고 앱과 같은 웹 경험을 구축하기위한 강력한 도구 인 CSS 스크롤 스냅 모듈을 탐색합니다. 스크롤 스냅은 정확한 cont를 허용합니다
- CSS 튜토리얼 . 웹 프론트엔드 630 2025-02-10 10:10:14
-
- DOM에서 SVG 좌표로 다시 번역하는 방법 및 다시 돌아가는 방법
- 핵심 사항 SVG에는 ViewBox 속성을 기반으로 정의 된 자체 좌표 시스템이 있으며 모든 크기로 확장 할 수 있습니다. 이것은 커서 위치, 특히 반응 형 디자인에 따라 SVG 요소를 추가하는 것을 복잡하게 만듭니다. HTML 페이지에 내장 된 SVG는 DOM의 일부가되며 다른 요소와 같이 작동 할 수 있습니다. 이를 통해 좌표 시스템 간의 변환을 완전히 피할 수 있습니다. GetBoundingClientRect () 메소드에 의해 위치와 크기를 추출함으로써 DOM에서 SVG 좌표로 변환 할 수 있습니다. 그러나 SVG에서 DOM 좌표로의 변환은 더 어려우며 SVG의 자체 행렬 분해 메커니즘을 사용해야합니다. SVG 또는 개별 요소는 번역, 스케일링, 회전 및/또는 틸팅으로 변환 할 수 있으며, 이는 최종에 영향을 미칩니다.
- CSS 튜토리얼 . 웹 프론트엔드 423 2025-02-10 10:05:12
-
- 5 슈퍼 CSS 그리드 생성기 레이아웃 용
- 5 개의 온라인 CSS 그리드 생성기 리뷰 : 반응 형 웹 레이아웃을 효율적으로 빌드 핵심 포인트 : CSS Grid는 웹 페이지 레이아웃을 만드는 강력한 도구입니다. Sarah Drasner의 CSS 그리드 생성기, Leniolabs의 레이아웃, Drew Minns 'Griddy, Masaya Kazama의 Vue Grid Generator와 같은 레이아웃을 설계 할 수있는 여러 온라인 CSS 그리드 생성기가 있습니다. Dmitrii Bykov의 CSS 그리드 레이아웃 생성기. 이 생성기는 레이아웃 생성을 단순화 할 수 있습니다
- CSS 튜토리얼 . 웹 프론트엔드 398 2025-02-10 10:04:09
-
- 스타일링 된 구성 요소를 사용하여 Unsplash를 재 설계하는 방법
- 미래 안전 CSS : 스타일 구성 요소와 반응 스타일을 단순화합니다 미래를위한 안전한 CSS를 작성하는 것은 어려운 일입니다. 수천 줄의 CSS 코드를 작성하고 유지 해야하는 경우 클래스 이름, 특이성 문제 등이 충돌합니다. 위의 문제를 해결하기 위해 스타일링 된 구성 요소가 시작되었습니다. Styled 구성 요소를 사용하면 JS에서 CSS를 쉽게 작성할 수 있으며 클래스 이름 충돌 또는 특이성 문제를 보장하지 않으며 다른 많은 장점도 있습니다. 이것은 CSS를 쓰는 것을 치료합니다. 이 튜토리얼은 CSS가 JS, Styled Com의 내용을 탐색합니다.
- CSS 튜토리얼 . 웹 프론트엔드 982 2025-02-10 09:53:09
-
- 코드 챌린지 #2 : 문자 테스트
- 이 기사에서는 CSSBattle.dev에서 호스팅 된 CSS 코딩 챌린지, 플랫폼 블렌딩 CSS 코딩 및 골프 스타일 경쟁에서 호스팅됩니다. 문제는 지정된 문자 한계 내에서 HTML 및 CSS 만 사용하여 itepoint 로고를 재현하는 것입니다.
- CSS 튜토리얼 . 웹 프론트엔드 790 2025-02-10 09:36:15
-
- HTML & CSS 양식에 대한 가이드 (해킹 없음!)
- 역사적으로, HTML 형태는 매우 까다로워졌다. 첫째, 적어도 약간의 JavaScript가 필요했기 때문에, 둘째, CSS의 양이 없었기 때문에 두 번째로는 아무런 CSS가 행동 할 수 없기 때문입니다. 그러나 현대 W의 경우 반드시 사실은 아닙니다.
- CSS 튜토리얼 . 웹 프론트엔드 1003 2025-02-10 09:34:11
-
- Flexbox 또는 CSS 그리드? 올바른 레이아웃 결정을 내리는 방법
- Flexbox vs. CSS 그리드 : 웹 개발자를위한 실용 가이드 CSS 그리드 레이아웃의 상승은 프론트 엔드 개발자들 사이에서 일반적인 질문을 불러 일으켰습니다. Flexbox는 여전히 관련이 있습니까? 둘 다 널리 지원되는 반면, 대답은 울부 짖습니다. Flexbox re
- CSS 튜토리얼 . 웹 프론트엔드 202 2025-02-10 08:51:10
도구 권장 사항
jQuery 기업 메시지 양식 연락처 코드
jQuery 기업 메시지 양식 연락처 코드는 간단하고 실용적인 기업 메시지 양식이자 문의 소개 페이지 코드입니다.
양식 버튼
2024-02-29
HTML5 MP3 뮤직 박스 재생 효과
HTML5 MP3 뮤직 박스 재생 특수 효과는 귀여운 뮤직 박스 이모티콘을 만들고 전환 버튼을 클릭하는 HTML5+css3 기반의 MP3 뮤직 플레이어입니다.
플레이어 특수 효과
2024-02-29
HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
HTML5 멋진 입자 애니메이션 탐색 메뉴 효과는 탐색 메뉴를 마우스로 가리키면 색상이 변경되는 특수 효과입니다.
메뉴 탐색
2024-02-29
jQuery 시각적 양식 드래그 앤 드롭 편집 코드
jQuery 시각적 양식 드래그 앤 드롭 편집 코드는 jQuery 및 부트스트랩 프레임워크를 기반으로 하는 시각적 양식입니다.
양식 버튼
2024-02-29
Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus
Bootstrap3 다기능 데이터 정보 배경 관리 반응형 웹 페이지 템플릿-Novus
백엔드 템플릿
2023-02-02
귀여운 여름 요소 벡터 자료(EPS+PNG)
이것은 태양, 태양 모자, 코코넛 나무, 비키니, 비행기, 수박, 아이스크림, 아이스크림, 차가운 음료, 수영 반지, 슬리퍼, 파인애플, 소라, 조개, 불가사리, 게를 포함한 귀여운 여름 요소 벡터 자료입니다. , 레몬, 자외선 차단제, 선글라스 등 자료는 JPG 미리보기를 포함하여 EPS 및 PNG 형식으로 제공됩니다.
PNG 소재
2024-05-09
4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
이것은 빨간색 2023년 졸업 배지 벡터 자료로, 총 4개이며 JPG 미리보기를 포함하여 AI, EPS 및 PNG 형식으로 사용할 수 있습니다.
PNG 소재
2024-02-29
노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
노래하는 새와 꽃이 가득한 수레로 디자인된 봄 배너 벡터 자료입니다. JPG 미리보기를 포함하여 AI 및 EPS 형식으로 제공됩니다.
배너 그림
2024-02-29
가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
가정 장식 청소 및 유지 관리 서비스 회사 웹 사이트 템플릿은 가정 장식, 청소, 유지 관리 및 기타 서비스 조직을 제공하는 홍보 웹 사이트에 적합한 웹 사이트 템플릿 다운로드입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.
프런트엔드 템플릿
2024-05-09
신선한 색상의 개인 이력서 가이드 페이지 템플릿
신선한 컬러 매칭 개인 구직 지원 이력서 가이드 페이지 템플릿은 신선한 컬러 매칭 스타일에 적합한 개인 구직 이력서 작업 표시 가이드 페이지 웹 템플릿 다운로드입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.
프런트엔드 템플릿
2024-02-29
디자이너 크리에이티브 작업 이력서 웹 템플릿
디자이너 크리에이티브 작업 이력서 웹 템플릿은 다양한 디자이너 직위에 적합한 개인 작업 이력서 표시를 위한 다운로드 가능한 웹 템플릿입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.
프런트엔드 템플릿
2024-02-28
현대 엔지니어링 건설 회사 웹사이트 템플릿
현대 엔지니어링 및 건설 회사 웹 사이트 템플릿은 엔지니어링 및 건설 서비스 산업 홍보에 적합한 다운로드 가능한 웹 사이트 템플릿입니다. 팁: 이 템플릿은 Google 글꼴 라이브러리를 호출하므로 페이지가 느리게 열릴 수 있습니다.
프런트엔드 템플릿
2024-02-28
