전체 글 (265) 썸네일형 리스트형 [CSS] transform 변환 속성 - perspective, perspective-origin ▶ perspective : 하위 요소를 관찰하는 원근 거리를 설정. - 속성 값으로 단위 입력. px, em 등의 단위 지정. - perspective() 함수와는 다르게 하위 요소를 관찰. - 값이 크면 원근감이 커지고 낮으면 가깝게 느껴짐. [perspective 속성과 함수의 차이점] - perspective 속성 - 적용 대상: 관찰 대상의 부모요소. - 관찰 대상이 여럿이면 부모 요소에 속성 사용. 관찰 대상이란 원근법을 의미함. - 원근법의 기준점 설정: perspective-origin. - perspective() 함수 - 관찰 대상 자체가 적용 대상. - 관찰 대상이 하나면 관찰 대상 자체에 함수 사용. - 관찰하는 기준점 설정 시 transform-origin 사용. - perspec.. [CSS] transform 변환 속성 - transform-style ▶ transform-style - transform-style : 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것. - flat: 자식 요소의 3d 변환을 사용하지 않음. 기본 값. - preserve-3d: 자식 요소의 3D 변환 사용. [CSS] transform 변환 속성 ▶ transform 변환 속성. - transform-origin: 요소의 변환이 일어나는 특정한 기준점 설정. - 0% 0%는 좌측 상단, 100% 100%는 우측 하단을 의미. - X축: left, right, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Y축: top, bottom, center의 키워드 사용. 또는 %, 단위 값 사용. 기본 값 50%. - Z축: 단위 사용. 기본값 0. - transform-style: 3차원 변환 요소의 자식에서도 또 다른 3차원 변환을 사용할지 설정하는 것. - perspective: 하위 요소를 관찰하는 원근 거리를 설정. - perspective-origin: 원근 거리 기준점 설정. - backface-visibilit.. [CSS] transform 변환 함수 ▶ transform 2D 변환 함수 - translate(x, y): 이동. x축, y축. 단위 입력. - x축으로 몇 px 이동, y축으로 몇 px 이동할 것인지. - translateX: x축에 대한 이동. 단위 입력. - translateY: y축에 대한 이동. 단위 입력. - scale(x, y): 크기(x축 y축). 단위는 없음. 배수 입력. - scale(1)은 1배. 현재와 동일. - 확대하거나 축소할 때 사용. - scaleX: 크기. x축. 단위는 없음. 배수 입력. - scaleY: 크기. y축. 단위는 없음. 배수 입력. - x축이나 y축으로 확대.. - rotate(degree): 회전(각도). 단위는 deg. - 45도 기울일 경우 45deg. - skew(x-deg, y-deg.. [CSS] transform ▶ transform - 요소에 변환 효과(변형)를 지정. - 요소를 회전시키거나 비틀거나 확대/축소, 이동시키는 등. - 속성은 하나지만 그 안에 다양한 값을 가질 수 있음. 여러 함수들이 존재. [사용 예시] transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; .box{ transform: rotate(2deg) translate(10px, 0); } - rotate는 회전을 의미. - translate는 이동을 의미. x축, y축 순으로 값을 입력. position: relative;와 유사하게 동작. left: 10px;를 입력한 것과 유사하게 동작함. - skew: 비틂, 기울임. - scale: 크기. - 변형 효과에는 2D와 3D가.. [CSS] tansition ▶ transition - css 속성의 전환 효과를 지정. - css 속성의 시작과 끝을 지정(전환 효과)해 중간 값을 애니메이션 처리. [속성] - transition-property: 전환 효과를 사용할 속성의 이름. 기본값은 all. - 전환 효과를 적용할 특정한 속성을 일부 지정할 수도 있고, 지정하지 않으면 전체 속성에 전환 효과가 지정됨. - transition-duration: 전환 효과의 지속 시간 설정. 기본값은 0s. - s는 second. 0초가 기본값. 1s, 0.5s, .5s, ... - s 단위는 초 단위를 의미하지만 millisecond 단위로 적용할 수도 있음. ex. 1000ms = 1s - transition-timing-function: 타이밍 함수 지정. 기본값은 e.. [CSS] background-size ▶ background-size - 배경 이미지의 크기를 지정. [속성 값] - auto: 배경 이미지가 원본 크기로 표시됨. 기본 값. - 단위: px, em, % 등 단위로 지정. - width/height 형태로 입력 가능. ex. 120px 370px - width만 입력하면 비율에 맞게 지정됨. ex. 120px. - cover: 배경 이미지의 크기 비율을 유지하여 요소의 더 넓은 너비에 맞춰짐. - 이미지가 잘릴 수 있음. - contain: 배경이미지의 크기 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐. - 이미지가 잘리지 않음. - contain은 이미지 전체가 다 나오지만 요소에 빈 공간이 보일 수 있는 문제점도 일부분 가지고 있다는 점에 유의. [사용 예시] - 이미지가 출력되기는 하.. [CSS] background-attachment ▶ background-attachment - 요소가 스크롤될 때 배경 이미지의 스크롤 여부를 설정. [속성 값] - scroll: 배경 이미지가 요소를 따라 같이 스크롤됨. 기본 값. - fixed: 배경 이미지가 viewport에 고정되어 요소와 같이 스크롤되지 않음. - 요소는 스크롤되지만 배경 이미지는 스크롤되지 않는 것. - local: 요소 내 스크롤 시 배경 이미지가 같이 스크롤됨. - 많이 사용되지는 않음. [사용 예시] - background-attachment: scroll;은 기본 값이므로 지정하지 않아도 값이 적용된 것과 동일함. - 스크롤 시 배경 이미지도 스크롤되어 함께 올라감. - background-attachment: fixed; 지정 시 배경 이미지는 화면에 고정된 상태... 이전 1 ··· 11 12 13 14 15 16 17 ··· 34 다음
