10분만에 이해하는 Around 부트스트랩 템플릿 사용하는 방법

아래 이미지와 같이 게시판 댓글을 만들고 싶다. 그런데, 시간이 없으니 템플릿을 사용해서 만들고 싶다.

Around 사이트에 접속한다.

참고로, Around 사이트는 유료 사이트이다.

사이트에서 다양한 템플릿 페이지와 UI Kit을 제공한다. 그 중에서 사용하고 싶은 템플릿을 찾는다.

필자의 경우 Pages > Blog > Single post v.1 에서 찾았다.

결제 시, 다운로드 받았던 폴더(Around-4)에서 가져올 페이지의 파일을 찾는다.

참고로 부트스트랩을 사용하는 경우 Around-4 폴더에서 가져오는 것이 좋다.

1) 가져오고자 하는 페이지의 URL을 화인한다.

2) URL에서 확인한 것과 같은 파일명이 있는지 확인한다.

코드 에디터를 통해 해당 파일을 열고 필요한 부분만 편집해서 사용한다.

실행할 때는 vs code에서 Go Live를 이용하여 켜도 되고 폴더에서 해당 html 파일을 더블클릭하여 열어도 된다.

주소는 자신이 저장한 파일의 경로로 맞춰주어야 한다.

예시 : file:///C:/Users/hyeonseok/Downloads/Around-4/Around/blog-single-v1.html

원하는 부분을 찾을 때는, 개발자 도구(F12)을 켜서 원하는 영역을 클리하면 해당 영역의 코드를 확인할 수 있다.

만약, Vue 프로젝트에 넣는다면 html 코드를 Vue에 넣어준다.

단, 넣을 때 원하는 코드 부분만 <template>~</template> 사이에 넣어주면 된다.

이미지가 있는 경우 이미지의 경로를 잘 맞춰준다.

디지털 전산일지