이 과정에서는 CSS의 기초를 명확하고 이해하기 쉬운 부분으로 나눕니다. 다음 몇 가지 모듈에서는 CSS의 핵심 요소가 작동하는 방식과 프로젝트에서 이를 효과적으로 사용하는 방법을 알아봅니다. 'Learn CSS' 로고 옆의 메뉴 창을 사용하여 모듈을 탐색합니다.
상자 모델, 계단식 및 특수성, Flexbox, 그리드, Z-색인과 같은 CSS 기본 사항을 학습합니다. 또한 함수, 색상 유형, 그라디언트, 논리 속성, 상속에 관해 알아봅니다. 이를 통해 모든 사용자 인터페이스를 사용할 수 있는 다재다능한 프런트엔드 개발자가 될 수 있습니다.
각 모듈에는 지식을 테스트할 수 있는 대화형 데모와 자체 평가가 포함되어 있습니다. 읽기 및 데모를 통해 학습하는 것 외에도 각 주제와 함께 제공되는 팟캐스트 에피소드를 통해 지식을 배우고 계속 확장할 수 있습니다.
이 과정은 초급 및 고급 CSS 개발자 모두를 대상으로 합니다. 시리즈를 처음부터 끝까지 진행하면서 처음부터 끝까지 CSS에 관한 일반적인 지식을 얻거나, 특정 스타일 지정 주제에 관한 참고 자료로 사용할 수 있습니다. 전반적인 웹 개발이 처음인 경우 HTML 알아보기에서 마크업을 작성하고 스타일시트를 연결하는 방법을 알아보세요.
학습할 내용은 다음과 같습니다.
Box 모델
CSS가 표시하는 모든 것은 상자이므로 CSS 상자 모델의 작동 방식을 이해하는 것은 CSS의 핵심 기반입니다.
선택기
요소에 CSS를 적용하려면 요소를 선택해야 합니다. CSS에서 제공하는 여러 가지 방법을 이 모듈에서 살펴볼 수 있습니다.
캐스케이드
경우에 따라 두 개 이상의 경쟁 CSS 규칙을 하나의 요소에 적용할 수 있습니다. 브라우저에서 사용할 항목을 선택하는 방법과 이 선택을 제어하는 방법을 알아보세요.
특수성
이 모듈에서는 캐스케이드의 핵심 부분인 특수성을 자세히 살펴봅니다.
상속
값을 지정하지 않으면 일부 CSS 속성은 상속됩니다. 이 모듈에서 작동 원리와 활용 방법에 대해 알아보세요.
색상
CSS에서 색상을 지정하는 방법에는 여러 가지가 있습니다. 이 모듈에서는 가장 일반적으로 사용되는 색상 값을 살펴봅니다.
크기 단위
유연한 웹의 매체를 사용하면서 CSS를 사용하여 요소의 크기를 조정하는 방법을 알아보세요.
레이아웃
구성요소나 페이지 레이아웃을 빌드할 때 선택해야 하는 다양한 레이아웃 메서드에 관한 개요입니다.
Flexbox
Flexbox는 항목 그룹을 하나의 차원에 배치하도록 설계된 레이아웃 메커니즘입니다. 이 모듈에서 이를 사용하는 방법을 알아보세요.
그리드
CSS 그리드 레이아웃은 행과 열로 레이아웃을 제어하는 2차원 레이아웃 시스템을 제공합니다. 전력망에서 제공하는 모든 혜택을 살펴보세요.
논리적 속성
흐름에 상대적인 논리 속성 및 값은 화면의 물리적 모양이 아니라 텍스트의 흐름에 연결됩니다. 이 새로운 CSS 접근 방식을 활용하는 방법을 알아보세요.
간격
사용 중인 레이아웃 방법과 빌드 중인 구성요소에 가장 적합한 요소 간격 방법을 선택하는 방법을 알아보세요.
유사 요소
유사 요소는 HTML을 추가하지 않고 추가 요소를 추가하거나 타겟팅하는 것과 같습니다. 이들은 다양한 역할을 맡으며, 이 모듈에서는 해당 역할에 대해 알아볼 수 있습니다.
유사 클래스
유사 클래스를 사용하면 상태 변경에 따라 CSS를 적용할 수 있습니다. 즉, 잘못된 이메일 주소와 같은 사용자 입력에 반응할 수 있습니다.
테두리
테두리는 상자의 프레임을 제공합니다. CSS를 사용하여 테두리의 크기, 스타일, 색상을 변경하는 방법을 알아보세요.
그림자
CSS에서 텍스트 및 요소에 그림자를 추가하는 방법에는 여러 가지가 있습니다. 각 옵션의 사용 방법 및 설계된 작업을 알아보세요.
포커스
웹 애플리케이션에서 포커스의 중요성 이해 포커스를 관리하는 방법과 마우스를 사용하는 사용자와 키보드를 사용하는 사용자 모두에게 페이지 경로가 작동하는지 확인하는 방법을 알아봅니다.
Z-색인 및 컨텍스트 스태킹
Z-색인 및 스태킹 컨텍스트를 사용하여 요소가 서로 겹쳐지는 순서를 제어하는 방법을 알아보세요.
함수
CSS에는 다양한 내장 함수가 있습니다. 몇 가지 주요 기능과 사용 방법을 알아보세요.
경사도
이 모듈에서는 CSS에서 제공되는 다양한 유형의 그래디언트를 사용하는 방법을 알아보겠습니다. 그라데이션을 사용하면 그래픽 앱에서 이미지를 만들지 않고도 여러 유용한 효과를 만들 수 있습니다.
애니메이션
애니메이션은 상호작용 요소를 강조하고 디자인에 흥미와 재미를 더할 수 있는 좋은 방법입니다. CSS로 애니메이션 효과를 추가하고 제어하는 방법을 알아보세요.
필터
CSS의 필터를 사용하면 그래픽 애플리케이션에서만 가능하다고 생각하는 효과를 적용할 수 있습니다. 이 모듈에서는 사용 가능한 기능을 살펴보겠습니다.
혼합 모드
두 개 이상의 레이어를 혼합하여 컴포지션 효과를 만들고 혼합 모드에 관한 이 모듈에서는 흰색 배경이 있는 이미지를 분리하는 방법을 알아봅니다.
목록
목록은 구조적으로 목록 항목으로 채워진 목록 컨테이너 요소로 구성됩니다. 이 모듈에서는 목록의 모든 부분에 스타일을 지정하는 방법을 알아보겠습니다.
전환
요소의 상태 간 전환을 정의하는 방법을 알아봅니다. 전환을 사용하여 사용자 상호작용에 관한 시각적 피드백을 제공하여 사용자 환경을 개선합니다.
오버플로우
오버플로는 설정된 상위 크기에 맞지 않는 콘텐츠를 처리하는 방법입니다. 이 모듈에서는 틀에서 벗어난 콘텐츠에 스타일을 지정하는 방법을 알아봅니다.
배경
CSS를 사용하여 상자의 배경에 스타일을 지정하는 방법을 알아보세요.
텍스트 및 서체
웹에서 텍스트 스타일을 지정하는 방법 알아보기
결론 및 다음 단계
다음 단계로 나아가는 데 도움이 되는 추가 리소스입니다.
이제 CSS를 배울 준비가 되셨나요? 이제 시작해 볼까요?