본문 바로가기
  • 삽질하는 자의 블로그
1. 특성 선택자 [ ] 와 결합자 ~, + , * 1. 결합자 바로 자기 아래 자식인 노드만 선택하는 결합자 [ > ] ul > li {// ul 의 바로 아래 li 에만 적용된다. ... } 서로 형제관계인 코드중, 해당 코드의 "이후" 로 적용되는 것을 선택하는 결합자 [ ~ ] p ~ span { color: red; } 이건 빨강이 아닙니다. 여기 문단이 있습니다. // p 이후로 시작 ( 아직 선택 X, 이후의 span은 전부 빨강) 그리고 코드도 있습니다. 이제 빨강입니다! // p 이후의 형제관계인 코드 (이제 빨강) 더 많은 코드가 있습니다. 이것도 빨강입니다! // p 이후의 형제관계인 코드 (이것도 빨강) 서로 형제관계인 코드중, 해당 코드의 "이후" 로 "단 하나만" 적용되는 것을 선택하는 결합자 [ + ] li:first-of-ty.. 2023. 1. 27.
1. SCSS(SASS) 를 사용해보자! [사용방법] 기본적인 사용법에 대해 알아보자. 1. 글로벌 sass 의 적용 styles 폴더에, "global.scss" 를 만들고 직접 css 처럼 적용하여 사용하거나, body { color : red; } 혹은 $custom : red; body { color : $custom } 처럼 사용할 수 있다. 후에, "_app.tsx" 에 가서 import "../styles/globals.scss"; 로 import 하여 사용한다. 2. 모듈 CSS 의 적용 똑같이 .module.scss 로 만들어서 적용시킨다. 3. 중첩되게 사용 .NumberTest { font-size: 1rem; color: green; .NumberTest__title { color: red; } } ==> ".NumberTest .Nu.. 2023. 1. 27.
0. SCSS(SASS) 를 사용해보자! [준비] CSS 를 매번 똑같이 정의하고, 반복하고, 복잡한 CSS 규칙에 하루종일 치덕여 살다가, SCSS 를 알게되었다. SASS 를 사용하면 SCSS 구문을 사용하여, 어썸! 한 스타일 시트를 만들 수 있다. https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS : Syntactically Awesome Style Sheets SCSS : Sassy CSS 말그대로 어썸! 한 스타일 시트이자, 아주 쿨! 한 스타일 CSS 을 말한다. .. 2023. 1. 27.
2. 텍스트에 그라데이션 만들기 텍스트에, 그라데이션만들기 .header_menu li:hover { background: linear-gradient(// 백그라운드에 그라데이션을 입히고 to left, rgb(0, 204, 255), rgb(0, 26, 255), rgb(212, 9, 227) ); -webkit-background-clip: text;// 옵션을 통해, text에만 적용시킨다. background-clip: text;// 옵션을 통해, text에만 적용시킨다. color: rgba(255, 255, 255, 0);// 이때, Text 의 컬러를 완전투명 하게 만들어서, 색이 잘 보이게한다. } 2023. 1. 4.
3. infinite 옵션과, from, to 를 이용해 빙빙 돌아가는 할일 만들기 컴포넌트 import styles from "./Todos.module.css"; const Todos = () => { return ( 할일 ); }; export default Todos; css .maindiv { height: 3rem; width: 5rem; } .rotation { font-size: 2rem; text-align: center; animation: rotation infinite 500ms linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 하핫 2022. 12. 23.
1. React 에서 부트스트랩을 사용해보자 부트스트랩의 기본 사용 1. 부트스트랩 CDN 설치 https://getbootstrap.com/docs/5.2/getting-started/introduction/ 1) Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices. 인덱스 루트파일을 만들어라, 헤더가 있는 것으로 * 이미 React 만들때 만들어져있지 2) "index.html" 에 CSS 와 Javascript 를 가져오자 css : javascript : 3) 사용한다 2. 원하는 항목을, 복사해 가져와서, 컴포넌트로 뺀 후, 사용한다. ( import 하는 방법도 있지만 .. 2022. 12. 22.
2. 버튼 누를때마다 animation 동작하게 만들기, with React, useEffect animation 은 상태가 평가될때, 한번 실행된다. 버튼을 누를때마다, 실행되게 만들자. 재평가를 시키려면, useState 가 필요할 것이고, 트리거를 만드려면, useEffect 가 필요할것이다. function LayoutHeader() { const [showModal, setShowModal] = useState(false); const cartCtx = useContext(CartContext); ... let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;// setBump 해야, bump 스타일 활성화 useEffect(() => { setBtnBump(() => true);// 버튼의 bump 스타일이, 생기는 트리거 setTi.. 2022. 12. 12.
1. CSS animation 사용하기 with React https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org 이걸 보고 자꾸 실패했다. 왜? className 으로 지정하지 않았기 때문이었다!! React 에서, css animation 을 지정하려거든, className 으로 css animation 을 딱! 집어야한다. 애매하게, p 이렇게 하.. 2022. 12. 12.
1. 움직이지 않는 backround 만들기, feat. 그라데이션 이전 Nextjs 프로젝트에서, 백그라운드로, 그림을 사용해 보았다. 어? 근데, 백그라운드가, 블록만 하나씩 생기면 움직인다. 접히고, 짤리고, 그 이유는 body 에, backround-image 를 넣었기 때문 에라이 그래서 새로 작업중인, React 사이드프로젝트에는, 움직이지 않는 딱 고정된 백그라운드를 만들어볼것이다! 1. main-backround 파일을 만든다. 2. 스타일링 한다. 3. index.js 에 가서, 붙여넣는다. 4. z-index 를 0로 설정해 가장 후방으로 뺀다. import styles from "./main-background.module.css"; function MainBackround() { return ; } export default MainBackround.. 2022. 12. 8.
2. 반응형 grid 만들기. grid 를 만들면, 1fr, 1fr ... 이나, 2rem , 3rem ... 이나 어찌됐든 가로나 세로열의 수를 정하곤 한다. 반응형에 따라, grid 의 위치를 배열을 바꾸고싶다. repeat ( auto-fill, mixmax("xx" rem, 1fr) )이것을 이용한다. display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; 2022. 12. 7.
1. 매번 헷갈리는 absolute 중앙 정렬 1. 중앙 정렬하기 with transform position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2. 중앙 정렬하기 with calc position: absolute; width: 20rem; top: 35%; left: calc(50% - 10rem); => top 은 calc(50% - height / 2) left 는 calc(50% - width / 2) * 둘의 차이점 transform 을 사용하면, 내부의 div 를 건드렸을때, 조금 위치가 변동 될 수 있다. calc 를 사용하면, 변함이 없다. 무슨소리인지는 해보면 안다. 나는 calc 로 사용 하는 것이 좋은 것 같다. 2022. 12. 7.

티스토리툴바