본문 바로가기

Client/CSS

(3)
CSS Layout - Float, Flex, Grid CSS는 Cascading에 대한 이해, 그리고 이를 바탕으로 셀렉터를 통해 색과 크기를 지정하고, 나아가 전반적인 레이아웃을 구성하는 것으로 나아간다. Bootstrap과 같은 것들은 이러한 설정을 미리 지정해두어서 단축키처럼 만들어 놓은 것이고. CSS를 통한 레이아웃에는 기본적으로 Float, Flex, Grid 방식이 존재한다. 각각을 어떻게 사용하는지는 이미 잘 나와있다. 그러나 CSS 레이아웃에 Float, Flex, Grid라는 세 종류가 있다는 걸 말해주는 곳이 없어서 이렇게 메모차 남긴다. 각각의 방식에 대해서는 그냥 다른 글들을 참조하면 된다.
SASS의 작동과정, 기본 개념 | CSS를 언어화 CSS를 사용하다가, SCSS를 알게되었다. 리액트로 링크드인 클론을 만들다가, SCSS를 자꾸 사용하길래, 한 번 익혀봐야겠다는 생각을 하게 되서, 기본 요소들을 정리하게 되었다. SCSS를 배우려고, 2시간, 3시간 들일 필요는 없는 것 같고, 기본 문법만 알면 되는 것 같다. 우선은 SASS는 CSS를 언어처럼 사용할 수 있게 해주는 것이다. 변수, 함수가 존재하듯이, CSS에서 변수, 함수를 정의해서 사용할 수 있게 해주는 것이 SASS다. 이 때 SASS를 브라우저 상에서 바로 사용할 수 없기 때문에 컴파일을 해주어야 한다. SASS를 사용하게 되면, 다른 언어를 사용할 때와 마찬가지로 변수, 함수가 존재한다. $로 변수를 정의하고, mixin과 include로 함수를 정의해서 사용하면 된다. ..
CSS, Bootstrap 기본 개념 정리 아무 생각 없이 Bootstrap 템플릿을 가져다 쓰다가, 좀 더 정교하게 만들어 보고 싶어서, 튜토리얼을 수강한 뒤 기본 개념을 정리하였다. CSS라는 것이 어떤 의미인지 처음 알았는데, Cascading Style Sheet의 줄임말이라고 한다. Cascading이 폭포를 의미하는데, DOM에서 상위 문서, 하위 문서의 트리 구조를 가지듯이 마찬가지로 CSS 속성을 정의하는 것에 있어서도 우선순위가 존재하기 때문에 Cascading이라는 용어를 사용한다는 것을 알 수 있었다. 이렇게 CSS를 사용해서 화면을 구성하게 되는데, CSS나 Bootstrap이나 기본적인 Flow는 동일하다. 1) 박스가 기본요소가 된다. 2) 화면을 분할해주고 (그리드) 3) 분할된 부분 각각에 (컨테이너) 4) 박스들을 ..