[SCSS flex-layout 쉽게 잡기]

IT쿠키·2021년 9월 30일
1

[SCSS 지식]

목록 보기
1/3

Flex-layout을 쉽게 잡아 보자!!!

흔히 layout css을 잡을 때 요새는 flex와 grid를 자주 사용한다. 그렇다면 이거를 SCSS 활용하여 간단하게 만들 수 있지 않을 까? 라는 생각에 만든 layout.scss다.

설명을 하기전에 중요한 개념을 알아보고 가자!!

flex-layout을 쉽게 잡는 방법을 알려주기 전에 알아야 할 두 가지 요소가 있다.
첫 째는 scss @at-root 두 번째는 클래스 셀렉터 (Class Selector) 다.

CSS는 기본적으로 부모 요소의 중첩이 되게 SCSS 내용을 작성하게 한다.

.Matchability__footer{
    position: absolute;
    bottom: 0;
    right:0;
    max-width: 35.8rem;
  .box_line{border:1px solid #333; padding:10px;}
}

하지만 @at-root 는 해당 요소에 부모 요소를 벗어나기 위해 사용이 된다.

.Matchability__footer{
    position: absolute;
    bottom: 0;
    right:0;
    max-width: 35.8rem;
  @at-root .box_line{border:1px solid #333; padding:10px;}
}

이렇게 코딩을 하게 되면 .box_line 클래스가 상위 요소를 타고 가는 것이 아닌 별도의 CSS로 작성이 된다.

두 번째는 클래스 셀렉터 (Class Selector) 인데 이거 같은 경우 CSS에서도 사용할 수 있다. class 어트리뷰트 값을 지정하여 일치하는 요소를 선택하여 CSS를 지정해주는 방법이다.
주로 components 적인 작업을 진행할 때 사용을 한다. 공통적인 부분이 많은 부분에서 클래스명이 일치하는 부분에만 특정 css를 부여하는 방식으로 활용한다.

자 이제 두 가지의 간단한 개념을 알게 됐으니 이걸 활용을 해보자!!

Flex-layout 공통 작업

간단하게 공통으로 네이밍할 클래스명을 생성을 주고

@at-root 를 활용하여 부모의 요소에서 벗어난다. 그 이후에 class selector 를 활용하여 해당 하는 어트리뷰트 클래스를 가진 요소에게 빨간 박스 내부에 있는 공통적인 레이아웃을 CSS로 할당하면 짠 하고 나오게 된다.(뭐 단점이라면 이거 쓸 때마다 클래스명 지정해줘야 한다)
하고 나서 SCSS & 부모 선택자를 참조하여 class를 생성하고 거기에 다시 그 class명에 맞는 css를 할당해 주면 언제 어디서나 쓸 수 있는 간단한 flex-layout 잡기가 완성 된다. :)


요런식으로 활용이 가능하다.
세세하게 나눠서 사용할 경우 편리함을 가져다 주지만 너무 많아지면 관리하기 어려우니 자주 사용하는 flex만 만들어 두는 게 좋다.
그럼 이만!!

profile
IT 삶을 사는 쿠키

0개의 댓글