minstudio

기본 문법 및 선택자

CSS(Cascading Style Sheets) 기초

HTML이 웹 문서의 뼈대(구조)라면, CSS는 피부와 옷(디자인)입니다.
문서의 구조와 스타일을 분리하기 위해 탄생했으며, 선택자(Selector)를 통해 HTML 요소를 콕 집어내고 속성과 값을 부여하여 시각적인 레이아웃, 색상, 애니메이션 등을 제어합니다. 최신 CSS는 복잡한 전처리기(Sass/SCSS) 없이도 중첩(Nesting)을 네이티브로 지원하여 작성과 유지보수가 훨씬 간결해졌습니다.

1. CSS 기본 문법 구조

CSS는 "누구에게(선택자)", "무엇을(속성)", "어떻게(값)" 적용할지를 정의하는 직관적인 구조를 가집니다.

2. 모던 CSS 선택자(Selector) 및 기능 가이드

HTML 요소를 정확하게 타겟팅하기 위한 주요 선택자와 네이티브 Nesting 기법입니다.

유형	사용 예시	설명
기본 선택자	`div`, `.card`, `#header`	각각 HTML 태그, 클래스 이름(.), 아이디(#)를 통해 요소를 직접 선택합니다.
복합 (결합) 선택자	`ul > li`, `h1 + p`	자식(`>`), 자손(공백), 인접 형제(`+`), 일반 형제(`~`) 관계를 결합해 타겟팅합니다.
상태 가상 클래스	`:hover`, `:focus`	마우스를 올리거나 포커스가 갔을 때 등 특정 '상태'가 된 요소에만 스타일을 적용합니다.
Native Nesting (최신)	`.btn { &:hover { ... } }`	최신 브라우저에서 공식 지원하며, 부모 요소의 스코프 안에서 자식/상태 스타일을 중첩(Nesting)하여 코드를 간결하게 작성합니다. (`&` 기호는 부모 자신을 의미)

3. CSS 명시도 (Specificity) 배점표

"왜 내가 적용한 스타일이 먹히지 않을까?" 동일한 요소에 스타일이 충돌할 경우, 브라우저가 승자를 결정하는 명시도 점수표입니다.

실무 팁: 가급적 ID보다 Class를 활용하세요

ID 선택자(#)는 점수가 압도적으로 높아 나중에 스타일을 덮어쓰기(오버라이드) 매우 어렵습니다. 복잡한 CSS를 유지보수하기 쉽게 만들려면, 재사용이 가능하고 점수가 적당한 클래스(.class) 위주로 스타일을 작성하는 것이 현대적인 CSS 방법론의 핵심입니다. (!important는 절대 피해야 할 최후의 수단입니다.)

<div class="card">
  <h2>Hello CSS!</h2>
  <p>속성과 값을 변경하여 디자인을 바꿔보세요.</p>
</div>

<!-- 인라인 스타일이 내부 스타일을 덮어씁니다! -->
<div class="box" style="background-color: #ef4444;">
  나는 파란색이어야 하지만, 인라인 스타일 때문에 빨간색입니다!
</div>

<!-- ====== CSS 선택자(Selectors)와 네이티브 중첩(Nesting) ====== -->
<div style="margin: 30px 0; border-top: 1px solid #475569;"></div>

<!-- HTML 구조 -->
<div class="card" style="padding:15px; border:1px solid #ccc; border-radius:8px; margin-bottom:15px;">
  <h2>카드 제목 (자식)</h2>
  <div>
    <h2>카드 안의 다른 제목 (자손)</h2>
  </div>
</div>

<h3 class="title">형제 선택자 테스트</h3>
<p>첫 번째 단락 (인접 형제)</p>
<p>두 번째 단락 (일반 형제)</p>
<p>세 번째 단락 (일반 형제)</p>

<div style="margin: 20px 0;">
  <input type="text" placeholder="일반 텍스트" style="padding: 4px;">
  <input type="password" placeholder="비밀번호 입력">
  <br><br>
  <a href="https://google.com">HTTPS 보안 링크</a> | <a href="http://example.com">HTTP 일반 링크</a>
</div>

<div class="article">
  <h4>CSS Nesting 테스트 영역 (마우스를 올려보세요!)</h4>
  <p>이 단락은 article 내부의 p 요소 스타일이 적용되었습니다.</p>
  <div class="highlight">나는 하이라이트 된 자식 요소입니다.</div>
</div>

🔒 localhost:8000/preview