1. CSS란 무엇인가

Tasker_Jang·2024년 2월 26일

0

CSS(Cascading Style Sheet)

CSS는 HTML이나 XML과 같은 마크업 언어로 작성된 문서의 표현을 정의하기 위한 스타일 시트 언어입니다. 다양한 선택자와 속성을 활용하여 웹 문서의 디자인과 레이아웃을 정교하게 제어할 수 있습니다.

CSS 적용 방법

인라인 스타일링:
- HTML 태그 내에서 style 속성을 사용하여 직접 스타일을 지정합니다.
- 이 방법은 빠르게 스타일을 적용할 수 있지만 유지보수가 어려울 수 있습니다.
```
<p style="color: red; font-size: 16px;">이 문장은 빨간색으로 표시됩니다.</p>
```
내부 스타일 시트:
- <style> 태그 내에 CSS 코드를 작성하여 해당 문서에만 스타일을 적용합니다.
- HTML 문서 내에 <head> 태그 안에 작성합니다.
```
<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>
```
외부 스타일 시트:
- 별도의 CSS 파일을 작성하여 HTML 파일에 연결합니다.
- <link> 태그를 사용하여 외부 스타일 시트를 HTML 문서에 포함시킬 수 있습니다.
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```

CSS 선택자

CSS 선택자를 사용하여 특정 HTML 요소를 선택하여 스타일을 적용할 수 있습니다. 몇 가지 일반적인 선택자 유형은 다음과 같습니다:

전체 선택자 (*): 모든 HTML 요소를 선택합니다.
요소 선택자: 특정 HTML 요소를 선택합니다.
클래스 선택자 (.classname): 특정 클래스를 가진 HTML 요소를 선택합니다.
아이디 선택자 (#idname): 특정 아이디를 가진 HTML 요소를 선택합니다.
속성 선택자 ([attribute]): 특정 속성을 가진 HTML 요소를 선택합니다.

CSS 명시도

CSS 명시도는 CSS 규칙이 충돌할 때 어떤 스타일이 우선시되는지를 결정하는 규칙입니다. 일반적인 명시도 순서는 다음과 같습니다:

인라인 스타일링 > 2. 아이디 선택자 > 3. 클래스, 의사, 속성 선택자 > 4. 태그 선택자 > 5. 전체 선택자 (*)

결합 선택자

결합 선택자는 두 개 이상의 선택자를 결합하여 더 복잡한 선택 규칙을 만들 수 있습니다. 일반적인 결합 선택자의 예는 다음과 같습니다:

인접 형제 선택자 (+): 특정 요소의 바로 인접한 형제 요소를 선택합니다.
일반 형제 선택자 (~): 특정 요소의 모든 형제 요소를 선택합니다.
자식 선택자 (>): 특정 요소의 자식 요소를 선택합니다.
자손 선택자: 공백: 특정 요소의 하위 요소를 선택합니다.

CSS를 이용하면 웹 페이지를 더욱 눈에 띄게 디자인하고 레이아웃을 효과적으로 구성할 수 있습니다.

터널을 지나고 있을 뿐, 길은 여전히 열려 있다.

이전 포스트

06_클래스

다음 포스트

1. CSS란 무엇인가

0개의 댓글