코딩하는 감자

perspective : 하위 요소를 관찰하는 원근 거리를 지정(*함수가 아닌 속성) perspective 속성과 함수의 차이점 -속성 perspective: 600px 관찰 대상의 부모에 적용 기준점 설정 : perspective-origin -함수 transform: perspective(600px) 관찰 대상에 적용 기준점 설정 : transform-origin backface-visibility : 3D변환으로 회전된 요소의 뒷면 숨김 여부 visible(기본값) : 뒷면 보임 hidden : 뒷면 숨김 transform: rotateY(180deg); backface-visibility: hidden; -> 뒷면(180도로 뒤집어진 부분)이 보이지 않게 됨

transform : 요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; 개별 속성들 2D(2차원)변환 함수 translate(x,y) : 이동(x축,y축) translateX(x) : 이동(x축) translateY(y) : 이동(y축) scale(x,y) : 크기(x축, y축) scaleX(x) : 크기(x축) scaleY(y) : 크기(y축) rotate(degree) : 회전(각도) skew(x,y) : 기울임(x축, y축) skewX(x) : 기울임(x축) skewY(y) : 기울임(y축) matrix(n,n,n,n,n,n) : 2차원 변환 효과 3D(3차원)변환 함수 translateZ(z) : 이동(z축) tran..

transiton : 요소의 전환(시작과 끝)효과를 지정하는 단축 속성 transition: 속성명 지속시간(필수속성) 타이밍함수 대기시간; 개별 속성들 transition-property : 전환 효과를 사용할 속성 이름을 지정 all(기본값) : 모든 속성이 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 transition-duration : 전환 효과의 지속시간을 지정 0s(기본값) : 전환 효과 없음 시간 : 지속시간(s)을 지정 transition-timing-function : 전환 효과의 타이밍(Easing) 함수를 지정 ease(기본값) : 느리게 - 빠르게 - 느리게 linear : 일정하게 ease-in : 느리게 - 빠르게 ease-out : 빠르게 - 느리게 ease-in-o..

order : Flex Item 의 순서 0(기본값) : 순서 없음 숫자 : 숫자가 작을수록 먼저 order: -1; > order: 0; > order: 2; > order: 17; flex-grow : Flex Item의 증가 너비 비율 0(기본값) : 증가 비율 없음 숫자 : 증가 비율 flex-grow: 1; flex-grow: 2; flex-grow: 1; -> 1대 2대 1 비율로 너비 증가 flex-shrink : Flex Item의 감소 너비 비율 1(기본값) : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 *감소 비율을 0으로 입력하면 감소되지 않음 기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만 flex-shrink: 0; 일 때의 Item..

flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap(기본값) : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 *대부분의 경우에는 flex를 사용하여 수평 정렬을 한다. justift-content : 주 축의 정렬 방법 flex-start(기본값) : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 centet : Flex Items를 가운데 정렬 space-between : 각 Flex Items 사이를 균등하게 정렬 space-around : 각 Flex Items의 외부 여백을 균등하게 정렬 display: flex; justify-content: flex-end; ->..

display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 Flex Container : flex가 부여된 요소 Flex Items : flex가 부여된 요소의 자식 요소 Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다. Flex Container 에 부여할 수 있는 속성 display flex-flow, flex-direction, flex-wrap justify-content align-content align-items Flex Items 에 부여할 수 있는 속성 order flex, flex-g..

z-index : 요소의 쌓임 정도를 지정 auto(기본값) : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을수록 위에 쌓임(음수 가능) *z-index를 사용할 때 값을 999와 같이 큰 값은 사용하지 않는 것이 좋다 position 값이 없는 조건에서는 있는 값과 다른 z-index 위치를 갖는다. 요소의 display가 변경됨 position 속성 값으로 absolute, fixed가 지정된 요소는, display 속성이 block 요소로 자동으로 변경됨 display: block; position: absolute; top 30px; left: 30px; z-index: 1; position: absolute; top: 30px; left: 30px; z-index: 1; 따라서 위의 값와 ..