[AngularJS] 7. AngularJS로 게시판 만들기(0)

AngularJS로 게시판을 만들기 전에, 부트스트랩 적용법을 먼저 숙지할 예정이다.

Bootstrap?

부트스트랩은 반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.

즉, 웹 프로젝트 개발을 하면서 부트스트랩을 이용하면 UI, UX 관점에서의 완성도를 높일 수 있는 도구로 생각하면된다.

 

웹을 개발하면서 html코드를 작성할 때 디자인을 신경써야할 때가 있다.

css를 수정하여 어떻게 더 이쁘게 만들어야할지 고민할 때가 많은데 이때 부트스트랩을 이용하면

디자인에 대한 부담을 덜 수 있다.

 

부트스트랩의 공식 사이트

http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

 

---

Bootstrap 적용법

부트스트랩을 적용한 HTML 코드이다.

공식 사이트에서 제공하는 기본 HTML 템플릿에서 내용을 살짝 수정하였다.

meta 태그들을 보면 해상도에 따른 반응형에 대한 지원을 하기위한 속성들이 정의되어 있다.

 

meta의 viewport는 적절한 렌더링과 확대/축소에 대한 적절한 반응을 위해 속성이 정의되어 있는데,

viewport에 'user-scalable=no' 속성을 정의하면 사용자가 모바일 환경에서 확대/축소가 제한된다고 한다.

이는 모바일 웹 서비스를 네이티브 어플리케이션의 느낌을 살릴 수 있다고 한다.

 

반응형에 대한 옵션을 끄고 싶다면, 이 meta태그들을 제거하면 된다.

 

11LINE을 보면 jquery 라이브러리가 적용되어 있는데, 이는 bootsrap의 js는 jquery를 필요로하기 때문에 jquery가 먼저 로드 되어 있다.

 

---

Bootstrap을 이용하여 FORM 구성하기

이 부트스트랩의 기본 템플릿을 이용하여 폼(form)을 만들고, 간단한 AngularJS 예제를 작성해보았다.

 

먼저 AngularJs를 적용하기 전에 사용할 HTML 템플릿을 만들었다.

 

먼저 form을 감싼 .container는 화면의 해상도에 따라 width값이 달라져 반응형으로 요소들이 구성된다.

 

 

input 태그의 form-control은 전역 스타일링을 받아들인다.

form-control 클래스가 있는 <input>, <textarea>, <select> 요소의 width는 100%이다.

최적의 여백을 위해 form-group으로 <label> 콘트롤을 감쌌다.

 

이 HTML 템플릿의 화면은 다음과 같이 구성된다.

 

굉장히 기본적인 class 속성을 넣기만 했는데도 디자인이 깔끔한 것을 볼 수 있다.

 

부트스트랩의 적용법을 알았으니 AngularJS를 이용하여 게시판을 만들어 볼 예정이다.