Cascading 순서

1. Author style

2. User style

3. Browser

!important: 위의 순서를 무시하기 떄문에 되도록 지양

선택자(selectors)

• * : wild card

• tag : type

• #id : ID

• .class : Class

• : : state

• [] : attribute

간격 설정

• margin : 테두리 바깥

• border : 테두리

• padding : 테두리 안

레이아웃

1. display

• block : 한줄에 하나

• inline : 한줄 여러개 / 내용물에 따라 변경

• inline-block : 한줄에 여러개 / 내용물 상관 없음

2. position

• static : 디폴트 / 고정

• relative : 원래 자리서 바뀜

• absolute : 부모 상자 기준으로

• fixed : 상자에서 벗어나 페이지 기준으로

• sticky : 원래 자리서 바뀌면서 스크롤할때 따라감

e.g.)

nav {
 position: sticky;
 top: 0; // 위치 맨 위에 붙여줌
}
스크롤 하면서 Nav바 계속 위에 고정하고 싶을 때 사용

Flex Box

float : 텍스트와 이미지가 같이 있을때 이미지 위치 지정 (left, center, right)

container (부모 상자)

1. display: flex;
   => flex 사용

2. flex-direction : 디폴트 row
   row, row-reverse, column, column-reverse

3. flex-wrap : 디폴트 nowrap 한줄에 붙일지 말지
   nowrap, wrap, wrap-reverse

4. flex-flow : 2,3번 속성 한번에 작성가능

5. justify-content : 중심축의 아이템 배치 결정
   flex-start, center, flex-end, space-around, space-between, space-evenly

6. align-items : 반대축의 아이템 배치 결정
   => baseline: 내용물 같은 위치

7. align-content: 반대축이 두 줄 이상으로 배치되어 있을 경우 각 줄 배치 결정

8. flex-box 간격 줄때 margin대신 사용

div {
	display: flex;
	gap: [row-gap] [column-gap];
	
}

item (자식 요소)

1. order: default 0; 순서 위치 설정

2. flex-grow: 디폴트 0; 늘어날때 비율 설정

3. flex-shrink: 디폴트 0; 줄어들때 비율 설정

4. flex-basis: 디폴트 auto; 비율 설정

5. flex: 2,3,4 동시에 사용

6. align-self: 아이템 하나만 지정 가능

반응형 디자인

Media Query : 모바일 / 테블릿 / 랩탑 / 데스크탑 크기 별로 설정 가능

@media screen and (min-width: 800px) {
	
}

속성1: screen, all, print, speech

속성2: and, not, only, ,(comma)

반응형 유닛

1. Absolute

px : 픽셀 => 고정 적임

2. Relative

em : 현재 폰트 사이즈를 나타내는 단위 => 현재 폰트 사이즈가 16px이면 1rem == 16px / 자식은 부모의 크기 기준으로 상대적

rem: root + em => root 크기 기준

vw: 너비 100vw => 브라우저의 100%

vh: 높이 위와 유사

%: 부모요소의 상대적으로 기준 em과 유사 100% == 1em

부모를 기준으로 변경해야할때: em, %

브라우저를 기준으로 변경해야할떄: v*, rem

요소의 너비에 따라 변경해야 할때: %, v*

폰트 사이즈에 따라 변경해야 할때: em, rem

em VS rem: rem은 어디서 쓰든 똑같은 사이즈, em은 부모에따라 유동적

:root

기본 css 지정 가능
=> 불러올 떄는 var(변수)

:root {
  --text-color: #f0f4f5;
  --background-color: #263343;
}

* {
 color: var(--text-color);
}

문장줄 길이 제한

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
3줄로 부터 감춰짐

이미지 관련 팁

• mask-image: url(); : 이미지 안에 이미지를 오버랩 할수 있음

• background-attachment: fixed; : li안에 하나의 이미지를 공유 퍼즐 조각처럼 나옴

• object-fit: cover; : 이미지 크기를 원본 비율로 맞춰줌

• 이미지를 호버했을때 크기를 키우고 싶다면

img:hover {
	transform: sale(1.2); : 1.2배 커짐
	transition: 1s; : 1초 동안 커짐
}

• 이미지를 사선으로 자르고 싶을 때

transform: skew(0deg, -10deg); (x축, y축)

Animation_transition

• transition-property: all; : 너비와 불투명 효과

• transition-duration: [시간];

• trandision-delay: 애니메이션 기다렸다가 작동하게해줌

• transition-time-function: ease; 효과 속도 지정

• transition: [property] [duration] [function] [delay];
  한줄로 위의 4가지속성 함축 가능
  e.g.) transition: width .35s ease .is; 속성 / 시간 / 변화 / 지연

스크롤 스냅

부모에 스크롤 스냅을 타입 설정하면
scroll-snap-type: y mandatory;

자식 요소들이 스크롤 스냅 설정 가능
scroll-snap-align: center;

자잘한 팁

• calc(): 사칙연산 메소드

• text-transform: 글자 변형 (e.g. uppercase: 대문자로)

• --webkit : 여러 브라우저 호환성을 위해 사용

• @support: 브라우저 지원 여부에 따라 css 설정 가능

• 선택자 코드 축소 가능
  :is(...args) [selector]

• aspect ratio
  영상이나 이미지를 원하는 비율로 설정 가능

img {
  aspect-ratio: 16 / 9; => 16:9 비율
}