CSS 기본 구문

3.1 규칙 (Rules)

CSS의 기본 요소는 규칙 (rules), 속성 (properties) 및 값 (values)을 포함해. CSS의 기본 구문을 이해하는 것은 멋지고 기능적인 웹 페이지를 만드는 열쇠야.

CSS의 주요 요소들:

• 규칙 (Rules)
• 선택자 (Selectors)
• 속성 (Properties)
• 값 (Values)

규칙 (Rules)

CSS 규칙은 선택자와 선언 블록으로 구성돼. 선택자는 스타일이 적용될 HTML 요소를 지정하고, 선언 블록은 하나 이상의 속성과 그 값을 포함해. 보통 한 쌍 이상의 속성과 값을 중괄호 {} 안에 넣어.

예시:

    
      선택자 {
        속성: 값;
        속성: 값;
      }
    
  

헤더에 대한 예시:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

이 예시에서 h1은 선택자, color와 font-size는 속성, 그리고 blue와 24px는 이 속성들의 값이야.

3.2 속성과 값

CSS는 요소의 외관을 제어하기 위해 사용할 수 있는 다양한 속성을 제공해. 각 속성에는 이 속성이 어떻게 적용될지를 결정하는 하나 이상의 값이 있어.

주요 속성과 그 값들:

색상과 배경:

• color: 텍스트의 색상을 설정해
• background-color: 요소의 배경색을 설정해

예시:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

폰트:

• font-family: 폰트 패밀리 설정
• font-size: 폰트 크기를 설정해
• font-weight: 폰트의 굵기를 설정해

예시:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

텍스트:

• text-align: 요소 내부의 텍스트를 정렬해
• text-decoration: 텍스트에 밑줄 같은 효과를 추가해

예시:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

여백과 경계:

• margin: 요소 주변의 외부 여백을 설정해
• padding: 요소 내부의 여백을 설정해
• border: 요소의 경계를 설정해

예시:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

크기와 위치:

• width와 height: 요소의 폭과 높이를 설정해
• position: 요소의 위치 설정 방식을 정의해

예시:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

너에게 필요한 것은:

• 요소의 기본 속성을 기억해
• 이 속성들의 표준 값을 기억해
• 다양한 요소의 고유 속성을 기억해
• 이 속성들이 실제로 어떻게 작동하는지를 기억해
• 이 속성들이 서로 어떻게 영향을 미치는지를 기억해.

이런 것은 많이 실습하면서 CSS를 작성해보고 어떻게 작동하는지 보는 게 최선이야.