Web/CSS (7) 썸네일형 리스트형 offsetTop의 기준값 바꾸기 타겟 요소.offsetTop은 스크롤(속도)의 영향을 받지 않아야 하는 것, 고정적이어야 하는 것을 필요로 할 때 유용하다. offsetTop은 기본적으로 document의 상단에서 해당 요소가 얼마나 떨어져 있는지의 값을 나타낸다. 그런데 만약, 내가 구하고자 하는 요소의 offsetTop값이 문서가 기준이 아니라 타겟의 부모 요소를 기준으로 하고 싶다면 (쉽게 말해, 문서 상단에서 타겟 요소 상단 까지 사이의 거리가 아닌, 부모 요소의 상단에서 해당 요소 상단부분 까지의 거리) position 속성을 이용해서 offsetTop의 기준 값을 바꿀 수 있다. 우리가 position: absolute를 사용할 때 처럼, 기준으로 잡을 부모 요소에 position: relative를 해주면 된다. CSS 지원 확인 사이트 https://caniuse.com/#home Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu caniuse.com CSS 3D:perspective - 카드 뒤집기 효과 perspective 속성은 원근감을 통해 대상을 입체적으로 보이게 표현한다. 사용법 - 3D로 표현할 요소의 부모 요소에 perspective: 숫자값px; 라는 속성을 사용한다. 여기서 perspective값의 크기는 사용자와 대상 요소와의 거리감을 나타낸다고 생각하면 된다. 즉, 값이 크면 좀 더 멀리서 떨어져서 보는 것 같은 느낌. 값이 작으면 가까이서 보는 느낌을 준다. 즉 가까우면 3D 효과가 더 극적으로 나타나고, 값이 크면 좀 더 자연스럽게 나타난다고 생각하면 된다. perspective 속성을 준 부모와 타겟 요소 사이에 다른 요소들이 존재하는 상황이라면, 그 각각의 요소들에 transform-style: preserve-3d 를 적용해 줘야한다. See the Pen 카드 뒤집기 by .. css로 애니메이션 넣기: transition, animation voltnuna.tistory.com/55 css transform transform 이름에서 알 수 있듯이 형태를 변환하는 동작을 한다. 보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다. transform-origin를 사용해서 기준점 위치를 변�� voltnuna.tistory.com Transition transform할 대상에 적용하는 속성으로 transform에 애니메이션을 넣어 부드럽게 처리하고 싶을 때 사용한다. 즉, 특정 요소의 상태(너비나 높이 색상 등등--)가 변화할 때, 그 변화하는 과정을 부드럽게 처리할 수 있다. transition(축약형) duration, timing-function, delay 순서로 값을 적어주면 된다. transition-d.. CSS FIex Flex 속성은 컨테이너에 적용해야하는 속성과, 컨테이너 안의 아이템에 적용해야하는 속성으로 나뉘어 진다. display: flex // 컨테이너는 블록 형태로 있지만, 그 안의 아이템들이 inline 처럼 배치된다. See the Pen rNVLezQ by volt-nuna (@ddonni0426) on CodePen. flex-direction 정렬 방향 //row가 디폴트 row, colum (reverse도 가능) flex-wrap:(nowrap, wrap, wrap-reverse) //브라우저가 컨텐츠 크기보다 줄었을 때 어떻게 할 건지를 결정 align-content: // 2줄 이상일 때,아이템을 어떻게 정렬할 것인지 (wrap 설정이 된 상태에서 사용) => 축약형 flex-flow: di.. css transform transform 이름에서 알 수 있듯이 형태를 변환하는 동작을 한다. 보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다. transform-origin를 사용해서 기준점 위치를 변경할 수 있다. 속성: left(0%), top(0%), center(50%), right(100%), bottom(100%) (키워드 대신 괄호 안의 숫자값도 넣을 수 있음) ex) transform-origin: left top; 또는 transform-origin: 0% 0%; 이렇게 하면 왼쪽 상단이 기준이 됨. 요소 형태 변화가 다른 요소들의 위치나 형태에 영향을 주지 않는다. cf) width와 height에 값을 줘서 형태에 변화를 주면 변한 만큼 주변 요소들의 위치에도 영향을 미치는.. CSS:position, float position 속성 차원 부모-자식간 마진병합 top,right, bottom, left 적용 가능여부 자식의 높이 값이 부모에게 영향 z- index 적용 static 2차원 O X O X fixed 3차원 X O X O relative 2,3차원 O O O O absolute 3차원 X O X O (참고- fixed는 주로 bar에 사용) *부모-자식간 마진 병합? (부모와 자식이 둘 다 2차원일 경우 발생) 부모와 자식 각각 마진 값을 줬을 경우, 마진값이 더 큰 쪽에 병합된다는 뜻인데 예를들어, 부모에 margin-top: 3px, 자식에 margin-top: 5px; 줬을 때 마진 값이 더 큰 값에 병합되어 부모도5px, 자식도5px 만큼의 margin-top 공간이 생긴다. *float도 3.. 이전 1 다음
