▼애니메이션 (animation) ▷hover 같이 반응형이 아닌 자동으로 움직임 ▷시작점(0%) - 중간지점(50%) - 끝나는 지점(100%) : 시간대가 있음 ▷함축적으로 적용가능 ▷애니메이션 진행 후 기본값으로 돌아옴 - animation-name: '이름'; (class명이 아니어도 됨) - animation-duration: 진행 시간s; - @keyframes '이름'{ 0%{'변화 값'} 50%{'변화 값'} 100%{'변화 값'} } ㄴex) .box1{width:100px; height:100px; animation-name:move; animation-duration: 5s;} @keyframes move{ 0%{font-size:20px; background: #ccc;} 50%{f..

▼이미지 외곽 여백지우기 ▷이미지는 고유의 여백(marign,padding이 아닌)이 있음 -이미지를 display:block; 시키면 여백이 지워짐 -block이 되면 text-align:center;가 되지 않음 -block 상태에서 가운데 정렬을 하고 싶다면 margin:0px auto; ▼부모한테 클리핑 마스크 ▷부모 영역을 나가면 보이지 않음 - 부모에게 > overflow:hidden; - X,Y축을 입력하면 하나의 축만 가릴 수 있음 ▼마스크 mask ▷---{mask-image:linear-gradient( --deg, #---, transparent); -webkit-mask-image:linear-gradient(--deg, #---. transparent);} -색상이 있어야함 (사진..

▼transform (변형) >크기(scale), 이동(translate), 회전(rotate), 기울기(skew) 변형 가능 ▷크기 (scale) -scale('숫자') > 숫자만큼 ''커짐 ㄴex) .box1{transform:scale(2);} > 두배로 커짐 -scaleX('숫자') > X축만 커짐 ㄴex) .box1{transform:scaleX(2);} > X축만 두배로 커짐 -scale('소수점') > 숫자만큼 ''줄어듦 ㄴex) .box1{transform:scale(0.5);} > 반으로 줄어듦 -scale('숫자, 숫자') > 가로, 세로 비율이 다르게 커짐 ㄴex) .box1{transform:scale(1.2, 2);} > 가로는 1.2배 세로는 2배 커짐 ▷이동 (translate..

▼전체 높이 채우기 ▷vw = View Width ▷vh = View Height -보이는 홈페이지 높이를 모두 채우기 ㄴex) .element{width:100%; height:100vh;} ▼header에 margin ▷header에 margin을 주면 배경 이미지도 같이 내려온다 -배경이미지(부모)의 높이는 자식의 높이에 영향을 받는다 -header(자식)이 내려오면 배경이미지(부모)도 같이 내려온다 -거리를 두고 싶다면 margin이 아닌 padding으로 벌리기 ▼글자 정렬 ▷홈페이지 전체적으로 중앙에 위치하고 정렬을 하고 싶을 때 -정렬하고자 하는 태그에 같은 width 값을 주고 -margin:0px auto; 적용 ▼박스크기 조절 ▷boder는 크기에 영향을 줌 -외곽선이 생겨 선굵기 만큼..

▼구글 아이콘 -구글에 '구글 아이콘' 검색 -원하는 아이콘 선택 -Static icon font 복사 > head에 붙여넣기 -Inserting the icon 복사 > body 적용하고 싶은 곳에 붙여넣기 ▷아이콘 꾸미기 -가져온 icon class 뒤에 한칸 띄고 class 이름 붙이기 ㄴex) "기존이름 새로운이름" -이미지가 아닌 글자로 적용되어 색상변경 가능 ▼우선순위 높이기 ▷우선순위 높이고 싶은 태그 뒤에 !important 입력 ㄴex) font-size:40px!important;

▼이미지와 글자를 이동 ▷position -position:relative - 움직이는박스의 부모 -position:absolute - 움직이는 박스에 적용 -position:fixed - 현재 화면에 고정 -좌표: left / right / top / bottom ▷relative -크기를 인식할 수 있어 자리를 차지함 -위치값을 줄 수 있음 (top, bottom, left, right) -absolute가 움직이는 범위의 기준이됨 ▷absolute -relative 속성을 준 원하는 태그안에 있도록 구조를 짜야함 -공중에 떠 있는 상태로 (블록요소가 아님) 크기가 인식안됨 -absolute시 범위를 인지하지 못함, 직접 크기를 줘야함 -위치값을 줄 수 있음 (top, bottom, left, rig..