CSS의 기본 스타일링 규칙

CSS 스타일 적용 방법

인라인 스타일 (Inline Style)
- 개별 HTML 요소에 직접 스타일을 지정하는 방식입니다.
- 가장 높은 우선순위를 가집니다.
- HTML 태그에 style 속성을 사용해 정의합니다.
```
<div style="color: red;">인라인 스타일</div>
```
내부 스타일 시트 (Internal Style Sheet)
- HTML 문서 내의 <style> 태그 안에 스타일을 정의하는 방식입니다.
- HTML 문서의 <head> 태그 안에 작성합니다.
```
<style>
  p {
    color: blue;
  }
</style>
```
외부 스타일 시트 (External Style Sheet)
- 스타일 규칙을 별도의 CSS 파일로 작성하고, 이를 HTML 문서에서 <link> 태그를 사용해 연결하는 방식입니다.
- 재사용성이 높고 여러 페이지에서 같은 스타일을 적용할 수 있습니다.
```
<link rel="stylesheet" href="styles.css">
```

전체 선택자 (*)
- 모든 HTML 요소에 스타일을 적용합니다.
```
* {
  margin: 0;
  padding: 0;
}
```
타입 선택자 (Type Selector)
- 특정 HTML 태그(요소)를 선택하여 스타일을 적용합니다.
```
p {
  color: green;
}
```
ID 선택자
- ID 속성을 가진 특정 요소에 스타일을 적용합니다.
- 한 문서 내에서 하나의 고유 요소에만 사용해야 합니다.
```
#header {
  background-color: yellow;
}
```
클래스 선택자
- 클래스 속성을 가진 여러 요소에 동일한 스타일을 적용할 수 있습니다.
- 한 문서 내에서 여러 번 재사용 가능합니다.
```
.button {
  background-color: blue;
  color: white;
}
```

ID 선택자 (#아이디명):
- 고유한 요소에만 적용합니다.
- 한 문서에서 중복해서 사용할 수 없습니다.
- 우선순위가 클래스보다 높습니다.
클래스 선택자 (.클래스명):
- 여러 요소에 적용할 수 있으며, 한 문서에서 재사용이 가능합니다.
- ID 선택자보다 우선순위가 낮습니다.

CSS에서는 같은 요소에 여러 스타일이 적용될 경우 우선순위가 적용됩니다. 우선순위가 높은 스타일이 적용됩니다.

!important (권장되지 않음)
- 모든 스타일보다 가장 높은 우선순위를 가집니다.
```
p {
  color: red !important;
}
```
인라인 스타일: HTML 태그의 style 속성에 직접 작성된 스타일.
```
<p style="color: blue;">인라인 스타일</p>
```
ID 선택자 스타일: 특정 ID를 대상으로 한 스타일.
```
#element {
  color: green;
}
```
클래스 선택자 스타일: 특정 클래스에 적용되는 스타일.
```
.class-name {
  color: yellow;
}
```
타입(태그) 선택자 스타일: HTML 요소 자체에 적용되는 스타일.
```
p {
  color: purple;
}
```

상속되는 속성: 일부 스타일 속성은 부모 요소로부터 자식 요소에게 자동으로 상속됩니다. 예를 들어:
- 글자색 (color): 자식 요소가 따로 정의하지 않으면 부모 요소의 색상을 상속받습니다.
상속되지 않는 속성: 일부 속성은 상속되지 않습니다. 예를 들어:
- 배경색 (background-color): 상속되지 않으며, 자식 요소가 따로 지정하지 않으면 기본값이 적용됩니다.

스타일 적용 방법: 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트를 사용할 수 있으며, 외부 스타일 시트가 가장 재사용성이 높습니다.
선택자 종류: 전체 선택자, 타입 선택자, ID 선택자, 클래스 선택자를 사용할 수 있으며, ID는 고유한 요소에, 클래스는 여러 요소에 재사용 가능합니다.
우선순위: !important가 가장 높은 우선순위를 가지며, 인라인 스타일 → ID 선택자 → 클래스 선택자 → 태그 선택자 순으로 적용됩니다.
상속: 일부 속성은 상속되지만, 배경색 등은 상속되지 않습니다.

플렉스 박스(Flexbox) 레이아웃 (0)	2024.10.03
반응형 웹 디자인 (Responsive Web Design) 정리 (0)	2024.10.03
배경 이미지와 색상 처리: CSS 속성 정리 및 활용법 (1)	2024.10.03
웹 페이지 레이아웃 정리: 박스 모델, 마진, 패딩, 위치 속성 활용 (1)	2024.10.03
폰트, 텍스트 스타일링 및 목록과 표 스타일 (0)	2024.10.02