(4) Angular 프로젝트에 bootstrap 적용

지난 시간에는 간단하게 ngModel 을 사용해봤는데요. 이번에는 쉽게 스타일링을 하기 위해 부트스트랩을 프로젝트에 설정해보도록 하겠습니다. 일단 설정을 하려면 설치를 해야겠죠? 저는 3버전을 설치할게요. 서버 종료 후 다음 명령어를 칩시다.

> npm install --save bootstrap@3

 

다음 명령어를 치면 node_modules 폴더 안에 bootstrap이 설치가 됩니다. 설치가 완료됐으면 angular.json 안에 styles 구성요소를 보면 "src/styles.css" 가 이미 있습니다. src/style.css를 들어가보면

 

/* You can add global styles to this file, and also import other style files */

 

다음과 같은 내용이 있네요. 네 이곳에다 코드를 입력하면 앱 내 모든 곳에 스타일이 적용됩니다. 하지만 저는 부트스트랩을 사용할 것이기 때문에 node_modules 에 설치된 bootstrap.min.css 파일을 경로와 함께 다음과 같이 하나 더 추가해 줍니다. (오타조심!)

...,
"options": {
      ...,
      "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
      ],
      "scripts": []
}

 

오타없이 잘 추가하셨으면 다시 ng serve 해서 페이지에 접속해보면 달라진게 없어보이겠지만!! f12 눌러서 개발자 도구를 열고 elements 탭으로 이동해서 head 태그 안에 style 안의 내용을 보면

 

짠! 무사히 bootstrap css 적용이 잘 되었습니다. 이상으로 마치겠습니다!