안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

스타일 시트 (CSS, Sass) (3)

[CSS] 헷갈리기 쉬운 transition, transform, translate 정리

이번 포스팅에서는 그 이름부터 헷갈리는 CSS의 transition, transform, translate에 대해 한 번 정리해볼 것이다. 단, 각각의 기능에 대한 자세한 설명보다는 이 셋을 구별하기 위한 각각의 개략적인 특징에 대해서만 알아볼 것임을 참고해주기 바란다. 1. transition CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다. 예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 ..

[CSS] 애니메이션(animation), 키프레임(@keyframes)

CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다. 이는 JavaScript를 사용하지 않기 때문에 JavaScript를 몰라도 애니메이션을 구현할 수 있다는 장점을 가지며, 무엇보다 JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다는 특징이 있다. 이러한 애니메이션은 이름이 animation-으로 시작하는 속성을 사용하여 구현할 수 있으며, 애니메이션의 시작과 끝을 포함하여 중간의 특정 시점에 엘리먼트가 어떤 모습을 가져야 하는지에 대한 정보를 담은 @keyframes라는 별도의 규칙을 직접 정의하여 사용하게 된다. 1. animation-name 속성 애니메이션 과정의 각 시점에 ..

[CSS] Flex (Flexible Box)

CSS의 Flex(Flexible Box)는 개별 요소들의 수직/수평 레이아웃 구성을 용이하게 해주는 편리한 기능이다. 많은 경우 display: block 혹은 display: inline-block으로 수직/수평 레아이웃 구성을 시도하지만, Flex를 이용하면 보다 직관적인 방법으로 레이아웃 구성이 가능하며 block과 inline-block을 사용할 때 발생할 수 있는 문제도 막을 수 있다. Flex는 각각의 개별 요소를 나타내는 Flex Item(이하 Item), 그리고 그것들을 담고 있는 Flex Container(이하 Container)로 이루어져 있다. 여기서는 Container와 Item에서 사용되는 주요 속성 값들을 정리하였다. * Flex 연습해보기 : http://flexboxfrog..