[SASS - SCSS] 2-1. CSS 확장 내용정리

1. CSS 확장

중첩이란, 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 이용하면 많은 코딩을 하지 않고 편리하게 각 선택자에 속성을 지정해 줄 수 있습니다. 사이트가 복잡해지면서 하위 - 자식 선택자들이 많아지게 됩니다. 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 편리한 기능입니다.

CSS 확장에는 중첩만이 아닌, 태그 선택자와 연계된 클래스, 아이디 선택자끼리 쉽게 묶어주는 기능도 있습니다. 수도 선택자 pseudo selector를 지정할 경우에 편리합니다. 

 

수도 선택자는 :hover, :active, :link와 같은 하이퍼링크에 효과를 주는 것부터 :first-child, :last-child, :nth-child와 같이 li 또는 tr, td 태그들의 자식 선택자에 특별한 속성을 지정할 때 사용되는 선택자를 말합니다. 그 외에 :after, :before 같은 특별한 기능을 하는 선택자도 있습니다. & 기호를 사용해서 처리가 가능합니다.

CSS 확장에는 동일한 단어가 들어가 있는 속성 등을 확장 속성으로 처리가 가능합니다. 예를 들어 font-family, font-weight 등 동일하게 font라는 단어가 있는데 처리가 가능합니다. 

 

 

 

.section1의 경우 중첩을 이용하여 태그 선택자와 결합된 클래스 혹은 아이디 선택자가 있을 경우에는 & 기호로 처리하면 간단하게 처리되고, 위의 코드에서는 article이 최상위 부모 선택자가 됩니다.

font: {       
  size: 14px;       
  family: 'Noto Sans KR', sans-serif;       
  weight: 700; ..... 
}

font처럼 선택자의 이름과 더불어 별도의 속성이 들어가는 부분은 위와 같이 처리해주면 됩니다. background의 경우 background-size, background-color, image 등등 위의 방법으로 처리함으로써 간편하게 직관적으로 처리가 가능합니다.

 

 

 

위의 SASS를 컴파일한 코드인데, 생각보다 보기 편하고, 순서대로 진행되는 부분이기 때문에 개인적으로는 SASS 코드는 용이하고, 꼼꼼하게 작성이 가능한 부분이 매력적입니다.

 

- 부모 선택자 &

그리고 위에서 &을 사용할 때 앞에 작성하느냐, 뒤에 작성하느냐에 따라 달라지게 됩니다.

 

위의 코드처럼 a 안에 &:hover를 기재하면 a 선택자와 연동되어서 처리하게 되고, &을 뒤에 작성하게 되면 부모인 a선택자가 &을 사용한 선택자의 하위 선택자로 위치하게 되면서 css 컴파일에는 a:hover로 출력이 되게 됩니다.

 

위의 코드에서는 하위 선택자인 .box1 선택자 뒤에 &를 붙이게 되면서 & 자리에는 부모 선택자가 위치하게 됩니다. 앞에서 본 게시물에서는 .container > box1 이런 식으로 이해할 수 있겠지만, .box1 &을 기재함으로써 css에서 출력이 되는 부분은 .container .box1 으로 부모 선택자를 가져오게 되는 역할을 합니다. 

특정 클래스나 아이디 안에서 스타일을 덮어쓸 수 있어서 유용한 방법입니다.