안녕하세요, 저는 CSS를 배우고 있습니다!
+``` +```css +p { + color: blue; + font-size: 20px; + font-weight: bold; +} +``` +위의 CSS를 적용하면,태그의 글씨가 파란색, 크기는 20px, 굵게 표시돼. + +## HTML과 CSS의 연결 방법 +CSS는 세 가지 방법으로 HTML에 적용할 수 있어. + +1. 인라인 스타일 (HTML 요소에 직접 작성) + + HTML 태그 안에 직접 style 속성을 사용해 적용. + + ```html +
이 문장은 빨간색입니다.
+ ``` + +2. 내부 스타일 시트 (` + ``` + +3. 외부 스타일 시트 (.css 파일 생성 후 연결) + + 별도의 .css 파일을 만들어 연결. + + ```css + /* style.css 파일 */ + p { + color: red; + } + ``` + ```html + + ``` + +외부 스타일 시트를 사용하면 여러 페이지에 동일한 스타일을 적용할 수 있어, 유지보수가 훨씬 쉬워져! + +## 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; +} +``` +위 코드는 `` 태그를 선택해서 글자 색상을 파란색, 크기를 20px로 지정하는 스타일이야. + +## CSS 주석 +코드에 설명을 추가하고 싶을 때 `/* 주석 내용 */` 형식으로 작성해. +```css +/* 제목을 빨간색으로 변경 */ +h1 { + color: red; +} +``` +주석은 브라우저에서 해석되지 않으며 코드 가독성을 높이는 역할을 해. + +## CSS의 상속(Inheritance) + +CSS에서는 일부 속성이 부모 요소에서 자식 요소로 자동으로 전달(상속) 돼. +예를 들어, 문서의 기본 글꼴을 `
` 태그에서 지정하면, 그 안에 있는 모든 텍스트 요소들이 그 글꼴을 사용하게 돼. + +### 상속되는 속성 +주로 텍스트와 관련된 속성들이 상속돼. 예를 들어, color, font, visibility, cursor 등. + +```css +body { + color: blue; +} +``` +```html + +이 글자는 자동으로 파란색이 됩니다.
+ +``` +`` 태그에 color를 명시적으로 지정하지 않아도 부모인 `
`에서 설정한 파란색이 적용돼. + +### 상속되지 않는 속성 +박스 모델이나 레이아웃 관련 속성들은 기본적으로 상속되지 않아. 예를 들어, width, height, margin, padding, border, background, display, position 등. + +```css +body { + background-color: yellow; +} +``` +```html + +이 배경은 노란색이 아닙니다.
+ +``` +태그는 부모인
의 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 +이 문장은 무슨 색일까?
+``` +`#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 리소스 및 도구 \ No newline at end of file diff --git a/docs/01_선택자.md b/docs/01_선택자.md new file mode 100644 index 0000000..41c4b5f --- /dev/null +++ b/docs/01_선택자.md @@ -0,0 +1,204 @@ +# 선택자 + +CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼. +선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져! + +## 기본 선택자 (Basic Selectors) + +### 전체 선택자 (`*`) +* 문서의 모든 요소를 선택 +* 초기화 스타일을 적용할 때 유용 +```css +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +``` + +### 요소 선택자 (`tagname`) +* 특정 HTML 태그에 스타일 적용 +```css +p { /* 모든태그에 적용됨 */ + color: blue; + font-size: 18px; +} +``` + +### 클래스 선택자 (`.classname`) +* 특정 클래스를 가진 요소 선택 +```css +.button { /* 에 적용됨 */ + background-color: red; + color: white; +} +``` + +### 아이디 선택자 (`#idname`) +* 특정 ID를 가진 요소 선택 +* ID는 문서 내에서 고유해야 함! +```css +#header { /*
만 스타일 적용됨 */ + color: red; +} +``` + +### 후손 선택자 (`A B`) +* 자식 + 손자 + 그 이하 모든 후손 요소 선택 +```css +div p { /*
요소에 적용 */ + font-weight: bold; +} +``` + +### 인접 형제 선택자 (`A + B`) +* 특정 요소 바로 다음에 오는 형제 요소 하나 선택 +```css +h1 + p { /*
만 적용됨 */ + color: green; +} +``` + +### 일반 형제 선택자 (`A ~ B`) +* 특정 요소 뒤에 나오는 모든 형제 요소 선택 +```css +h1 ~ p { /*
에 적용됨 */ + font-style: italic; +} +``` + +## 속성 선택자 (Attribute Selectors) + +### 특정 속성이 있는 요소 선택 (`[attr]`) +```css +input[required] { /* 필드에 빨간 테두리 적용 */ + border: 2px solid red; +} +``` + +### 특정 값과 일치하는 속성 선택 (`[attr="value"]`) +```css +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"가 포함된 모든