Stack & Tool/HTML, CSS43 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. height에 사용되는 단위 중 2가지를 알아보자. %, vh 이런 구조가 있을 때 뷰포트에 꽉차는 높이를 설정하고 싶다면 %를 사용했을 때 아래와 같은 구조를 해야 한다. html, body { height: 100%; } .container { background: beige; height: 100%; } 하지만, vh를 사용하면 아래와 같이 한번에 뷰포트에 꽉차게 가능하다. .container { background: beige; height: 100vh; } 2021. 7. 16. grid 그리드는 파이어폭스로 테스트하는 것이 좋다. 왜냐하면 눈에 보기 쉽게 나뉘어져 보이기 때문. 그리드도 flex와 마찬가지로 content와 item으로 나뉘어져있다. display:grid로 하면 block요소처럼 세로로 쌓여진다. display:inline-grid로 하면 인라인요소처럼 되서 가로로 쌓인다. 1 2 3 1 2 3 .container { border: 2px solid red; display:grid; } .container .item { border: 2px solid; } grid-template-rows : 행의 높이와 개수 grid-template-columns : 열의 너비와 개수 grid-template-columns:100px 100px 50px; // 3개의 열 각 너비 g.. 2021. 5. 21. float, flex비교 float을 이용한 방법 .container { border: 2px solid red; } .container .item { width: 100px; height: 100px; border: 2px solid; border-radius:10px; float:left; } .clearfix::after { content:''; display:block; clear:both; } flex 이용한 방법 container와 item에 들어갈 속성은 정해져있다. container container에 적용할 수 있는 display 종류 2가지 flex : container들이 세로로 정렬된다. (item들은 그대로 가로로 정렬) inline-flex : container들이 가로로 정렬된다. (item들 마찬가지.. 2021. 5. 20. transition, transform, animation transition은 바뀌기 전 상태의 객체에게 부여해준다. transition-property: width, background; 가로사이즈와 배경을 애니메이션에 적용하겠다. transition-duration: 1s; 1초에 걸쳐서 바뀌게 하겠다. 이거를 합치면 아래와 같이도 가능하다. transition : width 1s, background 1s; 이거를 또 모든 속성에 전환하겠다라고 하면 transition : 1s; 가 가능하다. ease, ease-out : 빠르게 - 느리게 // 이 두 가지는 약간 다르다. ease-in : 느리게- 빠르게 linear : 일정하게 이런것을 눈으로 보고 싶으면 easing function을 검색해서 표 + 애니메이션을 볼 수 있다. 합치면 transiti.. 2021. 5. 20. background-attachment : fixed를 이용한 세련된 홈페이지 + background-size 배경이 고정되게 해서 최근 홈페이지들에서 사용하고 있는 방법을 만들 수 있다. 이미지를 붙여넣고 전체적으로 딱 맞게 나오게 하기 위해서 background-size : auto 100%; 옵션을 사용하자. background-position : right bottom; 도 같이. background-size : cover 넓은 너비에 맞춰져서 배경이 출력된다. background-size : contain 짧은 너비에 맞춰져서 배경이 출력된다. 2021. 5. 20. 이전 1 2 3 4 ··· 8 다음
