transformtransform: 변환함수1 변환함수2 변환함수3 …;transform: 원근법 이동 크기 회전 기울임;요소의 변환 효과📍 변환 함수2D 변환 함수translate(x, y): 이동(x축, y축)translateX(x): 이동(x축)translateY(y): 이동(y축)단위: pxscale(x, y): 크기(x축, y축)단위: 숫자, 소수점(배수)rotate(degree): 회전(각도)단위: degskewX: 기울임(x축)skewY: 기울임(y축)단위: deg3D 변환 함수rotateX(x): 회전(x축)rotateY(y): 회전(y축)단위: degperspective(n): 원근법(거리)단위: px원근법 함수는 변환 함수 중 제일 앞에 작성 perspective(변환 함수 X, 속성..

전환요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어 주는 것 transition: 속성명 지속시간[필수] 타이밍함수 대기시간;요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 📍 개별 속성transition-property(속성명)전환 효과를 사용할 속성 이름을 지정값all [기본 값] : 모든 속성에 적용속성 이름: 전환 효과를 사용할 속성 이름 명시transition: width 1s; /* 가로 너비 전환에만 적용 */ transition-duration(지속시간)전환 효과의 지속 시간을 지정값0s [기본 값] : 전환 효과 없음시간: 지속 시간(s)을 지정transition: width .5s, /* 가로 너비가 0.5초만에 전환 */ background-color 2s; /* 배..

플렉스(정렬) 1차원 레이아웃 Flex Containerdisplay: flex;가 부여된 요소📍 속성displayFlex Container의 화면 출력(보여짐) 특성값flex: 블록 요소와 같이 Flex Container 정의inline-flex: 인라인 요소와 같이 Flex Container 정의 flex-direction주 축을 설정값row [기본 값] : 행 축(좌 → 우)row-reverse: 행 축(우 → 좌)column: 열 축(위 → 아래)column-reverse: 열 축(아래 → 위) flex-wrapFlex Items 묶음(줄 바꿈) 여부값nowrap [기본 값] : 묶음(줄 바꿈) 없음wrap: 여러 줄로 묶음 justify-content주 축의 정렬 방법값flex-start [기..

position요소의 위치 지정 기준 📍 valuestatic [기본 값]기준 없음 relative요소 자신을 기준으로 배치위치가 이동해도 위에서 부터 쌓이는 주변과의 상호작용이 무너지지 않음 absolute위치 상 부모 요소를 기준으로 배치위에서 부터 쌓이는 주변과의 상호작용이 무너지고 공중에 붕 뜸상위 요소를 위치 상 부모 요소로 지정해줘야 함상위 요소에 position: relative; 와 같이 위치를 지정해줘야 함모든 상위 요소에 위치가 지정되어 있지 않다면 뷰포트가 위치 상 부모 요소display 속성이 block으로 변경됨일반적으로는 가로 너비가 최대한으로 늘어나려고 시도하지만 absoulte는 최소한으로 줄어들려고 시도 fixed뷰포트(브라우저)를 기준으로 배치위에서 부터 쌓이는 주변과의..

background-color요소의 배경 색상값transparent [기본 값] : 투명함색상 background-image요소의 배경 이미지 삽입값none [기본 값] : 이미지 없음url(”경로”): 이미지 경로 background-repeat요소의 배경 이미지 반복값repeat: 이미지를 수직, 수평 반복repeat-x: 이미지를 수평 반복repeat-y: 이미지를 수직 반복no-repeat: 반복 없음 background-position요소의 배경 이미지 위치값방향: top, bottom, left, right, center 방향단위: px, em, rem 등 단위로 지정 background-size요소의 배경 이미지 크기값auto [기본 값] : 이미지의 실제 크기단위: px, em, rem 등..

글꼴, 문자폰트 제어글꼴font-style글자의 기울기값normal [기본 값] : 기울기 없음italic: 기울어진 글자 font-weight글자의 두께값normal, 400 [기본 값] : 기본 두께border, 700: 두껍게100 ~ 900: 100 단위의 숫자 9개 font-size글자의 크기값16px [기본 값]단위: px, em, rem 등 단위로 지정 line-height한 줄의 높이, 행간과 유사글자 수직 정렬 가능값normal [기본 값]숫자: 요소의 글꼴 크기의 배수로 지정ex) line-height: 1.4;단위: px, em, rem 등 단위로 지정 font-family: 글꼴1, “글꼴2”(띄어쓰기 등 특수문자가 포함된 글꼴은 큰 따옴표로 묶어야 함), … 글꼴계열(필수 작성, ..

박스 모델HTML 요소의 기본적인 모양을 만들어내는 속성 가로/세로 너비width/height요소의 가로/세로 너비값auto [기본 값] : 브라우저가 너비를 계산단위: px, em, vw 등 단위로 지정div { width: 100px; /* 가로 너비 */ heigth: 100px; /* 세로 너비 */} max-width, max-height요소가 커질 수 있는 최대 가로/세로 너비값none [기본 값] : 최대 너비 제한 없음단위: px, em, vw 등 단위로 지정 min-width, min-height요소가 작아질 수 있는 최소 가로/세로 너비값0 [기본 값] : 최소 너비 제한 없음단위: px, em, vw 등 단위로 지정 💡 단위px: 픽셀%: 상대적 백분율em: 요소의 글꼴 크기10em..

기본 선택자* (전체 선택자)모든 요소를 선택* { color: red;}ABC (태그 선택자)태그 이름이 ABC인 요소 선택li { color: red;}.ABC (클래스 선택자)HTML class 속성의 값이 ABC인 요소 선택.orange { color: red;}#ABC (아이디 선택자)HTML id 속성의 값이 ABC인 요소 선택#orange { color: red;} 복합 선택자ABCXYZ (일치 선택자)선택자 ABC와 XYZ를 동시에 만족하는 요소 선택태그 선택자를 먼저 적는 것이 좋음span.orange { color: red;}ABC > XYZ (자식 선택자)선택자 ABC의 자식 요소 XYZ 선택ul > .oragne { color: red;}ABC XYZ (하위 선택자)선택자 ABC의 ..