본문으로 건너뛰기

Commonly Used CSS Properties

Commonly Used CSS Properties

In addition to the CSS properties introduced earlier, such as color, background-color, font-size, there are hundreds of CSS properties in use.

Here are some of the key CSS properties.


box-shadow

Adds a shadow effect to HTML elements.

Example:

CSS
div {
box-shadow: 5px 5px 10px gray;
}

The CSS code above uses the box-shadow property to apply a shadow effect to the <div> element.

The first 5px

  • Meaning: The horizontal offset of the shadow.
  • Explanation: This value moves the shadow 5 pixels to the right of the element.

The second 5px

  • Meaning: The vertical offset of the shadow.
  • Explanation: This value moves the shadow 5 pixels below the element.

10px

  • Meaning: The blur radius of the shadow.
  • Explanation: This value determines how blurred the edges of the shadow will be. A blur radius of 10 pixels will make the edges of the shadow spread out softly.

gray

  • Meaning: Sets the color of the shadow to gray.

As a result, a gray shadow appears 5 pixels to the right and 5 pixels below the div element.


border-radius

Rounds the corners of an element.

Example:

CSS
div {
border-radius: 10px;
}

The div element's all corners are rounded with a curvature of 10px.


outline

Draws a line around the element to emphasize it.

Example:

CSS
div {
outline: 2px solid red;
}

Draws a 2px thick red line around the div element.


outline and border are both CSS properties that draw lines around the element border, but there are a few differences.

  • border: Draws a line right at the edge of the element. This can result in an increase in the total size of the element. That is, the thickness of the border is included in the total size of the element.

  • outline: Draws a line outside the edge of the element. This does not change the total size of the element. outline does not affect the size or layout of the element.


Please follow the asterisk-emphasized parts of the code as you input.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!