본문 바로가기
반응형

HTML+CSS34

Transform - rotate(), scale(), translate(), skew() Transform - rotate(), scale(), translate(), skew() 이전 포스팅에서 Transition에 대해서 정리를 했습니다. 트랜지션과 더불어 짝궁처럼 따라 다니는 속성이 바로 Transform이 아닐까 싶습니다. 트랜지션이 '변화'에 대한 영역을 제어한다면, 트랜스폼은 '변형'에 대한 영역을 컨트롤 하게 됩니다. 영화 의 변신하는 모습을 상상해보면 Transform 속성을 공부해보면 보다 이해가 쉬울 것입니다. 예제코드 아래와 같은 코드로 시작해보겠습니다. Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! 브라우저에서 확인을 해보면 다음과 .. 2023. 3. 29.
Interactive의 시작, transition 속성 2/2 - timing function Interactive의 시작, transition 속성 2/2 - timing function 지난 포스팅에서는 transition 속성의 기본적인 내용에 대해서 정리를 하고 예제 코드들을 살펴보았습니다. 이전 과정에 대해 이해가 잘 되었다면, 이번 포스팅에서 다룰 내용들을 이해함에 있어 크게 어려운 점은 없을 것이라고 예상이 됩니다. transition을 좀 더 세세한 방식으로 컨트롤 할 수 있는, timing function에 대해서 함께 살펴보도록 합시다. 예제코드 Transitions 브라우저를 실행해보고 마우스를 section에 올려 봅니다. div 박스들이 margin-left: 500px까지 부드럽게 이동해서 멈추는 동작을 확인할 수 있게 됩니다. transition: timing-funct.. 2023. 3. 24.
Interactive의 시작, transition 속성 1/2 - duration, delay Interactive의 시작, transition 속성 1/2 - duration, delay html을 이용해서는 주로 문서의 레이아웃을 구성한다고 이전 포스팅에서 정리를 해보았습니다. 레이아웃은 주로 static한 형태로서의 웹문서의 구성과 배치를 의미하게 되는데요, 보다 생동감 있은 interactive한 움직임을 표현하려면 반드시 transition 속성이 필요하게 됩니다. transition 속성을 부여하면 html 문서에서는 마치 마법 같은 일이 벌어지기 때문에 많은 사람들이 좋아합니다. 저 또한 역시 그렇습니다. transition을 자유자재로 다룬다는 것은 아주 흥미로운 일이 되기 때문입니다. 이번 포스팅에서는 다채로운 transition의 기본적인 내용들을 함께 살펴보면서, transit.. 2023. 3. 23.
Position 속성 정리(static, relative, absolute, fixed, sticky 비교) Position 속성 정리(static, relative, absolute, fixed, sticky 비교) HTML과 CSS를 학습하다 보면, 결국 document의 레이아웃을 잡는 문제로 귀결되는 경우가 많습니다. 레이아웃을 구성하는 단계에서 가장 기본적으로 맞딱뜨리게 되는게 position 속성이 될텐데요, 이번 포스팅에서는 원하는 엘리먼트를 레이아웃에 적절하게 배치하기 위한 position의 기본 적인 속성에 대해서 정리해보기로 합니다. 예제 코드 position 속성 Static Live Server를 실행해보면, 아래와 같은 형태에서 position에 대한 속성들을 살펴보기로 합니다. position : static css에 아래의 코드를 추가해봅시다. #static #middle { posi.. 2023. 3. 21.
반응형

티스토리툴바