CS

종류

태그 선택자 (type selector): html 태그 이름으로 선택

ex) li { color: red; }

 

클래스 선택자 (class selector): html class의 속성의 값으로 선택

ex) .orange{ color: red; }

 

하위 선택자 (descendant combinator): html 요소의 하위 요소를 선택

ex) div .orange{ color: red; }

 

가상 클래스:hover (pseudo-classes :hover): html 요소에 마우스 커서가 올라가 있는 동안 선택

ex) a:hover{ color: red; }

 

가상 클래스:active (pseudo-classes :active): html 요소에 마우스를 클릭하고 있는 동안 선택

ex) a:active{ color: red; }

 

CS 종류

글꼴, 문자 : fonts, texts
배경: backgrounds, 요소의 배경
배치: positions, 요소의 위치
정렬: flexible boxes, flex
전환: trainsitions, 요소의 이전과 이후 상태를 자연스럽게 보여줌 -> transitions: 1s 바뀌는데 1초 걸림
변환: transforms, 요소에 회전, 비율, 기울기 -> translateX() translateY() rotate() scale()
띄움: floations, 요소를 글자 위에 띄움
애니메이션: animations, 요소에 애니메이션 추가
그리드: grid, 요소의 레이아웃 지정
다단: columns, 요소의 문장을 여러 단으로 배치
필터: filters, 요소에 흐리게, 색상 반전 등 그래픽 효과

CS 세부 종류

border-radius: 테두리 둥글게
box-shadow: 요소에 그림자
background-color: 배경색
margin: 요소의 외부 여백
padding: 요소의 내부 여백
background-repeat: no-repeat: 이미지 반복 출력 안됨
background-position: 이미지 위치
font-size: 글자 크기(기본 16px)
font-weight: 글자의 두께
font-family: 글꼴
line-height: 줄 간 높이
text-align: 텍스트 정렬
word-break: keep-all -> 한글에서 띄어쓰기로 단어 구분
display: 수직 수평(flex) 정렬
justifiy-content, align-items: 정렬
gap: item 사이의 간격

@media 쿼리 (반응형 웹)
ex) @media (max-width: 500px) {
               .container { height:~, border:~}
               .container .item {width:~ height:~~}
              }