CSS

주요 선택자

• 전체 선택자 (*)
  문서 내 모든 요소에 스타일을 적용할 때 사용된다. 예: 초기화 스타일링 ```css
  • { margin: 0; padding: 0; } ```
• 태그 선택자 (p, div, ul 등)
  특정 HTML 태그를 선택한다.

    p {
        font-size: 16px;
    }
  

• 클래스 선택자 (.classname)
  여러 요소에 공통된 스타일을 적용할 수 있다.

    .highlight {
        background-color: yellow;
    }
  

• ID 선택자 (#idname)
  문서 내 고유한 하나의 요소를 선택할 때 사용된다.

    #main-title {
        font-weight: bold;
    }
  

• 그룹 선택자 (A, B)
  여러 요소에 동일한 스타일을 적용할 때 유용하다.

    h1, h2, h3 {
        margin-bottom: 0.5rem;
    }
  

CSS 박스 모델

CSS에서 모든 요소는 하나의 사각형 박스로 간주된다. 이 구조를 이해하면 margin, padding 충돌이나 레이아웃 문제가 명확해진다.

구성 요소

1. Content : 콘텐츠가 실제로 표시되는 영역 (텍스트, 이미지 등)
2. Padding : 콘텐츠와 테두리 사이의 공간
3. Border : 테두리 영역
4. Margin : 요소 간의 바깥 여백

블록 레벨 요소

• 태그를 사용해 컨텐츠를 추가했을 때 한 줄을 통째로 차지하는 요소
• 양 옆으로 다른 요소가 올 수 없다
• 너비, 마진, 패딩 등을 이용하여 크기나 위치 지정 가능
• ex) div, p, hn, ul, ol, form, table, fieldset, address

인라인 레벨 요소

• 화면에 표시되는 컨텐츠만큼만 차지하고 한 줄을 차지하지 않는 요소
• 여러 개의 인라인 레벨 표현 가능
• ex) img, strong, br, sub, span, input, textarea, label, button

display 속성

• block : 해당 요소를 블록 레벨로 지정
• inline : 블록 레벨 요소를 인라인 레벨로 변경
• inline-block : 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성 지정
• none : 해당 요소를 화면에 전혀 표시하지 않음

CSS3 연결 선택자

• 인접 형제 선택자
• 형제 선택자
• 속성 선택자