안녕하세요 상훈입니다.
React.js 에서 image의 경로를 잡을 때 경로를 못잡아주는 경우가 있습니다.
이에 대비해 프로젝트의 root 경로에서 이미지의 경로를 잡아주는 방식을 소개하도록 하겠습니다.
<img src={process.env.PUBLIC_URL + `/assets/alpha.png`} alt="" />
이렇게 src 내부가 아닌 public 폴더 내의 경로일 때 사용해주시면 편리하겠습니다.
반응형
image
[ React.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url
2022. 4. 5. 14:35
[ Tailwind.css ] 이미지를 배경 '클래스' 로 등록하는 방법, customizing background Image
2022. 2. 17. 20:27
Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.
Vue.js 3 - tailwindcss3 를 사용하였습니다.
하는 방법 바로 가시죠.
우선 tailwind.config.js 파일이 /src 내에 있습니다.
이곳에다가 작성하는것인데요,
theme.extend. 내에 작성
module.exports = {
purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundImage: (theme) => ({
'hero-pattern': "url('pattern-bg.png')",
'second-image-pattern': "url('sencond-bg.png')",
})
},
},
variants: {
extend: {},
},
plugins: [],
}
이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.
사용 사례
이상입니다.
유용하게 쓰십쇼
반응형
'FrontEnd > css' 카테고리의 다른 글
| [ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류 (0) | 2022.02.15 |
|---|---|
| [ CSS ] 남은 영역 채우기, how to cover the left area by css? (0) | 2021.12.09 |
| [ Css ] Transition 트랜지션 사용하기 (0) | 2021.10.26 |
[ Html ] Title 이미지(Image) / 아이콘(Icon) 적용하는 방법
2021. 10. 5. 18:05
안녕하세요 상훈입니다.
웹페이지에서 title에 적혀져 있는 icon 혹은 image를 변경하는 방법을 포스팅하겠습니다.
기본 Format
<link href="이미지경로" rel="shortcut icon" type="image/x-icon">
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title name </title>
<link href="../images/image-example.png" rel="shortcut icon" type="image/x-icon">
</head>
직접 이미지를 다운로드 받아 경로에 넣고 링크를 해주었습니다.
감사합니다.
반응형
'FrontEnd' 카테고리의 다른 글
| [HTML] a 태그에 꼭 추가 해야 하는 속성(Attr) (0) | 2025.03.07 |
|---|---|
| [HTML] img 태그 현명하게 사용하기 (0) | 2023.05.29 |
| [NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window (0) | 2022.11.11 |
| VSCode - HTML Formatter 설정하는 방법, html 서식 지정하기 (0) | 2022.05.23 |
| [ BootStrap ] 부트스트랩 cdn 적용하는 방법 (0) | 2021.10.06 |
웹 개발 시 유용한 배경 이미지 사이트 사용하기
2021. 9. 3. 18:12
안녕하세요 상훈입니다.
웹 개발 시 배경을 지정하여야하는데, 마땅한 배경을 지정할게 없거나, 랜덤으로 새로고침할 때마다 등장하는 배경을 찾고 싶으시다면
background-image: url(
https://source.unsplash.com/random/1920x1080
)을 사용해주시길 바랍니다.
1920x1080은 본인의 배경 크기를 지정할 수 있습니다.
좋네요. ㅎ
예시)
이상입니다.
반응형
'유용한 정보' 카테고리의 다른 글
| [ Window ] 부팅 시 프로그램 실행하는 방법 (0) | 2021.10.26 |
|---|---|
| ## Restful - 6가지 원칙 (0) | 2021.10.05 |
| 클럭이란? - PC정보 (1) | 2021.09.15 |
| [ 갤럭시 ] 개발자 모드 켜는 방법 (4) | 2021.09.12 |
| Zoom - 녹화(record) / 저장 경로 확인 하는 방법 (0) | 2021.08.31 |