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