CSS
1. 모듈별 발전
2. CSS 다양
3. 브라우저 지원 CSS 달라짐
1. CSS 기초 | 모듈별로 발전 -> CSS 버전 다양 -> 브라우저 지원 유형 다름 -> 브라우저 접두사 사용 | |
2. CSS 적용방법 | 1) 외부 문서 | <link rel ="stylesheet" href="myCss.css"> |
2) syle 태그 | <style> h1 { color: green; } </style> |
|
3) 태그 안 직접 | <h1 style="color:blue">Hello</h1> | |
3. 적용 순위 | 가까운거부터 | ! important; 우선순위 최상위로 color: red !important; } |
| 4. 상속 | 1) 태그 상속 O | |
2) 속성:initial -> default 적용 | ||
5. CSS 단위 | 1) 값이 숫자일 때 적용 | |
| 2) 가변 고정 | |
6. Selector | 1) 스타일 적용 요소 지정 방법 : 대상 { 스타일 } | |
2) #{id} : 유일 | ||
3) .{class} : 그룹 | ||
7. Box Model | | box-sizing content-box:{w1, h1} border-box :{w2, h2} 요소 크기: outline까지 |
1) Margin: ↑↓←→ auto 2) Border:↑↓←→ 3) Padding: ↑↓←→ 4) content 1) width, height 2) max- min- 3) 크기지정 100% : 브라우저 꽉 차게 auto: 자동 5) outline: 테두리 돋보이게
| ||
8. 속성 | 1) background | |
| 2) color | ||
3) text | ||
4) fonts | ||
5) icons .font awesome Icons: 링크, 태그 .bootstrap Icons | ||
6) cursor | ||
7) link | ||
| 8) list | 1) <ul>, <ol> 2) type, image, position | |
9) table | tr, td, th | |
| 9. Layout | 1) Block | div, h1, p, form, header, footer, section |
2) inline | span, a, img | |
inline-block |
| |
3) display:none | ||
| 4) visibility: hidden | ||
5) position | static relative: 상대위치 fixed: 메뉴 고정 absolute: 조상 기준 | |
6) overflow | visible: 영역 초과 hidden: 잘림 scroll: 잘림, 스크롤바 auto: 스크롤바 x,y따로 지정 가능 | |
7) float, clear | float: 요소 떠 있기 싫으면 clear | |
8) 가운데-> class요소로 지정 | ||
10. box-size | 1) content-box | |
| 2) border-box | content-box + padding,border | |
11. selector 관계 | 1) 셀렉터 셀렉터: 손자 | section ul { color:blue; } |
2) 셀렉터>셀렉터: 자식 | section > ul { color:blue; } | |
3) 셀렉터~셀렉터: 형제 | header ~ p { color: blue; } | |
4) 셀렉터+셀렉터: 근접 형제 | header + p { color: blue; } | |
12. 속성 selector | 1) [속성] | <a href="#">메뉴 1</a> |
2) [속성=값] [target="_blank"] | <a href="....." target="_blank">html</a> | |
3) [속성~=값] [class~="button"] | <a href="#" class="flat button"> | |
4) [속성|=값] [class|="us"] | <a href="#" title="us">영어</a> <a href="#" title="us-english">영어</a> | |
5) [속성^=값] [title^=eng"] | <a href="#" title="english">영어</a> | |
6) [속성 $=값] [href $="xls"] | <a href="intro.xls">엑셀 파일</a> | |
7) [속성 *=값] [href *="w3"] | <a href="http://www.w3c.org/TR/html">html 사이트</a> | |
13. 의사 요소 (툴팁만들 때) | 1) ::after p:after { content:"-Remember this"; } | <p> 다음에 내용을 넣는다. |
2) ::bofore / p::before | <p> 이전에 내용을 넣는다. | |
3) ::first-letter / p::first-letter | <p> 의 첫번째 글자 | |
4) ::first-line / p::first-line | <p>의 첫줄 | |
5) ::selection / p::selection | <p>에서 선택한 부분 | |
14. 의사 클래스 | 요소의 특별한 상태를 정의하기 위해 사용되는 가짜 클래스 | |
| 1) :active | a:active | |
| 2) :checked | input:checked | |
| 3) :disabled | input:disabled | |
| 4) :empty | p:empty | |
| 5) :enabled | input:enabled | |
| 6) :first-child | p:first-child | |
| 7) :first-of-type | p:first-of-type | |
| 8) :focus | input:focus | |
| 9) :hover | a:hover | |
10) :in-range | input:in-range | |
댓글