본문 바로가기
반응형

CSS7

리액트 CSS - pre 태그로 입력한 그대로 보여주기 리액트 전체 링크 참고 - ㄱ 한자 1 특수 문자로 공백 추가하여 띄어쓰기 아래와 같이 content를 div 태그에 넣어보자. 입력한 대로 출력되지 않는다. import React from "react"; import "./App.css"; const content = `int sum = 0; for(int i = 0; i { return {content}; }; export default App; pre 태그를 이용하면 입력한대로 보여주는 것이 가능하다. import React from "react"; import "./App.css"; const content = `int sum = 0; for(in.. 2023. 6. 28.
리액트 CSS - styled-components로 타이핑 효과 만들기 (Make Simple Typing Effect with styled-components) 리액트 전체 링크 참고 - https://styled-components.com/ - styled-components로 타이핑 효과 만들기 - module.css로 CSS 스타일 관리하기 - classnames로 CSS 스타일 조건부 렌더링하기 아래 링크를 참고하여 타이핑 애니메이션 효과를 그대로 리액트에 재현해보자. https://dabblet.com/gist/b04ab9f41084b0a66960 코드는 다음과 같다. App.js import React from "react"; import "./App.css"; const App = () => { return ( Blood StrawBerry ); }; export default App; App.css @keyframes typing { from { .. 2023. 6. 27.
리액트 CSS - 배경 이미지 꽉 채우기 리액트 전체 링크 css에서 배경 이미지를 설정해보자. 배경이미지는 src > image 폴더에 추가하였다. App.css에 body 태그를 아래와 같이 설정해보자. background-image: url을 이용하여 이미지를 불러오면 된다. body { background-image: url(./image/background.png); } 아무런 설정도 없다면 아래와 같이 이미지가 반복된다. background-repeat에서 no-repeat을 설정하면 이미지를 하나만 나오게 한다. body { background-image: url(./image/background.png); background-repeat: no-repeat; } 이제 background-position에 top center를 추가.. 2022. 6. 19.
리액트 CSS - 간단한 accordion 만들기 리액트 전체 링크 FAQ에서 Quesition을 누르면 Answer가 나오도록 아래와 같이 display: none을 주었다. 하지만 조금 딱딱한 느낌이 난다. .faq-card-answer { position: relative; padding-top: 1rem; padding-bottom: 1.5rem; padding-right: 2rem; border: 0px solid rgba(225,228,230,.5); border-top-width: 1px; } .faq-card-none { display: none; } css에서 간단한 작업으로 아코디언을 만들 수 있다. display: none은 애니메이션 적용이 되지 않으므로, 아래와 같이 padding, bottom, height, 그리고 visibi.. 2022. 3. 2.
리액트 - FAQ 카테고리 만들기 리액트 전체 링크 아래의 카테고리대로 선택할 수 있게 되었으니, const categories = [ { name: "자주 묻는 질문", value: "all", }, { name: "카테고리 1", value: "category1", }, { name: "카테고리 2", value: "category2", }, { name: "카테고리 3", value: "category3", }, ]; FAQ 목록을 각 카테고리 별로 분류하도록 해보자. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: "this is react. 1", }, { category: "category2", question: "what is t.. 2022. 3. 1.
리액트 카테고리 필터 Category Filter 리액트 전체 링크 아래와 같은 카테고리가 있다고 가정하자. name이 실제 웹에서 보이는 문자열이고, 내부적으로는 value로 필터링을 한다. const categories = [ { name : "자주 묻는 질문", value : "all" }, { name : "카테고리 1", value : "category1" }, { name : "카테고리 2", value : "category2" }, { name : "카테고리 3", value : "category3" }, ]; 카테고리는 Q&A, FAQ 등을 분류하기 위해서 사용할 예정이다. const qnalist = [ { category: "category1", question: "what is that ? 1", answer: "this is rea.. 2022. 2. 27.
React Handsontable로 csv 편집기 만들기 (2) 프로젝트 전체 링크 이전 - (1) Project Setting 현재 - (2) Drag & Drop 다음 - (3) 선택한 경로의 파일 불러오기 깃허브에서 코드 확인하기 Drag & Drop의 과정에서 sass를 이용하여 이벤트에 대한 css를 변경할 수 있다. 따라서 sass를 설치한다. yarn add node-sass css 작업이 많은 프로젝트는 아니지만 추후 조금이라도 생산성을 높이기 위해 이번 기회에 한 번 써보자. 파일을 업로드하기 전에 Drag & Drop을 구현해보자. 자바스크립트에서는 여러 Drag & Drop 이벤트를 지원한다. 1) ondrop - drop 이벤트 2) ondragover - drop이 완료된 후 3) ondragleave - drag 영역을 벗어나는 이벤트 lib.. 2021. 5. 29.
반응형

티스토리툴바