본문 바로가기
728x90
반응형

CSS127

[CSS]반응형 레이아웃 - 순서변경 Flex flex 속성과 order 를 이용해 반응형에 따라 레이아웃의 순서를 변경할 수 있다. See the Pen flex layout by gahyun (@gahyun) on CodePen. 2019. 5. 23.
[CSS] 다양한 레이아웃을 이용해 반응형 게시판 양식만들기 (table / grid / ul li / flex) See the Pen layout by gahyun (@gahyun) on CodePen. 2019. 5. 23.
[CSS]animate steps를 이용해 타이핑 효과 내기 간단하게 타이핑 효과를 구현할 수 있다. See the Pen 글자 타이핑 효과 -css by gahyun (@gahyun) on CodePen. width를 steps로 늘려가는 애니메이션 효과로 타이핑느낌을 낼 수 있다. 다만 일정한 width를 늘려가므로 띄어쓰기나 .과 같은 특수문자가 문장 중간에 끼여있다면 조금 어색한 느낌이 나거나 잘려나오는 효과가 나타날 수 있다. 좀더 정확하게 구현하고 싶다면 자바스크립트를 이용해 구현할 수 있다 [javascript] - [JAVASCRIPT/JQUERY] 글자 타이핑 효과 2019. 5. 22.
[CSS]FLEX 기초2 [CSS3] 레이아웃 flex 이용하기 이글을 정리할때는 뭔가이해가 안갔는데 이제 어떻게 써야할지 알거같아서 다시 정리! .box{ text-align: center; height: 10vh; flex-grow: 1; flex-shrink: 1; align-content: center; justify-content: center; flex-basis: 300px; } .box-1{ background: hotpink; flex-grow: 0; } .box-2{ background: purple; flex-shrink: 0; } .box-3{ background: blueviolet; flex-grow: 0; flex-shrink: 0; } .box-4{ background: plum; } .box-5{ .. 2019. 5. 22.
728x90
반응형