본문 바로가기

Client/CSS

CSS, Bootstrap 기본 개념 정리

아무 생각 없이 Bootstrap 템플릿을 가져다 쓰다가, 좀 더 정교하게 만들어 보고 싶어서, 튜토리얼을 수강한 뒤 기본 개념을 정리하였다.

 

CSS라는 것이 어떤 의미인지 처음 알았는데, Cascading Style Sheet의 줄임말이라고 한다. Cascading이 폭포를 의미하는데, DOM에서 상위 문서, 하위 문서의 트리 구조를 가지듯이 마찬가지로 CSS 속성을 정의하는 것에 있어서도 우선순위가 존재하기 때문에 Cascading이라는 용어를 사용한다는 것을 알 수 있었다.

 

이렇게 CSS를 사용해서 화면을 구성하게 되는데, CSS나 Bootstrap이나 기본적인 Flow는 동일하다. 

 

1) 박스가 기본요소가 된다.

2) 화면을 분할해주고 (그리드)

3) 분할된 부분 각각에 (컨테이너)

4) 박스들을 배치하고 (포지셔닝)

5) 속성을 부여해준다 (색깔, 폰트 등등)

'Client > CSS' 카테고리의 다른 글

CSS Layout - Float, Flex, Grid  (0) 2021.09.06
SASS의 작동과정, 기본 개념 | CSS를 언어화  (0) 2021.06.30