CSS 학습에 오신 것을 환영합니다!
이 과정은 CSS의 기초 내용을 소화 가능하고 이해하기 쉬운 부분들로 세분합니다. 다음 몇 개의 모듈을 통해 CSS의 핵심 측면이 어떻게 작동하고 프로젝트에서 이를 효과적으로 사용하는 방법은 무엇인지 배우게 될 것입니다. 모듈을 탐색하려면 "CSS 학습" 로고 옆에 있는 메뉴 창을 사용하세요.
상자 모델, 캐스케이드 및 특수성, 플렉스박스, 그리드 및 z-인덱스와 같은 CSS 기본 사항을 배웁니다. 또한 이러한 기본 사항과 함께 함수, 색상 유형, 그래디언트, 논리적 속성 및 상속에 대해 학습하여 모든 사용자 인터페이스를 사용할 준비를 마친 유능한 실무 개발자의 자질을 부여합니다.
각 모듈에는 지식을 테스트할 수 있는 대화형 데모와 자체 평가가 풍부하게 포함되어 있습니다. 읽기와 데모를 통한 학습 외에도 지식을 익히고 계속 확장하는 또 다른 방법으로 각 주제에 대한 팟캐스트 에피소드가 함께 제공됩니다.
이 과정은 초급 및 고급 CSS 개발자를 위해 만들어졌습니다. 시리즈를 처음부터 끝까지 거치면서 CSS에 대한 전반적인 내용을 습득하거나 특정 스타일링 주제에 대한 참조로 사용할 수 있습니다. 웹 개발을 처음 접하는 분들은 MDN의 HTML 소개 과정을 통해 마크업을 작성하고 스타일시트를 연결하는 방법을 모두 배울 수 있습니다.
학습할 내용은 다음과 같습니다.
Box Model
<p>Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.
Selectors
To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module.
The cascade
Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.
Specificity
This module takes a deeper look at specificity, a key part of the cascade.
Inheritance
Some CSS properties inherit if you don't specify a value for them. Find out how this works, and how to use it to your advantage in this module.
Color
There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values.
Sizing Units
In this module find out how to size elements using CSS, working with the flexible medium of the web.
Layout
An overview of the various layout methods you have to choose from when building a component or page layout.
Flexbox
Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.
Grid
CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer.
Logical Properties
Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.
Spacing
Find out how to select the best method of spacing elements, taking into consideration the layout method you are using and component that you need to build.
Pseudo-elements
A pseudo-element is like adding or targeting an extra element without having to add more HTML. They have a variety of roles and you can learn about them in this module.
Pseudo-classes
Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.
Borders
A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS.
Shadows
There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for.
Focus
Understand the importance of focus in your web applications. You'll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate.
Z-index and stacking contexts
In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context.
Functions
CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.
Gradients
In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an image using a graphics application.
Animations
Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module find out how to add and control animation effects with CSS.
Filters
Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available.
Blend Modes
Create compositional effects by mixing two or more layers, and learn how to isolate an image with a white background in this module on blend modes.
Lists
A list, structurally, is composed of a list container element filled with list items. In this module, you'll learn how to style all the parts of a list.
Transitions
In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.
Overflow
Overflow is how you deal with content that doesn’t fit in a set parent size. In this module, you’ll think outside the box, and learn how to style overflowing content.
Backgrounds
In this module learn the ways you can style backgrounds of boxes using CSS.
Text and typography
In this module, learn how to style text on the web.
Conclusion and next steps
Further resources to help you take your next steps.
CSS를 배울 준비가 되셨나요? 그럼 시작하겠습니다.