| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- error
- vue-cli-service
- useState
- axios
- npm
- TradingVIew
- antd
- 리액트
- 상태관리
- CSS
- err
- 프론트엔드
- 리액트기초
- react
- Chart
- Download
- 시멘틱태그
- FRONT
- NeXT
- VUE
- 프론트엔드개발
- vscode
- form
- develop
- JavaScript
- components
- Package
- 이미지
- type
- frontend
Archives
- Today
- Total
목록Before (1)
개발쬬
[CSS] before after 선택자에 동적 content 적용하기
환경세팅 React + Next + TypeScript 최근 단일 페이지를 퍼블리싱 하면서 데이터로 뿌려주는 리스트형 요소들의 before 선택자 내부 content 를 동적으로 바꾸는 작업을 처리했다. 사실 이것저것 찾아보기 전까지는 단순히 js 코드 내에서만 해결하려고 했는데, css 내부에 attr 변수를 통해서 동적으로 처리해주는것이 가능했다. 동적 content CSS적용 코드 index.tsx /** 리스트 아이템 **/ 시멘틱태그 내부에 data-content 를 선언하고 내부 요소들을 태그 데이터로 넘겨준다. 이와 다양한 코드들오 넘겨주는것이 가능하다. index.css .wrap::after { position: absolute; width: 15px; height: 15px; left:..
쬬의 CSS
2023. 6. 28. 19:03