웹 프로젝트를 향상시키는 데 사용할 수 있는 몇 가지 일반적인 CSS 예를 살펴보겠습니다.

1. 기본 스타일 지정:

   • 요소의 배경색을 설정합니다.

    .my-element {
      background-color: #f0f0f0;
    }
   

• 텍스트 색상 변경:
  

   .my-text {
     color: #333;
   }
  

1. 테두리:

   • 테두리 너비, 스타일, 색상 설정:

    .my-box {
      border: 2px solid #ddd;
    }
   

2. 여백 및 안쪽 여백:

   • 각 측면의 여백을 지정합니다.

    .my-box {
      margin: 10px 20px;
    }
   

• 요소의 패딩 설정:
  

   .my-content {
     padding: 15px;
   }
  

1. 배경:

   • 전체 페이지의 배경색을 설정합니다.

    body {
      background-color: #f9f9f9;
    }
   

• 이미지를 배경으로 사용:
  

   .hero-section {
     background-image: url('path/to/image.jpg');
     background-size: cover;
   }
  

1. 반응형 디자인:

   • 미디어 쿼리를 사용하여 화면 크기에 따라 스타일을 조정합니다.

    @media screen and (max-width: 768px) {
      .my-element {
        font-size: 14px;
      }
    }
   

클래스 이름(예: .my-element)을 실제 HTML 요소로 바꾸는 것을 잊지 마세요.