214 lines
5.9 KiB
Markdown
214 lines
5.9 KiB
Markdown
# CSS
|
|
|
|
CSS( Cascading Style Sheets)는 웹 문서의 스타일을 정의하는 언어야. 즉, HTML로 구조를 만든 웹페이지에 색상, 레이아웃, 애니메이션 등의 디자인 요소를 적용하는 역할을 해. 간단히 말하면, HTML이 집의 뼈대를 만든다면 CSS는 그 집을 꾸미는 페인트, 가구, 조명 같은 거야.
|
|
|
|
## HTML과 CSS의 관계
|
|
HTML과 CSS는 떼려야 뗄 수 없는 관계야. HTML은 웹페이지의 기본 구조(텍스트, 이미지, 버튼 등)를 정의하고, CSS는 그 구조를 보기 좋게 스타일링해.
|
|
|
|
```html
|
|
<p>안녕하세요, 저는 CSS를 배우고 있습니다!</p>
|
|
```
|
|
```css
|
|
p {
|
|
color: blue;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
```
|
|
위의 CSS를 적용하면, <p> 태그의 글씨가 파란색, 크기는 20px, 굵게 표시돼.
|
|
|
|
## HTML과 CSS의 연결 방법
|
|
CSS는 세 가지 방법으로 HTML에 적용할 수 있어.
|
|
|
|
1. 인라인 스타일 (HTML 요소에 직접 작성)
|
|
|
|
HTML 태그 안에 직접 style 속성을 사용해 적용.
|
|
|
|
```html
|
|
<p style="color: red;">이 문장은 빨간색입니다.</p>
|
|
```
|
|
|
|
2. 내부 스타일 시트 (`<style>` 태그 사용)
|
|
|
|
HTML 문서의 `<style>` 태그 안에 스타일을 작성.
|
|
|
|
```html
|
|
<style>
|
|
p {
|
|
color: red;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
3. 외부 스타일 시트 (.css 파일 생성 후 연결)
|
|
|
|
별도의 .css 파일을 만들어 연결.
|
|
|
|
```css
|
|
/* style.css 파일 */
|
|
p {
|
|
color: red;
|
|
}
|
|
```
|
|
```html
|
|
<link rel="stylesheet" href="style.css">
|
|
```
|
|
|
|
외부 스타일 시트를 사용하면 여러 페이지에 동일한 스타일을 적용할 수 있어, 유지보수가 훨씬 쉬워져!
|
|
|
|
## CSS의 발전 과정
|
|
1. CSS1 (1996년)
|
|
|
|
* 최초의 CSS 버전으로, 글꼴과 색상을 변경하는 기본 기능만 포함되어 있었어.
|
|
|
|
2. CSS2 (1998년)
|
|
|
|
* 포지셔닝(position), Z-Index, 미디어 타입 등의 개념이 추가됨.
|
|
* 기존보다 더 정교한 스타일링 가능.
|
|
|
|
3. CSS2.1 (2004년)
|
|
|
|
* CSS2의 문제점을 수정하고 안정화한 버전.
|
|
* 웹 표준 준수를 위한 업데이트.
|
|
|
|
4. CSS3 (2011년 ~ 현재)
|
|
|
|
* 기존 CSS를 여러 개의 모듈로 나누어 개별적으로 발전 가능하도록 변경.
|
|
* 주요 추가 기능:
|
|
- 애니메이션(@keyframes)
|
|
- 트랜지션(transition)
|
|
- 그라디언트(linear-gradient)
|
|
- 플렉스박스(Flexbox), 그리드(Grid)
|
|
- 미디어 쿼리(반응형 디자인)
|
|
- CSS 변수 (--main-color)
|
|
|
|
CSS3 이후, 계속해서 새로운 기능들이 추가되면서 웹 디자인의 가능성이 더욱 확장되고 있어!
|
|
|
|
## CSS 기본 문법
|
|
CSS의 기본 문법은 `선택자(selector) + 속성(property) + 값(value)` 의 조합으로 이루어져 있어.
|
|
```css
|
|
선택자 {
|
|
속성: 값;
|
|
}
|
|
```
|
|
```css
|
|
p {
|
|
color: blue;
|
|
font-size: 20px;
|
|
}
|
|
```
|
|
위 코드는 `<p>` 태그를 선택해서 글자 색상을 파란색, 크기를 20px로 지정하는 스타일이야.
|
|
|
|
## CSS 주석
|
|
코드에 설명을 추가하고 싶을 때 `/* 주석 내용 */` 형식으로 작성해.
|
|
```css
|
|
/* 제목을 빨간색으로 변경 */
|
|
h1 {
|
|
color: red;
|
|
}
|
|
```
|
|
주석은 브라우저에서 해석되지 않으며 코드 가독성을 높이는 역할을 해.
|
|
|
|
## CSS의 상속(Inheritance)
|
|
|
|
CSS에서는 일부 속성이 부모 요소에서 자식 요소로 자동으로 전달(상속) 돼.
|
|
예를 들어, 문서의 기본 글꼴을 `<body>` 태그에서 지정하면, 그 안에 있는 모든 텍스트 요소들이 그 글꼴을 사용하게 돼.
|
|
|
|
### 상속되는 속성
|
|
주로 텍스트와 관련된 속성들이 상속돼. 예를 들어, color, font, visibility, cursor 등.
|
|
|
|
```css
|
|
body {
|
|
color: blue;
|
|
}
|
|
```
|
|
```html
|
|
<body>
|
|
<p>이 글자는 자동으로 파란색이 됩니다.</p>
|
|
</body>
|
|
```
|
|
`<p>` 태그에 color를 명시적으로 지정하지 않아도 부모인 `<body>`에서 설정한 파란색이 적용돼.
|
|
|
|
### 상속되지 않는 속성
|
|
박스 모델이나 레이아웃 관련 속성들은 기본적으로 상속되지 않아. 예를 들어, width, height, margin, padding, border, background, display, position 등.
|
|
|
|
```css
|
|
body {
|
|
background-color: yellow;
|
|
}
|
|
```
|
|
```html
|
|
<body>
|
|
<p>이 배경은 노란색이 아닙니다.</p>
|
|
</body>
|
|
```
|
|
<p> 태그는 부모인 <body>의 background-color를 상속받지 않음.
|
|
|
|
### 강제 상속 방법
|
|
상속되지 않는 속성을 강제로 상속하려면 inherit 키워드를 사용하면 돼.
|
|
```css
|
|
p {
|
|
background-color: inherit;
|
|
}
|
|
```
|
|
이렇게 하면 부모 요소의 배경색을 자식 요소도 따라가게 돼.
|
|
|
|
## CSS의 우선순위(Specificity)
|
|
웹페이지에 여러 개의 CSS 규칙이 적용될 때, 어떤 스타일이 우선 적용될지를 결정하는 게 우선순위야.
|
|
우선순위는 다음과 같이 계산돼.
|
|
|
|
### 우선순위 규칙
|
|
1. 인라인 스타일
|
|
2. ID 선택자
|
|
3. 클래스, 속성, 의사 클래스
|
|
4. 태그 선택자
|
|
5. 전체 선택자 *
|
|
|
|
```css
|
|
p {
|
|
color: blue; /* 점수: 1 */
|
|
}
|
|
|
|
.highlight {
|
|
color: green; /* 점수: 10 */
|
|
}
|
|
|
|
#special {
|
|
color: red; /* 점수: 100 */
|
|
}
|
|
```
|
|
```html
|
|
<p id="special" class="highlight">이 문장은 무슨 색일까?</p>
|
|
```
|
|
`#special`의 점수가 가장 높으므로 **빨간색(red)**으로 적용됨.
|
|
|
|
### !important 사용
|
|
CSS에서는 **!important**를 사용하면 무조건 우선순위가 최상위가 돼.
|
|
```css
|
|
p {
|
|
color: blue !important;
|
|
}
|
|
```
|
|
이렇게 하면 어떤 선택자보다도 color: blue가 적용됨.
|
|
하지만 너무 많이 사용하면 유지보수가 어려워지니 필요할 때만 쓰는 게 좋아!
|
|
|
|
---
|
|
|
|
|
|
5. CSS 실전 예제
|
|
네비게이션 바 스타일링
|
|
카드 UI 디자인
|
|
반응형 웹사이트 만들기
|
|
다크 모드 구현
|
|
CSS 애니메이션 활용
|
|
|
|
6. 최적화 및 모범 사례
|
|
CSS 성능 최적화
|
|
유지보수하기 쉬운 CSS 작성법
|
|
BEM (Block, Element, Modifier) 방법론
|
|
SCSS/SASS 개요
|
|
|
|
7. 부록
|
|
CSS 주요 속성 및 값 요약표
|
|
크로스 브라우징 이슈 해결
|
|
유용한 CSS 리소스 및 도구 |