▼form (텍스트 입력) ▷body에 , 꼭! 안에 넣기 ㄴex) ▼버튼 만들기 ▷form과 같은 부모에 button 입력 ㄴex) send ▼넓이 자동계산 ▷calc(전체 / 나눌 숫자); ㄴex) li{width:calc(100% / 4);} ▷공통 여백주기 (띄고 -'숫자') ㄴex) li{width:calc(100% / 4 - 10px);} > 100%에서 10px를 빼고 4로 나누겠다

▼background ▷배경이 적용되려면 글자또는 이미지가 태그안에 있어야함 또는 height값을 강제로 넣어야함 -background-color:#ff0 (배경색) ▷배경이미지 삽입/변경 -background-image:url ("이미지경로"); ㄴ 박스의 크기만큼 배경이 채워짐 -background-repeat:no-repeat; ㄴ배경이미지가 반복 되지 않음 -background-size:cover; ㄴ박스 이미지 큼 배경이미지 크기를 늘림 -background-position: X축 Y축; ㄴ배경 이미지 위치는 X축: left / center / right Y출 top / center bottom ㄴ배경의 위치는 키워드로 할 수도 있고 px, % 단위도 적용가능 (왼쪽 상단 기준) => 함축해서 ..

▼ favicon ▷웹 브라우저 탭에 표시되는 이미지 ▷ .ico 확장자를 사용한다 ▷웹사이트를 식별하는데 도움을 주어 사용자가 쉽게 기억할 수 있다 ▼탭에 아이콘 넣기 ▷ ㄴex) ▼시멘틱 태그 ▷의미있는 태그 - 를 로 사용 가능

▼애니메이션 (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..