강의/패스트캠퍼스 0원 챌린지30 패스트캠퍼스 챌린지 10일차 - Part 1. CSS 속성(4) 22. 변환 (1) transform: 변환함수1 변환함수2 변환함수3 … ; transform: 원근법 이동 크기 회전 기울임; 2D 변환 함수 translate(x,y) 이동(x축, y축) / translateX(x) 이동(x축) / translateY(y) 이동(y축) - px scale(x,y) 크기(x축, y축) - 배수 rotate(degree) 회전(각도) / skewX(x) 기울임(x축) / skewY(y) 기울임(y축) - deg 3D 변환 함수 perspective(n) 원근법(거리) - px !!원근법 함수는 제일 앞에 작성!! rotateX(x) 회전(x축) / rotateY(y) 회전(y축) - deg 23. 변환 (2) perspective : 하위 요소를 관찰하는 원근 거리를 .. 2023. 3. 1. 패스트캠퍼스 챌린지 9일차 - Part 1. CSS 속성(3) 18. 플렉스(정렬) Container (1) 1차원 레이아웃 /* 부모 요소 Container */ display: flex; display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 flex-direction : 주 축을 설정 row : 행 축 (좌⇒우) row-reverse : 행 축 (우⇒좌) column : 열 축 (위⇒아래) coluumn-reverse : 행 축 (아래⇒위) 19.플렉스(정렬) Container (2) flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 .. 2023. 2. 28. 패스트캠퍼스 챌린지 8일차 - Part 1. CSS 속성(2) 14. 배경 background-image: url("경로"); background-size: 50px; background-repeat: no-repeat; background-color: 요소의 배경 색상 transparent : 투명함 색상 : 지정 가능한 색상 background-image: 요소의 배경 이미지 삽입 none : 이미지 없음 url(”경로”) : 이미지 경로 background-repeat: 요소의 배경 이미지 반복 repeat : 이미지를 수직, 수평 반복 repeat-x : 이미지를 수평 반복 repeat-y : 이미지를 수직 반복 no-repeat : 반복 없음 background-position 요소의 배경 이미지 위치 0% 0% : 0%~100% 사이 값 방향 : top,.. 2023. 2. 27. 패스트캠퍼스 챌린지 7일차 - Part 1. CSS 속성(1) 1. 개요 속성 (Properties) 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) : 수평 전환 변환 띄움 : 띄워서 다른 요소가 자연스럽게 흐를 수 있게 애니메이션 그리드 : 행과 열 가진 레이아웃 다단 필터 2. 너비(width, height) width, height : 요소의 가로/세로 너비 auto : 브라우저가 너비를 계산 단위 : px, em, vw 등 단위로 지정 인라인 요소 : width/height - 포함한 콘텐츠 크기만큼 자동으로 줄어듬 블록 요소 : width - 부모 요소의 크기만큼 자동으로 늘어남 / height - 포함한 콘텐츠 크기만큼 자동으로 줄어듬 max-width, max-height : 요소가 커질 수 있는 최대 가로/세로 너비 none : 최대 너비 제한 없음.. 2023. 2. 26. 이전 1 ··· 3 4 5 6 7 8 다음
