분류 전체보기212 flex 잠깐 정리 https://www.youtube.com/watch?v=7neASrWEFEM&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC 드림코딩 채널을 보면서 복습하기 위해서 막써보자. flexbox에 도움 줄 링크 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for t.. 2021. 7. 16. 색깔 선택할 때 핵꿀팁! 컬러 유용하게 select할 수 있는 툴 Material Design에서 배포하는 color tool을 사용하면 굉장히 유용하게 컬러 선택이 가능하다. https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io 2021. 7. 16. height에 사용되는 단위 중 2가지를 알아보자. %, vh 이런 구조가 있을 때 뷰포트에 꽉차는 높이를 설정하고 싶다면 %를 사용했을 때 아래와 같은 구조를 해야 한다. html, body { height: 100%; } .container { background: beige; height: 100%; } 하지만, vh를 사용하면 아래와 같이 한번에 뷰포트에 꽉차게 가능하다. .container { background: beige; height: 100vh; } 2021. 7. 16. 5일차 : Javascript(1) INDEX Javascript 연습 방법 변수와 상수 변수 let 상수 const null, undefined 연산자 비교연산자 조건문 if, else, else if switch 문 함수 ES6 ECMAScript6, ES2015 template literal arrow function 객체 Javascript electron으로 데스크탭 프로그램을 만들수도 있다. react native, nativescript로 모바일용으로도 만들 수 있다. node.js로 javascript를 사용할 수 있기 때문에 iot에서도 사용할 수 있다. https://learnjs.vlpt.js 참조 연습 방법 codesandbox에서 주황색(vanaila script)을 통해서 javascript 자체만 사용할 수 있다.. 2021. 7. 16. 4일차 : CSS Flex https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog Flex Flex를 사용하기 전 블럭들을 가로로 배치할 경우1 .container { border: 2px solid red; } .container .item { width: 100px; height: 100px; border: 2px solid; border-radius: 10px; display: in.. 2021. 7. 15. 4일차 : CSS Animation Animation animation 선언은 @keyframes로 하는 것 단축속성 animation : 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; 예시 .box { width: 100px; height: 100px; background: tomata; } .box:hover { animation: hello 2s linear infinite alternate; // alternate하면 반대도 모션 구현된다. } @keyframes hello { 0% { width: 100px; } 100% { width: 500px; } } ✅ 트랜지션이랑 무엇이 다른가? 트랜지션은 0%와 100%로 이루어져 있는데 animation과 keyframe를 이용하면 중간 과정을 만들 수 .. 2021. 7. 15. 이전 1 2 3 4 5 6 7 8 ··· 36 다음
