강 2: 선택자와 속성

이 강의에서는 CSS의 구성 요소인 선택기와 속성에 대해 자세히 알아봅니다. 이는 웹페이지의 특정 요소를 타겟팅하고 효과적으로 스타일을 지정할 수 있는 필수 개념입니다.

CSS 선택기란 무엇입니까?

CSS 선택기는 스타일을 지정하려는 HTML 요소를 선택하는 데 사용되는 패턴입니다. 다양한 유형의 선택기를 사용하면 태그, 클래스, ID, 속성 등에 따라 다양한 요소에 스타일을 적용할 수 있습니다.

선택기 유형

1. 요소(유형) 선택기:

   • 특정 유형의 모든 요소를 ​​대상으로 합니다.
   • 예:

    p {
      color: green;
    }
   

   이렇게 하면 모든

   요소의 색상이 녹색으로 변경됩니다.

2. 클래스 선택기:

   • 특정 클래스 속성을 가진 요소를 대상으로 합니다.
   • 예:

    .highlight {
      background-color: yellow;
    }
   

   HTML에서 class="highlight"가 있는 모든 요소는 노란색 배경을 갖습니다.
   

    
   This is highlighted text.
   

3. ID 선택기:

   • 고유한 ID 속성을 가진 단일 요소를 타겟팅합니다.
   • 예:

    #header {
      font-size: 24px;
    }
   

   id="header"인 요소만 글꼴 크기가 24px입니다.
   

    
   Welcome to My Website
   

4. 그룹 선택기:

   • 여러 선택기에 동일한 스타일을 적용합니다.
   • 예:

    h1, h2, h3 {
      color: blue;
    }
   

   이 규칙은 모든

   ,

   및

   요소를 파란색으로 만듭니다.

5. 하위 항목 선택기:

   • 다른 요소 내부(그 하위 요소)에 있는 요소를 대상으로 합니다.
   • 예:

    div p {
      font-style: italic;
    }
   

   이렇게 하면

   내부의 모든

   요소가 이탤릭체로 표시됩니다.
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   CSS 속성 이해

   CSS 속성은 스타일을 지정하려는 선택한 요소의 측면을 정의합니다. 각 속성 뒤에는 원하는 결과를 지정하는 값이 옵니다.

   속성 예:

   • 색상:

     • 텍스트 색상을 설정합니다.
     • 예:

     h1 {
       color: red;
     }
     

   • 배경색상:

     • 배경색상을 설정합니다.
     • 예:

     body {
       background-color: #f0f0f0;
     }
     

   • 글꼴 크기:

     • 텍스트의 크기를 설정합니다.
     • 예:

     p {
       font-size: 16px;
     }
     

   • 여유:

     • 요소 외부의 공간을 설정합니다.
     • 예:

     .box {
       margin: 20px;
     }
     

   • 심:

     • 요소 내부, 콘텐츠와 테두리 사이의 공간을 설정합니다.
     • 예:

     .content {
       padding: 10px;
     }
     

   실용적인 예:

   지금까지 배운 내용을 간단한 예와 결합해 보겠습니다.

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   CSS:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   이 예에서는:

   • #container div는 검은색 테두리와 패딩으로 스타일이 지정되었습니다.

   • 제목은 보라색으로 표시됩니다.

   • 수업 소개가 포함된 단락의 배경은 연한 파란색이고 글꼴 크기가 더 큽니다.

   • 및

     요소 모두 Arial 글꼴을 사용합니다.

   • #container 내부의 모든 단락에는 간격을 위한 하단 여백이 있습니다.

   연습 연습

   1. 제목, 단락, div가 포함된 간단한 HTML 파일을 만듭니다.
   2. 다양한 선택기와 속성을 실험하여 콘텐츠 스타일을 지정하세요.
   3. 하위 항목 선택기를 사용하여 중첩된 요소의 스타일을 지정해 보세요.
   4. 그룹 선택기를 사용하여 여러 요소에 동일한 스타일을 적용하세요.

   ---

   다음: 다음 강의에서는 CSS 박스 모델을 살펴보고 여백, 테두리, 패딩 및 콘텐츠가 함께 결합되어 레이아웃을 정의하는 방법을 알아봅니다. 웹 요소. 거기서 봐요!

   나를 따라오세요 -

   LinkedIn- 리도이 하산

   -