CSS, SCSS 선택자

 

1. CSS

기본

선택자	설명	예제
*	모든 요소 선택	* { margin : 0;}
tag	특정 태그 선택	p { margin : 0;}
.class	특정 클래스 선택	.box { margin : 0;}
id	특정 ID 선택	#header { margin : 0;}

 

 

속성선택자

선택자	설명	예제
[attr]	특정 속성이 있는 요소 선택	[disabled] {opacity : 0.5;}
[attr="value"]	특정 값을 가진 속성 선택	[type=input] {color : red;}
[attr*="value"]	특정 값을 포함하는 속성 선택	[class*="btn"] { padding :5px;}
[attr$="value"]	특정 값으로 시작하는 속성 선택	[src$=".png"] { border -radius : 10px'}
[attr^="value"]	특정 값으로 끝나는 속성 선택	[href^="https"] {color : blue;}

 

 

가상 클래스(Pseudo-classes)

선택자	설명	예제
:hover	마우스 호버 시	button:hober {backgourd:yellow;}
:focus	포커스 시	input:focus {border : 2px solid black;}
:fist-child	첫 번째 자식 선택	p:fist-child {font-weight : bold;}
:last-child	마지막 자식 선택	p:last-child {font-style : italic;}
nth-child(n)	n번째 자식 선택	li:nth-child(2) {color:red;}
nth-of-ttype(n)	같은 태그 중 n번째 선택	p:nth-of-type(2) {margin:0;}

 

 

가상 요소 (.Pseudo-elements)

선택자	설명	예제
::berfore	요소 앞에 가상 콘텐츠 삽입	p::before {content : "✔";}}
::after	요소 뒤에 가상 콘텐츠 삽입	p::after {content : "👌";}}
::first-letter	첫 글자 스타일 지정	p::first-letter {font-size : 2em;}
::fist-line	첫 줄 스타일 지정	p::first-line {font-weight : bold;}

 

 

기타선택자

선택자	설명	예제
:not(selector)	특정 요소 제외	div:not(.active) { opacity : 0.5; }
:has(selector)	특정 요소를 포함하는 부모 선택(css4)	div:has(img) { border : 2px solid black; }

 

 

2. SCSS

SCSS에서 &(앰퍼샌드) 기호는 현재 선택자 자체를 참조하는 역할을 합니다. 즉, &는 바로 바깥쪽의 부모 선택자를 가리킵니다.

 

 

3. SCSS VS CSS

 

선택자 차이

기능	CSS	SCSS
선택자 중첩	불가능	가능
& 참조	없음	지원
가상선택자 중첩	불가능	가능
부모 > 자식 선택자	가능하지만 반복 필요	구조적으로 가능
BEM 스타일 적용	가능하지만 불편	& 로 간편하게 가능

 

 

1. 변수사용

 

CSS

/* CSS에서는 변수 사용이 제한적이고, var()와 custom property 사용 */
:root {
  --main-color: #3498db;
}
 
.button {
  background-color: var(--main-color);
}

 

SCSS

$main-color: #3498db;
 
.button {
  background-color: $main-color;
}

 

 

2. 중첩 (Nesting)

 

CSS

.navbar {
  background: #fff;
}
 
.navbar ul {
  list-style: none;
}
 
.navbar ul li {
  display: inline-block;
}

SCSS

.navbar {
  background: #fff;
 
  ul {
    list-style: none;
 
    li {
      display: inline-block;
    }
  }
}

 

3. 믹스인(Mixin)과 포함(include)

 

CSS

/* 반복되는 속성은 일일이 작성해야 함 */
.button-primary {
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
}
 
.button-secondary {
  padding: 10px;
  border-radius: 5px;
  background-color: gray;
}

SCSS

@mixin button-style($bg-color) {
  padding: 10px;
  border-radius: 5px;
  background-color: $bg-color;
}
 
.button-primary {
  @include button-style(blue);
}
 
.button-secondary {
  @include button-style(gray);
}

 

4. 상속(Extends)

 

SCSS

%base-button {
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}
 
.button-primary {
  @extend %base-button;
  background-color: blue;
}
 
.button-secondary {
  @extend %base-button;
  background-color: gray;
}