Next14 + Netlify 로 새로 작성했습니다.
https://whothatsme.tistory.com/42
[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)
오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적
whothatsme.tistory.com
---
이전에 만들어 뒀던 html을 vue로 변환하는 작업을 해보자.
나는 HelloWorld를 Home이라고 바꾼후 이전에 html로 되어있던 부분을 template에 바꾸어 넣었다.
그리고 css는 bootstrap을 이용해서 변환할 예정이다.
https://getbootstrap.kr/docs/5.0/getting-started/introduction/
시작하기
세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.
getbootstrap.kr
vue를 위한 Bootstrap을 이용해보려한다.
패키지 설치
npm을 이용해서 Bootstrap을 설치해준다.
npm install bootstrap설치가 완료되면 package.json에 추가된 모습을 볼 수 있다.
main.js에 추가하기
Vue에서 bootstrap을 사용할 수 있도록 main.js에 코드를 추가해준다.
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
컴포넌트 사용해보기
bootstrap 페이지에서 기본 예시로 나와있는 버튼 그룹을 사용해보자.
잘 적용되는 모습을 볼 수 있다. 어렵지 않게 진행할 수 있다.
'코딩 > 나를 소개하기' 카테고리의 다른 글
| [Vue.js] 나를 소개하는 홈페이지 만들기 (4) - SCSS 에러, SCSS 전역으로 설정하기 (0) | 2022.05.27 |
|---|---|
| [Vue.js] 나를 소개하는 홈페이지 만들기 (3) - CSS, SASS, SCSS (0) | 2022.05.24 |
| [Vue.js] 나를 소개하는 홈페이지 만들기 (1) - Vue.js, Vue-cli (0) | 2022.05.18 |
| 나를 소개하는 홈페이지 만들기 (3) (0) | 2022.03.08 |
| 나를 소개하는 홈페이지 만들기 (2) (0) | 2022.03.07 |