!important
: 위의 순서를 무시하기 떄문에 되도록 지양
*
: wild cardtag
: type#id
: ID.class
: Class:
: state[]
: attributemargin
: 테두리 바깥border
: 테두리padding
: 테두리 안block
: 한줄에 하나inline
: 한줄 여러개 / 내용물에 따라 변경inline-block
: 한줄에 여러개 / 내용물 상관 없음static
: 디폴트 / 고정relative
: 원래 자리서 바뀜absolute
: 부모 상자 기준으로fixed
: 상자에서 벗어나 페이지 기준으로sticky
: 원래 자리서 바뀌면서 스크롤할때 따라감e.g.)
nav { position: sticky; top: 0; // 위치 맨 위에 붙여줌 } 스크롤 하면서 Nav바 계속 위에 고정하고 싶을 때 사용
float
: 텍스트와 이미지가 같이 있을때 이미지 위치 지정 (left, center, right)
display: flex;
flex-direction
: 디폴트 rowflex-wrap
: 디폴트 nowrap 한줄에 붙일지 말지flex-flow
: 2,3번 속성 한번에 작성가능justify-content
: 중심축의 아이템 배치 결정align-items
: 반대축의 아이템 배치 결정align-content
: 반대축이 두 줄 이상으로 배치되어 있을 경우 각 줄 배치 결정
flex-box 간격 줄때 margin대신 사용
div {
display: flex;
gap: [row-gap] [column-gap];
}
order
: default 0; 순서 위치 설정
flex-grow
: 디폴트 0; 늘어날때 비율 설정
flex-shrink
: 디폴트 0; 줄어들때 비율 설정
flex-basis
: 디폴트 auto; 비율 설정
flex
: 2,3,4 동시에 사용
align-self
: 아이템 하나만 지정 가능
Media Query : 모바일 / 테블릿 / 랩탑 / 데스크탑 크기 별로 설정 가능
@media screen and (min-width: 800px) {
}
속성1: screen, all, print, speech
속성2: and, not, only, ,(comma)
px
: 픽셀 => 고정 적임
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은 부모에따라 유동적
기본 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축)
transition-property: all;
: 너비와 불투명 효과transition-duration: [시간];
trandision-delay
: 애니메이션 기다렸다가 작동하게해줌transition-time-function: ease;
효과 속도 지정transition: [property] [duration] [function] [delay];
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]
img {
aspect-ratio: 16 / 9; => 16:9 비율
}