문법

• 선택자
1. CSS는 HTML 태그 요소를 선택하여 디자인 속성을 정의한다

↓ css

선택자 { 속성: 값; ... }
2. 선택자는 태그 이름, 속성의 나열로 구성된다

↓ css

tag_name, #id, .class, [attr=value], ...
• 속성 선택자
1. 특정 값과 일치하는 속성 [attr='value']
2. 특정 단어를 포함하는 속성 [attr~='word']
3. 특정 값을 포함하는 속성 [attr*='value']
4. 특정 단어로 시작하는 속성 [attr|='word']
5. 특정 값으로 시작하는 속성 [attr^='value']
6. 특정 값으로 끝나는 속성 [attr$='value']
• 복합 선택자
1. 후손 : ' '(스페이스)
2. 자식 : '>'
3. 바로 다음 형제 : '+'
4. 다음 모든 형제 : '~'
• 가상 클래스
1. 요소들의 상태들을 정의한 Pseudo-Class가 존재한다. 일반 클래스와 달리 ':'으로 구별한다
2. a: active, hover, link, visited
3. input: checked, disabled, enabled, focus, in-range, out-of-range, valid, invalid, read-only, read-write, required, optional
4. :first-child, last-child, nth-child(n), nth-last-child(n)
5. :not(selector)
• 가상 요소
1. 요소의 특정 부분 선택

첫 번째 글자 ::first-letter, 첫 번째 줄 ::first-line

2. 요소 내부에 익명 요소 추가

앞부분에 추가 ::before, 뒷부분에 추가 ::after

3. 유저가 블록 지정한 요소들 선택 ::selection
• 변수
1. 변수 선언

↓ css

root { --var1: 12px; --my-var2: blue; }
2. 변수 사용

↓ css

p { color: var(--my-var2); }
• meadia query

Syntax::= @media not|only mediatype and (media feature and|or|not mediafeature) { CSS-Code; }css3_pr_mediaquery.asp

디자인

• 공통 속성
1. 배경색 background-color: color;
2. 배경 이미지 background-image: url("url")

이미지 잘라넣기 : 투명한 img로 자리를 차지하고, background: url('url') 시작w 시작h; 설정

외곽 이미지배경 이미지이미지 스타일링img 크기에 맞추는 방식

3. 외곽선 border-style: dotted | dashed | solid | double | groove | none | hidden | ...
• 두께 border-width: width; » 색상 border-color: color; » 곡률 border-radius: radius;
• 방향별로 설정 가능 : top, bottom, left, right
• margin 밖의 외곽선 outline도 존재
4. 외부 여백 margin: auto | size | % | inherit;
   내부 여백 padding: size | % | inherit;
5. 너비 width: auto | size | %, 높이 height: auto | size | %
• 최대 너비 max-width: none | size | %, 최대 높이 max-height: none | size | %
• 최소 너비 min-width: size | %, 최소 높이 min-height: size | %
• 텍스트
1. 색상 color: color;
2. 정렬 text-align: left | center | right | justify(양쪽정렬)
3. 꾸밈선 text-decoration: none | overline | line-through | underline
4. 대소문자 강제 text-transform: uppercase | lowercase | capitalize
5. 들여쓰기 text-indent: size
6. 자간 letter-spacing: size, 단어 간격 word-spacing: size
7. 글자 크기 font-size: size, 줄 간격을 포함한 높이 line-height: size(배율)
8. 글자 두께 font-weight: normal|bold|bolder|lighter|number|initial|inherit;
   그림자 text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
9. 폰트 font-family: family-name|generic-family|initial|inherit;
10. 영역을 벗어난 텍스트 처리 text-overflow, text-break, text-wrap참고
• 리스트
1. 리스트 아이템 이미지 마크 설정 list-style-image: none|url|initial|inherit;
2. 리스트 아이템 마커 타입 list-style-type: value;참고
3. 리스트 아이템 마커 위치 list-style-position: inside | outside;
• 보여주기 속성
1. display: none | block | inline | inline-block(너비/높이 속성을 가질 수 있다)참고
2. visibility: visible | hidden(자리는 차지) | collapse | initial | inherit;
3. 위치 position: static | relative | fixed | absolute | sticky;
4. z축 우선순위 z-index: number;
5. 넘침 영역 overflow, overflow-x, overflow-y: visible | hidden | scroll | auto | initial | inherit;
6. 띄우기 float: none | left | right | initial | inherit;
7. float 요소를 배제하여 구분된 영역 이용 clear: none | left | right | both | inherit;
8. 불투명도 opacity: [0.0-1.0]; 또는 RGBA 이용
9. box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
10. 다단참고
11. 사용자가 크기 조절 resize: none|both|horizontal|vertical|initial|inherit;

변형

1. 2D 변형 » translate(), rotate(), scale(), skewX(), skewY(), matrix()참고
2. 3D 변형 » rotateX(), rotateY(), rotateZ()참고
3. 전개 » transition여기로
4. 애니메이션 »여기로