2025-01-30T01:41:18
This commit is contained in:
10
app.sh
Executable file
10
app.sh
Executable file
@@ -0,0 +1,10 @@
|
||||
#! /usr/bin/env bash
|
||||
|
||||
case $1 in
|
||||
gitup)
|
||||
echo "Pushing to git"
|
||||
git add -A
|
||||
git commit -m $(date "+%Y-%m-%dT%H:%M:%S")
|
||||
git push origin
|
||||
;;
|
||||
esac
|
||||
214
docs/00_css.md
Normal file
214
docs/00_css.md
Normal file
@@ -0,0 +1,214 @@
|
||||
# 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 리소스 및 도구
|
||||
204
docs/01_선택자.md
Normal file
204
docs/01_선택자.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# 선택자
|
||||
|
||||
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼.
|
||||
선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져!
|
||||
|
||||
## 기본 선택자 (Basic Selectors)
|
||||
|
||||
### 전체 선택자 (`*`)
|
||||
* 문서의 모든 요소를 선택
|
||||
* 초기화 스타일을 적용할 때 유용
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
### 요소 선택자 (`tagname`)
|
||||
* 특정 HTML 태그에 스타일 적용
|
||||
```css
|
||||
p { /* 모든 <p> 태그에 적용됨 */
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
}
|
||||
```
|
||||
|
||||
### 클래스 선택자 (`.classname`)
|
||||
* 특정 클래스를 가진 요소 선택
|
||||
```css
|
||||
.button { /* <button class="button">Click Me</button>에 적용됨 */
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
### 아이디 선택자 (`#idname`)
|
||||
* 특정 ID를 가진 요소 선택
|
||||
* ID는 문서 내에서 고유해야 함!
|
||||
```css
|
||||
#header { /* <div id="header"> 요소에 적용됨 */
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
## 그룹 / 결합 선택자 (Grouping & Combinators)
|
||||
|
||||
### 그룹 선택자 (`A, B, C`)
|
||||
* 여러 요소에 같은 스타일 적용
|
||||
```css
|
||||
h1, h2, h3 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### 자식 선택자 (`A > B`)
|
||||
* 직접적인 자식 요소만 선택
|
||||
```css
|
||||
div > p { /* <div>의 직계 자식 <p>만 스타일 적용됨 */
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### 후손 선택자 (`A B`)
|
||||
* 자식 + 손자 + 그 이하 모든 후손 요소 선택
|
||||
```css
|
||||
div p { /* <div> 안에 있는 모든 <p> 요소에 적용 */
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
### 인접 형제 선택자 (`A + B`)
|
||||
* 특정 요소 바로 다음에 오는 형제 요소 하나 선택
|
||||
```css
|
||||
h1 + p { /* <h1> 다음에 나오는 첫 번째 <p>만 적용됨 */
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
### 일반 형제 선택자 (`A ~ B`)
|
||||
* 특정 요소 뒤에 나오는 모든 형제 요소 선택
|
||||
```css
|
||||
h1 ~ p { /* <h1> 뒤에 나오는 모든 <p>에 적용됨 */
|
||||
font-style: italic;
|
||||
}
|
||||
```
|
||||
|
||||
## 속성 선택자 (Attribute Selectors)
|
||||
|
||||
### 특정 속성이 있는 요소 선택 (`[attr]`)
|
||||
```css
|
||||
input[required] { /* <input required> 필드에 빨간 테두리 적용 */
|
||||
border: 2px solid red;
|
||||
}
|
||||
```
|
||||
|
||||
### 특정 값과 일치하는 속성 선택 (`[attr="value"]`)
|
||||
```css
|
||||
input[type="password"] { /* <input type="password"> 필드 배경색 변경 */
|
||||
background-color: lightgray;
|
||||
}
|
||||
```
|
||||
|
||||
### 특정 값으로 시작하는 속성 선택 (`[attr^="value"]`)
|
||||
```css
|
||||
a[href^="https"] { /* href가 "https"로 시작하는 모든 링크 선택 */
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
### 특정 값으로 끝나는 속성 선택 (`[attr$="value"]`)
|
||||
```css
|
||||
img[src$=".jpg"] { /* .jpg로 끝나는 이미지에 둥근 테두리 적용 */
|
||||
border-radius: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
### 특정 값이 포함된 속성 선택 (`[attr*="value"]`)
|
||||
```css
|
||||
div[class*="box"] { /* class에 "box"가 포함된 모든 <div>에 적용됨 */
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
## 가상 클래스 (Pseudo-classes)
|
||||
|
||||
### 링크 상태에 따라 스타일 적용
|
||||
```css
|
||||
a:link { color: blue; } /* 방문하지 않은 링크 */
|
||||
a:visited { color: purple; } /* 방문한 링크 */
|
||||
a:hover { color: red; } /* 마우스 올릴 때 */
|
||||
a:active { color: orange; } /* 클릭 중 */
|
||||
```
|
||||
|
||||
### `:first-child` / `:last-child`
|
||||
부모 요소의 첫 번째/마지막 자식 요소에 적용
|
||||
```css
|
||||
p:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
p:last-child {
|
||||
color: gray;
|
||||
}
|
||||
```
|
||||
|
||||
### `:nth-child(n)`
|
||||
```css
|
||||
li:nth-child(odd) { background: lightgray; }
|
||||
li:nth-child(3) { color: red; }
|
||||
/* 홀수 번째 li는 회색, 세 번째 li는 빨강 */
|
||||
```
|
||||
|
||||
### `:not(selector)` (특정 요소 제외)
|
||||
```css
|
||||
button:not(.disabled) {
|
||||
background-color: green;
|
||||
}
|
||||
/* .disabled 클래스를 제외한 모든 <button>에 적용 */
|
||||
```
|
||||
|
||||
## 가상 요소 (Pseudo-elements)
|
||||
|
||||
### `::before` / `::after` (가상 요소 추가)
|
||||
```css
|
||||
p::before {
|
||||
content: "🔥 ";
|
||||
}
|
||||
p::after {
|
||||
content: " ✅";
|
||||
}
|
||||
/* <p> 태그 앞뒤에 가상 요소 추가 */
|
||||
```
|
||||
|
||||
### `::first-letter` / `::first-line`
|
||||
```css
|
||||
p::first-letter {
|
||||
font-size: 2em;
|
||||
color: red;
|
||||
}
|
||||
|
||||
p::first-line {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 첫 글자는 크게, 첫 줄은 굵게 */
|
||||
```
|
||||
|
||||
## 고급 선택자 (Advanced Selectors)
|
||||
|
||||
### `:focus-within` (자식 요소가 포커스를 가질 때)
|
||||
```css
|
||||
form:focus-within { /* 폼 내부 요소가 포커스를 받으면 배경색 변경 */
|
||||
background: lightyellow;
|
||||
}
|
||||
```
|
||||
|
||||
### `:has(selector)` (부모 요소 선택)
|
||||
```css
|
||||
article:has(img) { /* <img>가 포함된 <article>에 테두리 추가 */
|
||||
border: 2px solid blue;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
139
docs/02_단위.md
Normal file
139
docs/02_단위.md
Normal file
@@ -0,0 +1,139 @@
|
||||
# 단위와 크기
|
||||
|
||||
CSS에서 크기를 지정할 때는 다양한 **단위(unit)**를 사용할 수 있어.
|
||||
단위에 따라 요소의 크기, 여백, 글자 크기 등을 다르게 설정할 수 있어!
|
||||
|
||||
CSS 단위는 크게 절대 단위와 상대 단위로 나뉘어.
|
||||
|
||||
* 절대 단위
|
||||
- px, cm, mm, in, pt, pc
|
||||
* 상대 단위
|
||||
- %, em, rem, vw, vh, vmin, vmax, ex, ch
|
||||
|
||||
## 절대 단위 (Absolute Units)
|
||||
절대 단위는 특정한 물리적 크기를 기준으로 설정돼.
|
||||
웹에서는 주로 px을 많이 사용해.
|
||||
|
||||
### px (픽셀)
|
||||
* 가장 많이 쓰이는 단위
|
||||
* 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함
|
||||
* 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함
|
||||
```css
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
```
|
||||
> 일반적으로 웹 브라우저의 기본 글자 크기는 16px이야.
|
||||
|
||||
### cm, mm, in, pt, pc
|
||||
* 인쇄용 디자인에서 주로 사용
|
||||
* 웹에서는 거의 사용되지 않음
|
||||
|
||||
```css
|
||||
div {
|
||||
width: 10cm;
|
||||
height: 2in;
|
||||
}
|
||||
```
|
||||
|
||||
* cm : 센티미터 (1cm = 10mm)
|
||||
* mm : 밀리미터
|
||||
* in : 인치 (1in = 2.54cm)
|
||||
* pt : 포인트 (1pt = 1/72인치)
|
||||
* pc : 파이카 (1pc = 12pt)
|
||||
|
||||
## 상대 단위 (Relative Units)
|
||||
상대 단위는 요소의 부모 요소나 화면 크기에 따라 유동적으로 변하는 단위야.
|
||||
반응형 웹 디자인에서 필수적으로 사용돼!
|
||||
|
||||
### % (백분율)
|
||||
* 부모 요소의 크기를 기준으로 %만큼 크기를 설정
|
||||
* 레이아웃에서 유동적인 크기를 지정할 때 유용함
|
||||
```css
|
||||
.parent {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 50%; /* 부모의 50% */
|
||||
/* 부모의 크기가 500px이면 자식 요소는 250px이 됨! */
|
||||
}
|
||||
```
|
||||
|
||||
### em (부모 요소의 글자 크기 기준)
|
||||
* 부모 요소의 font-size를 기준으로 크기가 결정됨
|
||||
* 기본적으로 1em = 부모 글자 크기
|
||||
* 배수로 크기를 조정할 수 있음
|
||||
```css
|
||||
.parent {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.child {
|
||||
font-size: 1.5em; /* 부모의 1.5배 */
|
||||
/* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */
|
||||
}
|
||||
```
|
||||
> em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음!
|
||||
> ```css
|
||||
> body {
|
||||
> font-size: 16px;
|
||||
> }
|
||||
> .container {
|
||||
> font-size: 1.5em; /* 16px * 1.5 = 24px */
|
||||
> }
|
||||
> .child {
|
||||
> font-size: 2em; /* 24px * 2 = 48px */
|
||||
> }
|
||||
> ```
|
||||
|
||||
### rem (루트 요소 <html>의 글자 크기 기준)
|
||||
* html 요소의 font-size를 기준으로 크기 결정
|
||||
* em과 달리 부모 요소에 영향을 받지 않음
|
||||
```css
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 1.5rem; /* 16px * 1.5 = 24px */
|
||||
}
|
||||
|
||||
.child {
|
||||
font-size: 2rem; /* 16px * 2 = 32px */
|
||||
}
|
||||
```
|
||||
> 반응형 웹에서 추천되는 단위!
|
||||
|
||||
### vw / vh (뷰포트 기준)
|
||||
* vw: 브라우저 너비(Viewport Width)의 %
|
||||
* vh: 브라우저 높이(Viewport Height)의 %
|
||||
```css
|
||||
div {
|
||||
width: 50vw; /* 화면 너비의 50% */
|
||||
height: 30vh; /* 화면 높이의 30% */
|
||||
}
|
||||
```
|
||||
> 반응형 디자인에서 매우 유용!
|
||||
|
||||
### vmin / vmax (작은 쪽 or 큰 쪽 기준)
|
||||
* vmin: vw와 vh 중 작은 값 사용
|
||||
* vmax: vw와 vh 중 큰 값 사용
|
||||
```css
|
||||
div {
|
||||
width: 10vmin; /* 작은 쪽의 10% */
|
||||
height: 20vmax; /* 큰 쪽의 20% */
|
||||
}
|
||||
```
|
||||
> 정사각형 요소를 만들 때 유용!
|
||||
|
||||
### ex / ch (문자 기준)
|
||||
* ex: 소문자 x의 높이를 기준으로 크기 지정
|
||||
* ch: 숫자 0의 너비를 기준으로 크기 지정
|
||||
```css
|
||||
p {
|
||||
width: 10ch; /* 숫자 0이 10개 들어갈 크기 */
|
||||
}
|
||||
```
|
||||
> 코드 블록이나 글자 기반 디자인에서 유용!
|
||||
|
||||
162
docs/03_박스 모델.md
Normal file
162
docs/03_박스 모델.md
Normal file
@@ -0,0 +1,162 @@
|
||||
# Box Model
|
||||
|
||||
웹페이지의 모든 요소는 박스(Box) 형태로 표시돼.
|
||||
이 박스를 구성하는 요소들을 **박스 모델(Box Model)**이라고 해.
|
||||
HTML 요소가 실제로 화면에서 차지하는 크기를 결정하는 가장 중요한 개념이야.
|
||||
|
||||
## 박스 모델의 4가지 영역
|
||||
CSS 박스 모델은 4개의 영역으로 구성돼.
|
||||
```css
|
||||
┌────────────────────────────────────┐
|
||||
│ Margin │
|
||||
│ ┌──────────────────────────────┐ │
|
||||
│ │ Border │ │
|
||||
│ │ ┌────────────────────────┐ │ │
|
||||
│ │ │ Padding │ │ │
|
||||
│ │ │ ┌──────────────────┐ │ │ │
|
||||
│ │ │ │ Content │ │ │ │
|
||||
│ │ │ └──────────────────┘ │ │ │
|
||||
│ │ └────────────────────────┘ │ │
|
||||
│ └──────────────────────────────┘ │
|
||||
└────────────────────────────────────┘
|
||||
```
|
||||
1. Content (내용 영역)
|
||||
|
||||
* 요소의 **실제 내용(텍스트, 이미지 등)**이 들어가는 공간.
|
||||
* width, height 속성으로 크기 조절 가능.
|
||||
|
||||
2. Padding (안쪽 여백)
|
||||
|
||||
* 내용과 테두리(Border) 사이의 여백.
|
||||
* 요소의 내부 여백을 조절하는 역할.
|
||||
* padding 속성 사용
|
||||
|
||||
3. Border (테두리)
|
||||
* 요소를 감싸는 경계선.
|
||||
* border 속성 사용
|
||||
|
||||
4. Margin (바깥 여백)
|
||||
* 요소와 다른 요소 사이의 거리를 조정하는 여백.
|
||||
* margin 속성 사용
|
||||
|
||||
## 박스 모델 속성
|
||||
|
||||
* width / height
|
||||
|
||||
width와 height는 content 영역만 조절하고, padding, border, margin은 포함하지 않아!
|
||||
```css
|
||||
div {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
```
|
||||
|
||||
* padding
|
||||
|
||||
```css
|
||||
div {
|
||||
padding: 10px; /* 모든 방향 */
|
||||
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
|
||||
padding: 10px 15px 20px 25px; /* 시계 방향 (위, 오른쪽, 아래, 왼쪽) */
|
||||
}
|
||||
```
|
||||
|
||||
* border
|
||||
- solid : 실선
|
||||
- dashed : 점선
|
||||
- dotted : 점
|
||||
- double : 이중선
|
||||
- none : 없음
|
||||
```css
|
||||
div {
|
||||
border: 3px solid red; /* 두께 3px, 실선, 빨간색 */
|
||||
border-radius: 10px; /* 모서리를 둥글게 */
|
||||
}
|
||||
```
|
||||
|
||||
* margin
|
||||
|
||||
```css
|
||||
div {
|
||||
margin: 20px; /* 모든 방향 */
|
||||
margin: 10px auto; /* 위아래 10px, 좌우 자동 정렬 */
|
||||
}
|
||||
```
|
||||
auto를 사용하면 가운데 정렬 가능!
|
||||
```css
|
||||
div {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
## box-sizing
|
||||
|
||||
기본적으로 width와 height는 content 영역만 포함하지만,
|
||||
`box-sizing: border-box;`를 사용하면 border와 padding까지 포함한 크기로 계산돼.
|
||||
|
||||
```css
|
||||
div {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
border: 5px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
요소의 실제 크기를 더 쉽게 관리할 수 있어!
|
||||
|
||||
## max-width / max-height
|
||||
max-width 속성은 요소가 가질 수 있는 최대 너비를 제한하는 역할을 해. 콘텐츠가 너무 커지지 않도록 조절할 때 사용돼.
|
||||
|
||||
max-height 속성은 요소의 최대 높이를 제한하는 역할을 해.
|
||||
max-width와 같은 원리로 콘텐츠가 너무 높아지는 걸 방지할 때 사용돼.
|
||||
|
||||
* none : (기본값) 최대 너비/높이 제한 없음
|
||||
* px, %, em, rem : 특정 단위로 최대 너비/높이 설정
|
||||
|
||||
```css
|
||||
.box {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
/* width: 100%이지만 최대 600px까지만 확장됨 (화면이 작으면 줄어들고, 커지면 600px에서 멈춤) */
|
||||
```
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/* 반응형 이미지: 이미지가 부모 요소보다 커지지 않도록 제한 (화면 크기에 맞춰 자동 조정됨) */
|
||||
```
|
||||
```css
|
||||
.content {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
/* 콘텐츠가 너무 많으면 스크롤이 자동 생성됨 */
|
||||
```
|
||||
|
||||
## border-radius
|
||||
border-radius 속성은 요소의 모서리를 둥글게 만들어주는 역할을 해.
|
||||
네모난 요소를 부드러운 디자인으로 바꿀 때 필수!
|
||||
* 0 : (기본값) 직각 모서리
|
||||
* px, % : 반경을 설정하여 둥근 정도 조절
|
||||
* 50% : 원형으로 만듦
|
||||
```css
|
||||
.box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: steelblue;
|
||||
border-radius: 20px;
|
||||
} /* 20px만큼 모서리가 둥글게 처리됨 */
|
||||
```
|
||||
```css
|
||||
.circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: tomato;
|
||||
border-radius: 50%;
|
||||
} /* 정사각형을 완벽한 원으로 변환 */
|
||||
```
|
||||
137
docs/04_레이아웃.md
Normal file
137
docs/04_레이아웃.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# 레이아웃
|
||||
|
||||
## display
|
||||
요소가 어떻게 배치되는지를 결정
|
||||
* block : 블록 요소 (새 줄에서 시작)
|
||||
* inline : 인라인 요소 (한 줄 안에 배치)
|
||||
* inline-block : 인라인처럼 배치되지만 크기 조절 가능
|
||||
* none : 요소를 숨김
|
||||
* flex : 플렉스 박스 활성화
|
||||
* grid : 그리드 시스템 활성화
|
||||
```css
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
```
|
||||
|
||||
## position
|
||||
요소를 정확한 위치에 배치할 때 사용
|
||||
* static : 기본값 (HTML 흐름을 따름)
|
||||
* relative : 원래 위치 기준으로 이동
|
||||
* absolute : 부모 요소 기준으로 절대 위치
|
||||
* fixed : 뷰포트 기준으로 고정
|
||||
* sticky : 스크롤 시 특정 위치에서 고정
|
||||
> absolute는 가까운 position: relative 부모 요소 기준으로 배치됨
|
||||
```css
|
||||
.box {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
}
|
||||
```
|
||||
|
||||
## top, right, bottom, left
|
||||
* top : 요소를 위에서 아래로 이동
|
||||
* right : 요소를 오른쪽에서 왼쪽으로 이동
|
||||
* bottom : 요소를 아래에서 위로 이동
|
||||
* left : 요소를 왼쪽에서 오른쪽으로 이동
|
||||
|
||||
> 이 속성들은 요소의 **position 값이 relative, absolute, fixed, sticky**일 때만 동작해!<br />
|
||||
> static일 때는 적용되지 않음!
|
||||
|
||||
### relative에서의 사용
|
||||
* 요소가 원래 위치를 기준으로 이동
|
||||
```css
|
||||
.box {
|
||||
position: relative;
|
||||
top: 20px; /* 원래 위치보다 20px 아래로 이동 */
|
||||
left: 10px; /* 원래 위치보다 10px 오른쪽으로 이동 */
|
||||
}
|
||||
```
|
||||
### absolute에서의 사용
|
||||
* 가장 가까운 position: relative를 가진 부모 요소를 기준으로 이동
|
||||
* 부모가 없으면 **뷰포트(브라우저 화면)**를 기준으로 배치됨
|
||||
```css
|
||||
.parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
}
|
||||
/* .box는 .parent 기준으로 위에서 50px, 오른쪽에서 20px 떨어진 위치에 배치됨 */
|
||||
```
|
||||
|
||||
### fixed에서의 사용
|
||||
* **브라우저 화면(뷰포트)**을 기준으로 고정
|
||||
```css
|
||||
.box {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
/* 화면의 오른쪽 하단에 고정됨 (스크롤해도 움직이지 않음) */
|
||||
```
|
||||
|
||||
### sticky에서의 사용
|
||||
* 스크롤에 따라 움직이다가 특정 위치에 고정됨
|
||||
```css
|
||||
.box {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
/* .box는 스크롤되다가 top: 0 위치에 도달하면 고정됨 */
|
||||
```
|
||||
|
||||
## z-index
|
||||
요소의 쌓이는 순서를 결정 (값이 클수록 위에 위치)
|
||||
```css
|
||||
.box {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
```
|
||||
|
||||
## float
|
||||
요소를 왼쪽 또는 오른쪽으로 띄움. 주로 이미지나 텍스트 레이아웃에서 사용.
|
||||
```css
|
||||
img {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
}
|
||||
```
|
||||
> float을 사용하면 요소가 부모 요소를 빠져나올 수 있기 때문에, `clear: both;`를 이용해 레이아웃을 정리해야 함
|
||||
|
||||
## clear
|
||||
clear 속성은 float된 요소 옆에 다른 요소가 배치되는 것을 막아줌.
|
||||
float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도로 사용됨.
|
||||
* none : 기본값 (제거 없음)
|
||||
* left : 왼쪽의 float을 해제
|
||||
* right : 오른쪽의 float을 해제
|
||||
* both : 양쪽 모두 해제
|
||||
|
||||
## overflow
|
||||
콘텐츠가 부모 요소보다 커질 때 어떻게 처리할지 결정하는 속성!
|
||||
* visible : (기본값) 넘치는 콘텐츠를 그대로 표시
|
||||
* hidden : 넘치는 부분을 숨김
|
||||
* scroll : 스크롤바 생성 (항상 표시됨)
|
||||
* auto : 넘칠 때만 스크롤바 생성
|
||||
```css
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
} /* 넘치는 부분이 잘려서 보이지 않음 */
|
||||
```
|
||||
|
||||
## visibility
|
||||
visibility 속성은 요소를 보이거나 숨길 때 사용되며, `display: none;`과의 차이가 있음!
|
||||
* visible : 기본값 (요소가 보임)
|
||||
* hidden : 요소가 보이지 않지만 공간은 유지
|
||||
* collapse : table-row, table-column을 숨길 때 사용
|
||||
|
||||
> * `visibility: hidden;` : 요소가 보이지 않지만 공간은 그대로 유지
|
||||
> * `display: none;` : 요소가 완전히 제거됨 (공간도 사라짐)
|
||||
|
||||
8
docs/05_배경 및 색상.md
Normal file
8
docs/05_배경 및 색상.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# 배경 및 색상
|
||||
|
||||
* background-color
|
||||
* background-image
|
||||
* background-size
|
||||
* background-position
|
||||
* background-repeat
|
||||
* opacity
|
||||
9
docs/06_글꼴 및 텍스트 스타일.md
Normal file
9
docs/06_글꼴 및 텍스트 스타일.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# 글꼴 및 텍스트 스타일
|
||||
* color
|
||||
* font-family
|
||||
* font-size, font-weight, font-style
|
||||
* letter-spacing, word-spacing
|
||||
* text-align, text-indent
|
||||
* text-decoration
|
||||
* text-transform
|
||||
* white-space
|
||||
8
docs/07_Flexbox.md
Normal file
8
docs/07_Flexbox.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# Flexbox
|
||||
|
||||
* display: flex
|
||||
* flex-direction
|
||||
* justify-content
|
||||
* align-items
|
||||
* flex-wrap
|
||||
* flex-grow, flex-shrink, flex-basis
|
||||
6
docs/08_CSS Grid.md
Normal file
6
docs/08_CSS Grid.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# CSS Grid
|
||||
* display: grid
|
||||
* grid-template-columns, grid-template-rows
|
||||
* grid-column-gap, grid-row-gap
|
||||
* grid-area, grid-auto-flow
|
||||
* align-content, justify-content
|
||||
6
docs/09_애니메이션 및 트랜지션.md
Normal file
6
docs/09_애니메이션 및 트랜지션.md
Normal file
@@ -0,0 +1,6 @@
|
||||
# 애니메이션 및 트랜지션
|
||||
* transition
|
||||
* animation
|
||||
* keyframes
|
||||
* transform
|
||||
* perspective
|
||||
4
docs/11_CSS 변수.md
Normal file
4
docs/11_CSS 변수.md
Normal file
@@ -0,0 +1,4 @@
|
||||
# CSS 변수 :root
|
||||
|
||||
|
||||
## 다크 모드 적용법
|
||||
1
docs/12_미디어퀴리.md
Normal file
1
docs/12_미디어퀴리.md
Normal file
@@ -0,0 +1 @@
|
||||
# 미디어 쿼리 @media
|
||||
Reference in New Issue
Block a user