| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
| 31 |
Tags
- error
- react
- Download
- Chart
- 리액트
- NeXT
- type
- useState
- JavaScript
- Package
- axios
- 프론트엔드개발
- 이미지
- npm
- antd
- develop
- VUE
- components
- FRONT
- frontend
- 상태관리
- vscode
- 프론트엔드
- TradingVIew
- 리액트기초
- vue-cli-service
- CSS
- err
- form
- 시멘틱태그
Archives
- Today
- Total
목록after (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