This time, I would like to put together material on CSS, a language essential for styling websites. This material will provide an overview of the CSS properties needed for web development and design, and introduce the basic concepts and advanced features required for website styling.
CSS properties are the core tools for adjusting a website's design and layout. They allow you to control font styles, colors, sizes, spacing, borders, backgrounds, and more.
Understanding how to use each property and apply it effectively will help you make your website look more attractive.
Overview of CSS Properties - Basic Concepts for Website Styling
Basic Concepts of CSS
CSS properties are used to apply styles to HTML elements. A CSS style rule consists of a selector and a declaration block; each declaration contains a property and a value.
They allow you to control font styles, colors, sizes, spacing, borders, backgrounds, and more.
선택자 {
속성: 값;
속성: 값;
}
CSS generally consists of selectors and declaration blocks. A selector identifies the HTML elements to which a style will be applied.
- ID selector: Uses the #idname format to match the value of an HTML element's id attribute.
- Class selector: Uses the .classname format to match the value of an HTML element's class attribute.
- Type selector: Directly uses HTML tags such as p, h1, and div.
CSS is hierarchical, and specific conditions determine which styles take precedence. This allows developers to implement diverse and complex web designs.
Selectors and Style Rules - How to Select Elements and Assign Properties
In CSS, selectors are used to select web elements, and style rules are used to assign styles to the selected elements.
This section will explore the various types of selectors and style rules and how to use them. Selectors can select elements based on their type, class, ID, attributes, and more.
1. Types of Selectors
* Type Selectors
p {
color: red;
}
Styles are applied using HTML element names. In the example above, the text color of all <p> elements is set to red.
* Class Selectors
.my-class {
font-size: 16px;
}
Styles are applied using a class name after a dot (.). In the example above, styles are applied to all elements with the class="my-class" attribute.
* ID Selectors
#my-id {
border: 1px solid black;
}
Styles are applied using an ID name after a hash sign (#). In the example above, styles are applied to the element with the id="my-id" attribute.
* Descendant Selectors
div p {
color: blue;
}
A space is used to apply styles only to the descendant elements of a specific element. In the example above, styles are applied to all descendant <p> elements of the <div> element.
* Attribute Selectors
input[type="text"] {
background-color: lightgray;
}
Styles are applied using an attribute and its value, or just an attribute name, inside square brackets ([]). In the example above, styles are applied to all <input> elements whose type attribute has the value text.
2. Style Rules
selector {
property: value;
property: value;
}
Style rules define the styles applied to HTML elements selected using selectors. Rules are written between curly braces {}, and each style declaration consists of a property and a value.
3. Specificity
Sometimes multiple style rules can apply to a single element. In such cases, specificity determines which rule takes precedence.
In general, ID selectors have higher specificity than class selectors, and class selectors have higher specificity than type selectors.
Simply put, the order of precedence is ID > class > element.
4. Inheritance
Some CSS properties are inherited from parent elements by child elements. For example, the font-family property applied to a parent element is inherited by its child elements, so the same font is applied to them as well.
In this way, understanding and using selectors and style rules allows you to implement diverse and complex web page designs.
Text Styling - Text Properties Such as Fonts, Colors, and Sizes
The way text is styled using CSS is an important factor in determining a website's overall look and feel. Text also has a major impact on design and readability.
This section will explore text properties such as fonts, colors, and sizes, and explain effective ways to style text.
1. Font Style Properties
p {
font-family: "Arial", sans-serif;
}
font-family: Specifies the font to apply to a web page.
h1 {
font-size: 32px;
}
font-size: Specifies the font size.
strong {
font-weight: bold;
}
font-weight: Specifies the weight of the text. (normal, bold, bolder, lighter, 100-900)
em {
font-style: italic;
}
font-style: Specifies the style of the text. (normal, italic, oblique)
2. Text Color and Background Properties
p {
color: #333333;
}
color: Specifies the color of the text.
span {
background-color: yellow;
}
background-color: Specifies the background color of the text.
3. Text Alignment and Line Spacing Properties
p {
text-align: center;
}
text-align: Specifies the alignment of the text. (left, right, center, justify)
p {
line-height: 1.6;
}
line-height: Specifies the line spacing.
p {
text-indent: 20px;
}
text-indent: Specifies the indentation of the first line of text.
4. Text Transformation Properties
h2 {
text-transform: uppercase;
}
text-transform: Changes the case of the text. (none, uppercase, lowercase, capitalize)
a {
text-decoration: none;
}
text-decoration: Adds or removes lines on text. (none, underline, overline, line-through)
p {
letter-spacing: 1px;
}
letter-spacing: Specifies the spacing between letters.
5. Paragraph Spacing and Margins
p {
margin: 10px;
}
margin: Specifies the space outside a paragraph.
p {
padding: 5px;
}
padding: Specifies the space inside a paragraph.
By combining these text styling properties, you can style the text on a web page in various ways.
Backgrounds and Gradients - How to Set Background Images and Colors
A website's background is an important factor in determining its overall visual effect.
This section will explore how to set background images and colors, and introduce ways to add interesting effects to a website using gradients.
You can style a website's background using various properties for background image size, repetition, position, gradients, and more.
1. Background Color Property
div {
background-color: #ffcc00;
}
background-color: Specifies an element's background color.
2. Background Image Properties
div {
background-image: url('image.jpg');
}
background-image: Sets an image as an element's background.
div {
background-repeat: no-repeat;
}
background-repeat: Specifies how the background image repeats. (no-repeat, repeat-x, repeat-y, repeat)
div {
background-position: center center;
}
background-position: Specifies the position of the background image.
div {
background-size: cover;
}
background-size: Specifies the size of the background image. (auto, cover, contain, <length>, <percentage>)
3. Gradient Properties
A gradient is a background effect in which two or more colors gradually transition.
div {
background-image: linear-gradient(to right, red, yellow);
}
Linear Gradient: Colors transition along a straight line.
div {
background-image: radial-gradient(circle, red, yellow);
}
Radial Gradient: Colors transition outward in a circular pattern from a point.
4. Background Shorthand Property
div {
background: #ffcc00 url('image.jpg') no-repeat center center / cover;
}
Multiple background properties can be expressed in a single line.
Using these background and gradient properties allows you to create a variety of web page designs.
Combining and using them correctly can improve the overall quality of a website's design.
Layout Properties - The Box Model, Positioning, Flexbox, and More
A website's layout is an important factor that directly affects its structure and user experience.
This section will explore layout properties such as the box model, positioning, and flexbox, and introduce ways to design a website's structure effectively.
Layout properties include the box model, position, flexbox, and more, and define a web page's structure and arrangement. You can use these properties to implement responsive layouts.
1. Box Model
Every element on a web page is considered a box, and this box model consists of margin, border, padding, and content.
div {
margin: 10px;
border: 2px solid black;
padding: 20px;
}
margin: The space outside the box.
border: The border of the box.
padding: The space inside the box.
content: The area where the actual content is located.
2. Positioning
div {
position: relative;
top: 10px;
left: 20px;
}
static: The default position. The top, right, bottom, and left properties do not apply.
relative: Moves relative to its default position.
absolute: Positioned relative to the nearest positioned ancestor element.
fixed: Positioned relative to the viewport.
sticky: Has relative or fixed positioning depending on the scroll position.
3. Flexbox
Flexbox is a model for solving complex layout and alignment problems.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
display: flex: Makes an element a flex container.
flex-direction: Defines the direction of the main axis. (row, column)
justify-content: Defines how items are aligned along the main axis.
align-items: Defines how items are aligned along the cross axis.
4. Grid Layout
Grid layout is a 2-dimensional layout system that uses rows and columns to create designs.
.container {
display: grid;
grid-template-columns: auto auto auto;
}
display: grid: Makes an element a grid container.
grid-template-columns / grid-template-rows: Defines the sizes of columns and rows.
These layout properties allow you to create a variety of web designs and structures, and using them appropriately can improve the user experience.
Animations and Transitions - Properties Related to Elements' Dynamic Movement and Changes
Animations and transitions on a website are effective ways to capture users' attention and encourage interaction.
This section explores CSS properties related to elements' dynamic movement and changes, and introduces ways to add interesting animation effects to a website.
You can use CSS properties to implement various animation effects, such as element movement, color changes, and size changes.
1. Transitions
Transitions are used to smoothly display changes in CSS properties over a set period of time. Basically, a transition changes from a starting state to an ending state.
div {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
transition-property: Specifies the property to which the transition effect will be applied.
transition-duration: Specifies the duration of the transition effect.
transition-timing-function: Specifies the transition's speed curve.
transition-delay: Specifies the waiting time before the transition effect begins.
2. Animations
Animations can use keyframes to create style changes across multiple stages. Unlike transitions, they can define intermediate states in addition to the starting and ending states.
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes: Defines each stage of an animation.
animation-name: Specifies the name of the @keyframes rule.
animation-duration: Specifies the duration of the animation.
animation-timing-function: Specifies the animation's speed curve.
animation-delay: Specifies the waiting time before the animation begins.
animation-iteration-count: Specifies the number of times the animation repeats.
animation-direction: Specifies the direction in which the animation runs.
Using these animation and transition features allows you to draw users' attention or build interactive websites.
Responsive Web Design: Media Queries and Viewport Adjustment
Responsive web design is an important concept that ensures a website is displayed optimally on various devices.
This section will explore media queries and viewport adjustment, and introduce ways to adapt a website to different screen sizes.
You can use media queries to apply different styles according to screen size, and adjust the viewport to optimize the display on mobile devices.
1. Media Queries
Media queries allow you to apply different style rules according to screen size, resolution, orientation, and more. This lets you dynamically change a website's layout or styles.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
The example above is code that changes the background color of body to lightblue when the screen's maximum width is 600px or less.
2. Viewport
Viewport is a term that defines which part of a website the user is viewing. Appropriate viewport settings are needed for a website to display correctly on a mobile device or tablet.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport meta tag above sets the viewport width to match the device width and sets the initial zoom level to 1.0.
3. Fluid Grid System
Responsive design uses a fluid grid system to specify element widths in percentages (%) rather than pixels (px).
.container {
width: 100%;
}
.element {
width: 50%;
}
This allows the widths of elements to change dynamically according to screen size.
By using these techniques together, you can provide users with a website optimized for various environments and devices.
Transformations and Transforms - Properties for Adjusting Elements' Size, Rotation, Skew, and More
Using CSS to adjust elements' transformations and transforms is an important way to improve a website's visual effects.
This section will explore transformation and transform properties for adjusting size, rotation, skew, and more, and introduce ways to add distinctive visual elements to a website.
You can use CSS properties to implement various transformation effects, such as movement, rotation, skewing, and resizing.
1. Transform Property
The transform property has various values that can produce a range of transformation effects.
div {
transform: scale(1.5, 1.5); /* 요소를 1.5배 확대 */
}
scale(x, y): Scales an element up or down along the x-axis and y-axis.
rotate(angle): Rotates an element by the specified angle.
translate(x, y): Moves an element along the x-axis and y-axis.
skew(x-angle, y-angle): Skews an element along the x-axis and y-axis.
2. Transform Origin Property
You can use the transform-origin property to set the reference point for a transformation. For example, you can change the center of rotation.
div {
transform: rotate(45deg); /* 45도 회전 */
transform-origin: top left;
/* 회전의 기준점을 왼쪽 상단으로 설정 */
}
The default value is 50% 50%, which is the center of the element.
3. Matrix Transformation
A matrix transformation allows you to apply transformations such as scale, translate, rotate, and skew simultaneously.
However, because matrix values involve a complex process of combining multiple transformations, the properties corresponding to individual transformations are generally used.
div {
transform: matrix(a, b, c, d, tx, ty);
}
These transformation and transform features allow you to apply dynamic and diverse design effects to web pages.
Shadows and Borders - How to Add Shadows or Borders to Elements
Shadows and borders are important elements that make a website's design more interesting.
This section explores how to add shadows and borders to elements, and introduces ways to apply different styles of shadows and borders.
You can use CSS properties to set shadow effects such as shadow type, position, size, and color, as well as elements' border styles, thicknesses, colors, and more.
1. Box Shadow
You can use the box-shadow property to add a shadow to a box element. This property can give an element a sense of depth or add visual emphasis.
div {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
div {
box-shadow: 5px 5px 10px 2px #000000;
/* x축 5px, y축 5px 거리에, 흐림 정도 10px,
확장 정도 2px, 색상은 검정색인 그림자 적용 */
}
offset-x and offset-y: Specify the position of the shadow.
blur-radius: Specifies how much the shadow is blurred.
spread-radius: Specifies how much the shadow spreads.
color: Specifies the color of the shadow.
2. Border
You can use the border property to add a border to an element. You can specify the border's thickness, style, and color.
div {
border: width style color;
}
div {
border: 2px solid #000000;
/* 굵기 2px, 스타일은 실선, 색상은 검정색인 테두리 적용 */
}
width: Specifies the thickness of the border.
style: Specifies the style of the border. (Examples: solid, dashed, dotted, etc.)
color: Specifies the color of the border.
3. Border Radius
div {
border-radius: 10px; /* 모든 모서리를 10px 둥글게 */
}
You can use the border-radius property to round an element's corners. You can also specify how rounded each corner is individually.
Using these shadow and border effects appropriately can make a web page's design richer and more dynamic.
Effective Website Design - Design Tips Using CSS Properties
CSS Tips and Rules
This section explores tips and rules for improving website design by using CSS properties effectively.
You can make your website more attractive using various design tips, such as appropriate color combinations, use of spacing, placement of text and images, and animation effects.
Because a website's design has an important impact on the user experience, it is important to understand and apply effective web design techniques and principles.
1. Consistent Styling
Consistent styling makes a website easier for users to understand and use. Elements of the same type should have consistent styles. To achieve this, it is important to use CSS classes and IDs effectively.
2. Color and Contrast
Appropriate colors and contrast can improve a website's readability and user interest. Increase the contrast between the background and text to make the text easier to read, and align colors with the brand image.
3. Responsive Design
We live in an era in which designs that respond appropriately to various devices and screen sizes are essential. You can use media queries to adjust styles for different screen sizes.
4. User-Centered Design
Build a design centered on users' needs and experiences. To optimize the user experience, design with users' behavior, preferences, feedback, and more in mind.
5. Placement and Use of Space
The use of space, including alignment, margins, and padding, greatly affects a website's overall appearance. You should create a clean, readable layout by ensuring sufficient space between elements without wasting too much space.
6. Effective Typography
Because text is a major element of a website, typography elements such as font size, line height, and font family should be carefully selected and styled.
7. Efficient Code Structure
Clean, well-structured CSS code is easier to maintain and less likely to contain bugs. To organize CSS code, use comments and group related styles.
This concludes the introduction to CSS properties and their various types. We have covered properties related to selectors and style rules, text styling, backgrounds and gradients, layout properties, animations and transitions, responsive web design, transformations and transforms, shadows and borders, and effective website design in detail.
CSS properties are the core tools for website styling, and using them correctly can make a website more attractive. This material will help you gain a comprehensive understanding of the concepts and features of CSS properties and learn various ways to style websites.
Because CSS properties greatly affect a website's design and user experience, I encourage you to start by becoming familiar with the basic properties, then achieve more advanced styling through further study and experimentation.
