분류 css

Google 개발자가 훌륭한 예제로 가르쳐 주는 CSS

컨텐츠 정보

  • 조회 127 (작성일 )

본문

이 과정은 CSS의 기초를 소화 가능하고 이해하기 쉬운 부분으로 나눕니다. 다음 몇 개의 모듈을 통해 CSS의 핵심 측면이 작동하는 방식과 프로젝트에서 이를 효과적으로 사용하는 방법을 배우게 됩니다. 모듈을 탐색하려면 "Learn CSS" 로고 옆에 있는 메뉴 창을 사용하십시오.


https://web.dev/learn/css/


상자 모델, 캐스케이드 및 특수성, 플렉스박스, 그리드 및 z-인덱스와 같은 CSS 기본 사항을 배웁니다. 그리고 이러한 기본 사항과 함께 기능, 색상 유형, 그라디언트, 논리적 속성 및 상속에 대해 학습하여 모든 사용자 인터페이스를 사용할 준비가 된 다재다능한 프론트 엔드 개발자가 됩니다.


각 모듈은 지식을 테스트할 수 있는 대화형 데모 및 자체 평가로 가득 차 있습니다. 읽기 및 데모를 통한 학습 외에도 지식을 배우고 계속 확장하는 또 다른 방법으로 각 주제에 대한 팟캐스트 에피소드가 함께 제공됩니다.


이 과정은 초급 및 고급 CSS 개발자를 위해 만들어졌습니다. 시리즈를 처음부터 끝까지 살펴보고 CSS에 대한 일반적인 이해를 처음부터 끝까지 살펴보거나 특정 스타일링 주제에 대한 참조로 사용할 수 있습니다. 전반적인 웹 개발을 처음 접하는 분들을 위해 MDN의 HTML 소개 과정을 확인하여 마크업을 작성하고 스타일시트를 연결하는 방법에 대해 모두 배우십시오.


Box Model 


CSS에 의해 표시되는 모든 것은 상자입니다. 따라서 CSS 상자 모델이 작동하는 방식을 이해하는 것은 CSS의 핵심 기반입니다.


Selectors 


요소에 CSS를 적용하려면 선택해야 합니다. CSS는 이를 수행하는 다양한 방법을 제공하며 이 모듈에서 이를 탐색할 수 있습니다.


The cascade 


때로는 두 개 이상의 경쟁 CSS 규칙이 요소에 적용될 수 있습니다. 이 모듈에서는 브라우저가 사용할 것을 선택하는 방법과 이 선택을 제어하는 ​​방법을 알아봅니다.


Specificity 


이 모듈은 캐스케이드의 핵심 부분인 특이성에 대해 자세히 살펴봅니다.


Inheritance 


일부 CSS 속성은 값을 지정하지 않으면 상속됩니다. 이 모듈의 작동 방식과 이점을 활용하는 방법을 알아보십시오.


Color 


CSS에서 색상을 지정하는 방법에는 여러 가지가 있습니다. 이 모듈에서는 가장 일반적으로 사용되는 색상 값을 살펴봅니다.


Sizing Units 


이 모듈에서는 웹의 유연한 매체를 사용하여 CSS를 사용하여 요소의 크기를 조정하는 방법을 알아봅니다.


Layout 


구성 요소 또는 페이지 레이아웃을 만들 때 선택해야 하는 다양한 레이아웃 방법에 대한 개요입니다.


Flexbox 


Flexbox는 한 차원에서 항목 그룹을 배치하도록 설계된 레이아웃 메커니즘입니다. 이 모듈에서 사용 방법을 알아보세요.


Grid 


CSS 그리드 레이아웃은 행과 열의 레이아웃을 제어하는 ​​2차원 레이아웃 시스템을 제공합니다. 이 모듈에서는 그리드가 제공하는 모든 것을 살펴보십시오.


Logical Properties 


논리적, 흐름 상대 속성 및 값은 화면의 물리적 모양이 아닌 텍스트의 흐름에 연결됩니다. CSS에 대한 이 새로운 접근 방식을 활용하는 방법을 알아보세요.


Spacing 


사용 중인 레이아웃 방법과 빌드해야 하는 구성 요소를 고려하여 요소 간격을 지정하는 가장 좋은 방법을 선택하는 방법을 알아보십시오.


Pseudo-elements 


의사 요소는 HTML을 더 추가할 필요 없이 추가 요소를 추가하거나 대상으로 지정하는 것과 같습니다. 다양한 역할이 있으며 이 모듈에서 이에 대해 알아볼 수 있습니다.


Pseudo-classes 


의사 클래스를 사용하면 상태 변경을 기반으로 CSS를 적용할 수 있습니다. 이는 디자인이 잘못된 이메일 주소와 같은 사용자 입력에 반응할 수 있음을 의미합니다.


Borders 


테두리는 상자에 프레임을 제공합니다. 이 모듈에서는 CSS를 사용하여 테두리의 크기, 스타일 및 색상을 변경하는 방법을 알아봅니다.


Shadows 


CSS에서 텍스트와 요소에 그림자를 추가하는 방법에는 여러 가지가 있습니다. 이 모듈에서는 각 옵션을 사용하는 방법과 해당 옵션이 설계된 작업을 배웁니다.


Focus 


웹 애플리케이션에서 초점의 중요성을 이해하십시오. 포커스를 관리하는 방법과 페이지를 통과하는 경로가 마우스를 사용하는 사용자와 키보드를 사용하여 탐색하는 사용자에게 적합한지 확인하는 방법을 알아봅니다.


Z-index and stacking contexts 


이 모듈에서는 z-색인과 스택 컨텍스트를 사용하여 사물이 서로 겹쳐지는 순서를 제어하는 ​​방법을 알아봅니다.


Functions 


CSS에는 다양한 기능이 내장되어 있습니다. 이 모듈에서는 몇 가지 주요 기능과 사용 방법에 대해 알아볼 것입니다.


Gradients 


이 모듈에서는 CSS에서 사용할 수 있는 다양한 유형의 그라디언트를 사용하는 방법을 알아봅니다. 그라디언트는 그래픽 응용 프로그램을 사용하여 이미지를 만들 필요 없이 유용한 효과의 전체 호스트를 만드는 데 사용할 수 있습니다.


Animations 


애니메이션은 인터랙티브한 요소를 강조하고 디자인에 흥미와 재미를 더할 수 있는 좋은 방법입니다. 이 모듈에서는 CSS로 애니메이션 효과를 추가하고 제어하는 ​​방법을 알아봅니다.


Filters 


CSS의 필터는 그래픽 응용 프로그램에서만 가능하다고 생각할 수 있는 효과를 적용할 수 있음을 의미합니다. 이 모듈에서는 사용 가능한 항목을 찾을 수 있습니다.


Blend Modes 


두 개 이상의 레이어를 혼합하여 구성 효과를 만들고 혼합 모드에서 이 모듈에서 흰색 배경이 있는 이미지를 분리하는 방법을 배웁니다.


결론 및 다음 단계 


다음 단계를 수행하는 데 도움이 되는 추가 리소스입니다.



CSS