Q) html style에서 .을 사용한 것의 차이는?

.button-container { display: flex; gap: 10px; /* 버튼 간 간격 */ } button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer; border-radius: 4px; font-size: 1em; }

A)

1. 클래스 선택자 (.button-container)

• 사용법: 클래스 이름 앞에 .을 붙여 사용.
• 적용 대상: 특정 HTML 요소 중에서 지정된 클래스 이름을 가진 요소에만 스타일을 적용.
• 예시:

  <div class="button-container">
   <button>Button 1</button>
   <button>Button 2</button> 
  </div> 

  여기서 button-container 클래스가 지정된 <div> 요소에만 스타일이 적용됩니다.
• CSS 정의:

  .button-container {
   display: flex;
   gap: 10px; /* 버튼 간 간격 */ 
  }

2. 태그 선택자 (button)

• 사용법: 태그 이름만을 사용.
• 적용 대상: HTML 문서 내의 모든 해당 태그에 스타일 적용.
• 예시:

  <button>Button 1</button> 
  <button>Button 2</button> 

  여기서 모든 <button> 요소에 스타일이 적용됩니다.
• CSS 정의:

  button {
   padding: 10px 15px;
   background-color: #4CAF50;
   color: white; border:
   none; cursor: pointer;
   border-radius: 4px;
   font-size: 1em; 
  }