CSS 기초 정리

CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 지정하기 위해 사용되는 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴 및 기타 시각적 요소를 제어할 수 있습니다.

1. CSS의 기본 구조

CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언 블록은 적용할 스타일 속성과 값을 포함합니다.

선택자 {
    속성: 값;
}

예시

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

2. CSS 선택자 상세 정리

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자의 종류와 사용법을 자세히 살펴보겠습니다.

2.1 기본 선택자

• 요소 선택자 (Type Selector): 특정 HTML 요소를 선택합니다.

  h1 {
      color: blue;
  }

• 클래스 선택자 (Class Selector): 특정 클래스를 가진 요소를 선택합니다. 클래스 이름 앞에 점(.)을 붙입니다.

  .button {
      background-color: green;
  }

• 아이디 선택자 (ID Selector): 특정 아이디를 가진 요소를 선택합니다. 아이디 이름 앞에 해시(#)를 붙입니다.

  #header {
      font-size: 24px;
  }

2.2 그룹 선택자

여러 선택자를 한 번에 지정할 수 있습니다. 쉼표로 구분합니다.

h1, h2, h3 {
    color: purple;
}

2.3 자식 선택자

특정 요소의 직계 자식을 선택합니다. > 기호를 사용합니다.

ul > li {
    list-style-type: none;
}

2.4 후손 선택자

특정 요소의 모든 후손을 선택합니다. 공백을 사용합니다.

div p {
    color: red;
}

2.5 형제 선택자

• 일반 형제 선택자 (General Sibling Selector): 같은 부모를 가진 모든 형제를 선택합니다. ~ 기호를 사용합니다.

  h1 ~ p {
      color: gray;
  }

• 인접 형제 선택자 (Adjacent Sibling Selector): 바로 다음 형제 요소를 선택합니다. + 기호를 사용합니다.

  h1 + p {
      margin-top: 0;
  }

2.6 속성 선택자

특정 속성을 가진 요소를 선택합니다.

• 특정 속성이 있는 요소:

  a[href] {
      color: blue;
  }

• 특정 속성 값이 있는 요소:

  input[type="text"] {
      border: 1px solid black;
  }

2.7 가상 클래스 선택자

특정 상태의 요소를 선택합니다.

• 호버 (Hover): 마우스가 올라갔을 때

  a:hover {
      text-decoration: underline;
  }

• 포커스 (Focus): 요소가 포커스 되었을 때

  input:focus {
      border-color: blue;
  }

• 첫 번째 자식 (First Child): 첫 번째 자식을 선택합니다.

  li:first-child {
      font-weight: bold;
  }

2.8 가상 요소 선택자

특정 요소의 일부를 선택합니다.

• 첫 번째 줄 (First Line): 요소의 첫 번째 줄을 선택합니다.

  p::first-line {
      font-weight: bold;
  }

• 첫 번째 문자 (First Letter): 요소의 첫 번째 문자를 선택합니다.

  p::first-letter {
      font-size: 2em;
  }

2.9 복합 선택자

여러 선택자를 조합하여 더 구체적인 선택을 할 수 있습니다.

• 클래스와 요소 결합:

  div.myClass {
      background-color: yellow;
  }

• 아이디와 클래스 결합:

  #header .nav {
      color: white;
  }

3. 선택자의 우선 순위

CSS 선택자는 특정 요소에 스타일을 적용할 때 우선 순위를 가집니다. 일반적으로 우선 순위는 다음과 같습니다:

1. 인라인 스타일 (HTML 요소 내에서 직접 정의)
2. ID 선택자
3. 클래스 선택자, 속성 선택자, 가상 클래스
4. 요소 선택자, 가상 요소
5. 일반 선택자

우선 순위를 이해하고 사용하면 CSS를 더 효과적으로 관리할 수 있습니다.

4. CSS 속성

CSS에는 다양한 속성이 있으며, 그 중 일부는 다음과 같습니다.

4.1 색상 관련 속성

• color: 텍스트 색상
• background-color: 배경 색상

4.2 텍스트 관련 속성

• font-size: 글꼴 크기
• font-weight: 글꼴 두께
• text-align: 텍스트 정렬

4.3 박스 모델 관련 속성

• margin: 요소의 외부 여백
• padding: 요소의 내부 여백
• border: 요소의 테두리

5. 레이아웃 방법

CSS를 사용하여 웹 페이지의 레이아웃을 구성하는 방법에는 여러 가지가 있습니다.

5.1 플렉스박스(Flexbox)

플렉스박스는 1차원 레이아웃을 쉽게 만들 수 있도록 도와줍니다.

.container {
    display: flex;
    justify-content: space-between;
}

5.2 그리드 레이아웃(Grid)

그리드 레이아웃은 2차원 레이아웃을 만들기 위한 강력한 도구입니다.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

6. 미디어 쿼리

미디어 쿼리는 다양한 화면 크기와 장치에 맞게 스타일을 조정할 수 있도록 해줍니다.

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

7. 마무리

CSS는 웹 페이지의 디자인과 레이아웃을 정의하는 데 필수적인 도구입니다. 이 포스트에서는 CSS의 기본 개념과 주요 기능을 살펴보았습니다. 더 깊이 있는 학습을 위해 공식 문서나 다양한 튜토리얼을 참고하시기 바랍니다.

참고 자료

• MDN Web Docs: CSS
• W3Schools: CSS Tutorial