CSS가 뭔데?

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

그냥 웹페이지에서 HTML 로 만들어둔 웹 구조 위에 스타일을 입히는 작업이다.

프론트엔드 개발자를 희망하면서, CSS는 배우기를 꺼려하는 초보개발자들이 종종 보인다.
CSS는 HTML이라는 구조에 단순히 색을 입히고, 폰트색만을 조절하는 것이 전부가 아니라, Javascript만으로는 구현하기 힘든 애니메이션이나 효과등을 넣을때 효과적으로 사용할 수 있기 때문에, Javascript나 파생라이브러리 (Vue.js,React.vs,Angular.js)를 배우기전에 초급자이상은 넘고 가는 것을 추천하다.

BootStrap

CSS를 기피하는 개발자들을 위해서 빠르고 간편한 반응형 웹디자인을 위해 Bootstrap 에서는 Open-source
라이브러리를 제공하는데,
HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미지 캐러셀(image carousel) 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다
처음 CSS 공부하는 개발자라면 Bootstrap은 지양하고 CSS를 어느정도 이상 공부하고 Bootstrap을 사용하는것을 추천한다. 그래도, 당장 빠르게 결과물을 내야 한다면 사용법 정도는 알고서 바로 적용하자.

Bootstrap 홈페이지링크
https://getbootstrap.com/

BootStrap의 장점

Easy to use
HTML과 CSS에 대한 기본 지식이 있다면 쉽게 사용할 수 있다.

Responsive features
스마트폰, 테블릿, 데스크탑에 적합한 responsive CSS를 제공한다.

Mobile-first approach
Bootstrap 3부터 mobile-first style을 기본으로 지원한다.

Browser compatibility
대부분의 브라우저(Chrome, Firefox, Internet Explorer, Safari, Opera)를 지원한다.

Framework

웹사이트 디자인에는 정형화된 코드가 자주 사용되는데 이를 별도로 저장해 두었다가 필요할 때마다 복사하여 사용하곤 한다.(Snippet 이라고한다) 그러나 스니핏이 개발팀 내 공유되어 관리되지 못하고 개인별로 사용하다보면 전체 코드는 일관된 스타일을 가지지 못하여 품질면이나 유지보수면에서도 문제가 발생하곤 한다.

따라서 검증된 Framework나 Library를 사용하는 것이 개인이 개발관리 하는것 보다 팀프로젝트나 유지보수측면에서 더 유리하다.