목록CSS (4)

크루시의 개발공부

[CSS] Animation 속성 + @keyframes 알아보기! (name, duration, timing-function, delay, iteration-count, direction)

Animation - 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 보다 부드럽게 전환시켜 줍니다. ... .animation { animation-name: changeColor; animation-duration: 3s; animation-timing-function: linear; animation-delay: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes changeColor { from { background-color: green; } to { background-color: yellow; } } 애니메이션의 장점? - 앞서 포스팅 되었던 transition 보다 훨씬 규모가 크고 ..
CSS 2022. 9. 17. 23:58
[CSS] Transition 속성 + :hover 알아보기! (property, duration, timing-function, delay)

Transition - CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. ... .transition { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } 1. transition-property - 효과를 적용하고자 하는 css 속성 ... transition-property: width; /* width 변경을 하고 싶다! */ width, height 식으로 여러개 적을 수도 있다. 2. transition-duration - 효과가 나타나는데 걸리는 시간 ... transition-duration: 2s; /* 2초에 걸쳐 효..
CSS 2022. 9. 15. 01:08
[CSS] Transform 속성 알아보기! (rotate, scale, skew, translate)

Transform 선택자 { transform: 속성값(); } 기본 CSS 형태와 다를바 없다. 예시와 함께 기억해두자! 1. rotate() - deg (각) 단위를 쓰며 입력한 각도만큼 기울인다. ('- '단위도 가능하다. ex. -20deg) 2. scale() - 크기를 변경할 수 있다. 첫번째 받은 인수는 width값, 두번째는 height 로 곱하여 적용된다. 3. skew() - deg, rad, grad 단위를 쓴다. - 첫번째 인수로는 X축에 +값은 우측으로 -값은 좌측으로 기운다. 두번째 인수로는 Y축에 +값은 아래쪽으로 -값은 윗쪽으로 기운다. 4. translate() - x축 y축으로 원하는대로 이동시킬 수 있다. >> 적용 예시 보기! See the Pen Untitled by..
CSS 2022. 9. 14. 21:58
[CSS] CSS란? (feat. Cascading)

- CSS란? - CSS의 정식명칭은 Cascading Style Sheets 의 약자로 HTML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트언어입니다. 즉, HTML을 꾸며주는 역할을 하고 있습니다. 1. CSS 구성 요소 선택자 { 속성: 속성값; } 선택자: 디자인을 적용할 HTML 영역 속성: 어떤 디자인을 적용할지 정의 속성값: 구체적으로 명령하며 세미콜론(;)은 필수로 입력 2. CSS 연동 방법 세가지 1) Inline Style Sheet - 태그 안에 직접 CSS를 적는 방법 Hello World! 2) Internal Style Sheet - 태그안에 CSS를 적는 방법 ... 3) External Style Sheet - 태그를 통해 외부 시트를 불러오는 방법이다. ++ ..
CSS 2022. 9. 14. 20:26
이전 Prev 1 Next 다음