CSS 스타일

CSS에서 중요한 스타일 종류는 웹 페이지의 레이아웃, 타이포그래피, 색상, 간격 등을 제어하는 데 사용됩니다. 이러한 스타일 속성들은 웹 페이지를 디자인하고 사용자 경험을 향상시키는 데 필수적인 요소입니다. 아래는 중요한 CSS 스타일 종류와 그 상세 설명입니다.

1. 색상 및 배경

• color: 텍스트의 색상을 지정합니다.
   
• background-color: 요소의 배경색을 지정합니다.
   
• background-image: 요소의 배경에 이미지를 지정합니다.
   
• background-repeat: 배경 이미지의 반복 여부를 지정합니다.
   
• background-size: 배경 이미지의 크기를 지정합니다.
   

2. 타이포그래피

• font-family: 텍스트의 글꼴을 지정합니다.
   
• font-size: 텍스트의 크기를 지정합니다.
   
• font-weight: 텍스트의 두께를 지정합니다. (예: normal, bold, 100, 400, 700 등)
   
• font-style: 텍스트의 스타일을 지정합니다. (예: normal, italic, oblique)
   
• line-height: 텍스트 줄 간의 간격을 지정합니다.
   
• text-align: 텍스트의 정렬을 지정합니다. (예: left, right, center, justify)
   
• text-decoration: 텍스트에 밑줄, 취소선 등을 적용합니다.
   
• text-transform: 텍스트의 대소문자를 제어합니다. (예: uppercase, lowercase, capitalize)
   

3. 박스 모델

• margin: 요소의 외부 여백을 지정합니다. 상하좌우의 여백을 각각 또는 일괄적으로 설정할 수 있습니다.
   
• padding: 요소의 내부 여백을 지정합니다.
   
• border: 요소의 테두리를 지정합니다. 두께, 스타일, 색상을 설정할 수 있습니다.
   
• border-radius: 요소의 모서리를 둥글게 만듭니다.
   
• box-shadow: 요소에 그림자를 추가합니다.
   

4. 레이아웃

• display: 요소의 표시 방식을 지정합니다. (예: block, inline, inline-block, flex, grid)
   
• position: 요소의 위치를 지정합니다. (예: static, relative, absolute, fixed, sticky)
   
• flexbox: 플렉스 레이아웃을 사용하여 요소를 정렬 및 분배합니다.
   
• grid: 그리드 레이아웃을 사용하여 요소를 배치합니다.
   
• float: 요소를 좌우로 떠오르게 하여 텍스트와 이미지를 감싸도록 합니다.
   
• clear: float된 요소를 정리합니다.
   

5. 크기

• width: 요소의 너비를 지정합니다.
   
• height: 요소의 높이를 지정합니다.
   
• max-width 및 min-width: 요소의 최대 및 최소 너비를 지정합니다.
   

6. 배경 및 그라디언트

• background: 배경에 색상, 이미지, 그라디언트를 지정할 수 있습니다.
   

7. 전환 및 애니메이션

• transition: 요소의 속성 변경 시 전환 효과를 적용합니다.
   
• animation: 요소에 애니메이션을 적용합니다.
   

8. 반응형 디자인

• 미디어 쿼리 (@media): 화면 크기나 장치에 따라 다른 스타일을 적용할 수 있습니다.

  @media (max-width: 600px) {
      .container {
          flex-direction: column;
      }
  }

이러한 CSS 스타일 속성들은 웹 페이지의 다양한 디자인 요구를 충족시키는 데 필수적입니다. CSS를 잘 활용하면 사용자가 더 편리하고 즐겁게 웹 사이트를 이용할 수 있습니다.