Frontend/css (16) 썸네일형 리스트형 fixed가 div안에서 넘칠때, 중앙정렬 방법 fixed를 적용하였더니 밖으로 튀어나오는 대참사가 벌어졌다. 상위 div에 relative를 넣어도 먹지않았는데 그 이유는 fixed는 viewport를 참조하기 때문이라고한다. left: 0; padding: 0 20px; width: 90%; right: 0; margin: 0 auto; 팝업의 상단이었기때문에 일정한 간격만 넣어주면되서 위처럼 코드를 작성하여 해결하였다. 이외 max-width값을 넣어서 일정크기이상부터는 고정하게하였다. + 추가 Fixed 버튼 중앙정렬 .fixed-button { position: fixed; bottom: 0; /* 화면 하단에 고정 */ left: 50%; /* 화면 중앙에 정렬하기 위해 왼쪽 50% 위치 설정 */ transform: translateX(-.. [Animation ] ping Animation ping을 사용하면 이와같은 애니메이션효과를 줄수있다. 마우스 hover시에만 작동하게 할 수 있다. https://codepen.io/nanchu/pen/OvqJNL SCSS mixin, function example @mixin fontStyle($size:16) { color: $brown; font-weight: 600; font-size: fontSize($size) } @function fontSize($size){ @return #{$size}px } 파라미터에 아무것도 넣지않을경우 기본값 16px이 적용되고 파라미터에 숫자를 넣은경우 숫자만큼 글자크기가 적용됨. image drop-shadow filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow drop-shadow() - CSS: Cascading Style Sheets | MDN The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a . developer.mozilla.org absolute 가운데정렬시 다른태그 가려질때 position absolute를 하고 가운데 정렬하려 left 0, right 0만하니까 박스를 풀로채우는 문제가 발생하였다. 왼쪽 로고를 클릭해야하는데 가려져서 클릭하는게 불가능했다. z-index로 뒤로넘겨봤는데 아예 배경 뒤로가버렸다. 해결 스택오버플로우에서 추가 css를 알려줘서 추가해보니까 해결할 수있었다. 100px은 너비에 따라 다르니까 변경하면됨 position: absolute; left: 0; right: 0; width: 100px; margin-right:auto; margin-right:auto; https://stackoverflow.com/questions/1776915/how-can-i-center-an-absolutely-positioned-element-in-a-div .. css의 오염방지, 종속 규모가 커지고 파일이 많아지만 css가 뒤죽박죽되어버려 서로에 영향을 끼치게되서 힘들때가있다. 이럴때 예방할수있는 방법이있다. 0. 그냥 클래스명 잘짜기.. 1. styled-component사용 스타일드컴포넌트의 장점이라고하면 js이기때문에 랜더링시 html안에 style태그에 주입해준다. css보다 페이지로딩시간이 단축된다. props값에따라 색상이 변경되는 버튼컴포넌트를 만들어보자. Nextjs styled-components 그냥 리액트 nextjs와 타입스크립트용 nextjs는 약간다르다. 그냥 리액트 nextjs yarn add styled-components _document.js import React from "react"; import Document, { Html, Head, Main.. fadein animation, keyframe 글자가 감춰졌다가 나타나는 애니메이션을 배웠다. CSS만으로도 구현가능하다. .sample { animation: fadein 3s; ... } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } https://dubaiyu.tistory.com/56 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션 패스트캠프 프론트앤드 인강 31일차 scss에서 styled-components를 활용해 dialog와 transition을 구현해보았다. Dialog 만들기 이전 강의에 이어서 dialog를 구현해보았다. 버튼컬러를 적용한 styledBtn을 import.. dubaiyu.tistory.com 리액트로 깜박깜박거리게 하.. normalize.css를 react scss 적용 h1~h7, ul 태그에서는 normalize가 제대로 적용이 안되는모습을 볼수있다. 별수없이 margin, padding:0을 해준다. -- 과거에는 default.css파일을 프로젝트에 넣어서 css를 normalize했었는데 찾아보니 reset.css랑 normalize.css를 다운받거나 yarn add 하는 방법도 있더라. reset.css는 h1,h2까지 깨져버린다고해서 스킵하고 normalize.css를 시도해봤다. yarn add normalize.css scss파일내에서는 불러오는것이 불가능해서 App.js에서 import를 하였다. 적용 전 body 기본 마진값이 살아있음 적용 후 Yarn Fast, reliable, and secure dependency management. clas.. 이전 1 2 다음
