본문 바로가기

Front-End/CSS4

[CSS] 무료 이미지 다운로드 사이트 정리 1. pexels https://www.pexels.com/ko-kr/ 무료 스톡 사진 · Pexels Photo And Video Challenge Travel Share photos of how you like to travel. www.pexels.com 2019. 12. 27.
[CSS] spinner 참고 사이트 https://loading.io/spinner/ Build Yourself a Right GIF Spinner / loading.io customize and build gif, svg and css from our handcrafted beautiful spinner collection. loading.io 2019. 5. 23.
[CSS] flex 1. order : flex 항목의 순서를 지정합니다. DOCTYPE html>.flex-container { display: flex; align-items: stretch; background-color: #f1f1f1;} .flex-container>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;}The order Property Use the order property to sort the flex items as you like: 1 2 3 4 2. flex-grow : flex 항목이 다른 flex 항목에.. 2018. 12. 12.
[CSS] Flexbox float나 positioning을 사용하지 않고도 배치 구조를 쉽게 설계할 수 있도록 합니다. 1.Flexbox 요소- Flexbox 모델을 사용 하려면 먼저 flex container를 정의해야 합니다. - flex container의 직접적인 자식요소는 자동으로 flex 항목이 됩니다. 2.flex container 속성 2-1. flex-direction : flex 방향 속성은 container가 항목을 쌓으려는 방향을 정의합니다. ① column : 위에서 아래 방향으로 수직 정렬 합니다. DOCTYPE html>.flex-container { display: flex; flex-direction: column; background-color: DodgerBlue;} .flex-containe.. 2018. 12. 11.