wsu-css-cheat-sheet.pdf문서의 구조 : HTML
문서의 스타일 : CSS(Cascading Style Sheets)
거대하고 복잡한 사이트를 관리할 때 필요
모든 페이지들이 동일한 CSS 공유
· CSS의 구성
- 선택자(selectors)
- 박스 모델
- 배경 및 경계선
- 텍스트 효과
- 2차원 및 3차원 변환
- 애니메이션
- 다중 컬럼 레이아웃
- 사용자 인터페이스
· CSS3의 문법
- 선택자(selector) { 속성 : 값 ; }
ex) p{background-color : yellow;}
- 주석 : /* ... */
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> div{ 속성:값; 속성:값; ... } </style> </head> <body> <div>css3 test</div> </body> </html> |
· 적용 순서 : 임베디드 방식 -> 인라인 방식 -> css파일
· <link rel="stylesheet" href="css/a.css">
- html <head>안에 추가해주기
· 선택자 : HTML 요소를 선택하는 부분(선택자는 jQuery에서도 사용)
· 선택자 종류
- 타입 선택자
=HTML 요소 이름 선택
<style> h1{ color:blue; } div{ color: green; } </style> |
- 전체 선택자
= 페이지 안에 있는 모든 요소 선택
*{ background-color: yellow; } |
- 클래스 선택자 : .
= 클래스가 부여된 요소를 선택
= 클래스 이름 중복 선언 O
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .my1{ color: yellow; } </style> </head> <body> <div class="my1">test</div> <p class="my1">테스트1</p> <p>테스트2</p> </body> </html> |
= p.my1{
color:red;
}
-> p 태그 중에서 클래스 이름이 my1인 것만 적용됨
- 아이디 선택자 : #
= 특정한 요소를 선택
= id 중복 선언 X -> 처음 등장하는 것 하나만 적용됨
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #test1{ color: red; text-align: center; } </style> </head> <body>
<p id="test1">테스트1</p> </body> </html> |
- 속성 선택자
= 특정한 속성을 가지는 요소를 선택
<style> [src]{ border: 3px solid red; } [class]{ color: red; } </style> |
= p[class]{ } ->p태그 안에 있는 class 속성에만 적용
[src="image/b.jpg"]{ border: 3px solid red; }src가 일치하는 거 [src^="image"]{ border: 3px solid red; }image로 시작하는 거 [src$="jpg"]{ border: 3px solid red; } jpg로 끝나는 거 [src*="c"]{ border: 3px solid red; } src에 c가 들어있는 거 [name~="abc"]{ color: green; } abc 있는거(공백포함) [name|="abc"]{ color: green; } abc- 있는거 |
<style> [src="image/b.jpg"]{ border: 3px solid red; }src가 일치하는 거 [src^="image"]{ border: 3px solid red; }image로 시작하는 거 [src$="jpg"]{ border: 3px solid red; } jpg로 끝나는 거 [src*="c"]{ border: 3px solid red; } src에 c가 들어있는 거
p[class]{ color: red; } [name~="abc"]{ color: green; } [name|="abc"]{ color: green; } </style> |
- 의사 선택자(pseudo-selector)
<!-- 반응형 선택자 --> <style> div:hover{ color: red; }/* hover : div 태그에 마우스 올라갔을 때 */ p:active { background-color: yellow; }/* active : p 태그 마우스로 클릭했을 때 */ [type="text"]:focus { background-color: skyblue; border: 2px solid white; }/* focus : 마우스 커서가 위치했을 때 */ a:link{ color: blue; }/* */ a:visited{ color: green; }/* a태그 클릭해서 방문했을 때 */ a:hover { color: yellow; } |
li:last-child { color: red; }마지막 요소만 적용됨
li:first-child { color: red; }
li:nth-child(3n) { color: red; } |
p:first-line { background-color: yellow; } p:first-letter { font-size: 50pt; color: red; } p:before { content: "CSS3"; color: green; } p:after { content: "배우기"; color: green; } |
<style> [name="color"]:checked{ width: 20px; height: 20px; } div{ width: 100px; height: 50px; background-color: yellow; } [type="checkbox"]:checked{ width: 20px; height: 20px; } #test1:enabled{ background-color: skyblue; } #test2:disabled{ background-color: blue; } input:required{ background-color: green; } input:read-only{ background-color: lightgray; } </style> |
nth-of-type :
nth-child
· 자손, 자식 형제 결합자
- s1 s2 : 자식+후손
- s1>s2 : 자식만
- s1 +(오른쪽에 있는 형제만)/~(동급 레벨 모든 형제) s2: 형제
<style> .test1 ~ div{ color: red; }
.fruit ~ ul>li{ color: yellow; } </style> |
· font - 웹폰트
- 모든 유저가 동일한 폰트를 볼 수 있고 라이센스 문제 해결
<style> @font-face{ font-family: "나의글꼴"; src:url("font/NANUMGOTHIC.TTF"); } *{ font-family : "나의글꼴"; } </style> |
'SK고용디딤돌' 카테고리의 다른 글
| 직무교육 5일차(CSS) (0) | 2017.07.14 |
|---|---|
| 직무교육 4일차(CSS) (0) | 2017.07.13 |
| 직무교육 2일차(HTML) (1) | 2017.07.11 |
| 직무교육 1일차(HTML) (0) | 2017.07.10 |
| SK고용디딤돌 1, 2주차 후기 (0) | 2017.07.08 |