Float
이미지 삽입 시 사용, 인접한 텍스트 or 인라인 요소가 그 주위를 자연스럽게 감싼다
none : 기본값, 요소 안 띄움
left : 왼쪽에 띄움
right : 오른쪽에 띄움
inherit : 부모 요소로부터 상속
initial : 기본값으로 설정
-> 글자가 그림 감싸게 하기
clear
float 속성이 적용 다음 끊고 싶을 때 사용
-> 글자가 그림 감싸게 하는 거 끝내기
Position
static : 일반적인 흐름을 따라 배치가 됨, 기본 값
relative : 일반적인 흐름에 따라 배치, 상대적인 위치에 배치, 상하좌우양옆으로 옮길 수 있음.
absolute : 일반적인 흐름을 따르지 않게한다, position: static속성을 가지고 있지 않은 부모를 기준으로 움직임.
fixed : 일반적인 흐름에서 제거됨, 스크롤 되어도 움직이지 않음
sticky : 문서 안에서 static 과 같인 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 화면 고정
-> 내려가다가 어느 순간이 되면 고정
z-index : 어떤 인덱스가 앞에 나올지, 뒤로 갈지 정할 수 있다.
Background 배경 스타일
background-color : 배경 색 지정
-- 키워드 값, 16진수 값, RGB 값, 특별 키워드 값 전역 값
background-image : 배경 이미지 지정
background-repeat :배경 이미지 반복 설정(가로, 세로, 반복 x)
background-position : 배경 이미지를 어디에 둘 것인지
background-scroll : 웹 화면을 스크롤 하면 배경 이미지 같이 움직임
background-fixed : 웹 화면 스크롤 하면 배경 이미지 고정
background-local : 배경 이미지가 스크롤에 따라서 같이 움직임
background-size : 배경 이미지의 크기 설정(늘리기, 줄이기, 사이즈 맞추기)
contain : 이미지가 잘리지 않는 한 최대 크기
cover : 위와 동일 & 이미지의 비율 다르면 잘라서 빈 공간 안 생기게 만듦(많이 사용!)
auto : 원본 크기
그라데이션
선형 그라데이션
linear-gradient() : 두 개의 색상이 이쁘게 섞임 (여러가지 색상 가능)
-to : 방향 설정
-deg : 각도 설정
-% 설정도 가능
원형 그라데이션
-타원형
radial-gradient() : 타원형 그라데이션 만들기
중앙부터 색깔이 바뀜
방향도 바꿀 수 있음
-정원
radial-gradient(circle) : 원형 그라데이션 만들기
가상 클래스/요소
가상 클래스
HTML요소의 특별한 상태 명시할 때 사용
ex) :link, :visited, :active, :hover, :focus, :nth-chlid 등등
-> 사용 할 때 찾아보기
가상 요소
HTML요소의 특정 부분 선택할 때 사용
ex) ::first-letter, ::first-line, ::before, ::after, :: selection
-> 사용 할 때 찾아보기
transform
HTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용
ex) transform translate(20px): -> x 축 기준으로 20px 이동
translate(tx, ty) : x, y 축으로 이동, 음수는 반대쪽으로 이동
translateX(tx) : x축으로 이동
translateY(tY) : y축으로 이동
scale(sx,sy) : x, y축으로 확대, 축소
scaleY(sx) : x축으로 확대, 축소
scaleY(sy) : y축으로 확대, 축소
rotate(각도) : 회전, 입체감 없으면 구별 힘듦
rotateX(각도) : x축 중심 회전, 입체감 표현 해줘야됨
rotateY (각도) : y축 중심 회전, 입체감 표현 해줘야됨
rotateZ(각도) : z축 중심 회전, 입체감 표현 해줘야됨
skew(aX, aY) : x,y 축 왜곡
skewX(ax) : x축 왜곡
skewY(ay) : y축 왜곡
Transition
부드럽게 변환
transition-property : 어떤 속성에 트렌지션 효과 줄 지 지정
transition-duration : 트렌지션 효과 얼마나 실행 할 것인지(몇초동안 진행할건지)
transition-delay : 얼마나 기다렸다가 실행(몇초 있다가 실행 할 것인지)
transition-timing-function : 속도 지정
엄청 많은 값 존재 -> 찾아보기
Animation
애니메이션 만들어줌, 트랜지션보다 규모 크고 복잡
keygrames 정의
@keygrames : 애니메이션 생성
shape : from(시작) ~to(끝)을 이용
Animation 속성
@keygrames 규칙을 이용해 기술
여러가지 속성들 존재
색깔 변경, 모양 변경 등 많은 것 가능
->로딩중도 애니메이션을 활용해 만듦
반응형 웹 사이트
화면 크기에 따라서 최적화 된 웹 화면 보여줌 ex) 모바일 화면 최적화, pc 화면 최적화
뷰포트(viewprot) : 웹 브라우저에서 실제 내용이 표시되는 영역, pc 뷰포트와 모바일 뷰포트는 다름
mate 태그에 지정
width : 뷰포트 가로
height : 뷰포트 세로
user-scalable : 사용자 확대/축소 가능 여부 ->(no/yes)
initial-scale : 초기 화면비율
maximum-scale : 최대 화면 확대 비율
minimum-scale : 최소 화면 축소 비율
뷰포트 단위
vw : 뷰포트 너비, 100vw=뷰포트 width의 100% -> *
vh : 뷰포트 높이, 100vw=뷰포트 height의 100% ->*
vmin : 뷰포트의 너비와 높이 중 작은 값
vmax : 뷰포트의 너비와 높이 중 큰 값
미디어 쿼리
접속하는 디바이스나 뷰포트에 따라 특정 css 스타일을 사용하는 방법 -> 뷰포트의 사이즈 별로 다른 속성 사용
중단점(breakpoint) : 특정 구간
미디어 쿼리 문법
기본형
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
ex)400px~600px까지 파랑 배경
@media (min-width:400px) and (max-width:600) {
body{
background-color: bule;
}
}
-> 중단점이 겹치면 밑에 있는 것 적용
Flexbox
html 요소를 배치, 정렬하는 css의 레이아웃 방식, 복잡한 계산 x
구성 : 배치할 html 요소(flex item)과 이것을 감싸고 있는 상위 부모 요소인 flex container로 구성
flex container : flex item을 감싸고 있는 부모 요소
flex item : flex container 속 아이템
ex)
flexbox 주축
row : 주축의 방향이 왼쪽에서 오른쪽 방향
row-reverse : 역방향
column : 주축의 방향이 위에서 아래
column-reverse : 역방향
flexbox 속성 분류
flex container : 전체적인 것에 관여
flex-wrap : item을 한 줄 또는 여러줄에 배치
-nowrap : 개행x, 1행에 배치(기본값), 각 item은 container에 들어갈 수 있는 크기로 축소
-wrap : item의 너비가 container보다 크면 개행함
justify-content : 메인 축 기준 수평 정렬
flex-start : main start(좌측)을 기준으로 정렬(기본값)
flex-end : main end(우측)를 기준으로 정렬
center : flex container의 중앙에 정렬
space-between : 첫번째와 마지막 flex item은 좌우 측면에 정렬, 나머지는 균등한 간격으로 정렬
spcae-around : 균등분할
align-content : 교차 축 기준 수직 정렬 - 라인 전체가 움직
flex-start : 위로 정렬
flex-end : 아래 정렬
center : 중앙 정렬
space-between : 첫번째와 마지막은 맨 위,아래 붗이고 나머지는 균등 정렬
space-around : 모든 값 균등 정렬
align-item : 라인을 기준으로 상 중 하로 나뉨
flex-start : 위로 정렬
flex-end : 아래 정렬
center : 중앙 정렬
** align-items는 flex line을 기준으로 정렬, align-content는 flex line을 정렬
flex item : 개별적인 것에 관여
order : item의 배치 순서 지