본문 바로가기

웹 개념

CSS - "&", ":", cursor은 멀 의미하는 걸까?

728x90

A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.

e.g.

h1 {
    &.class {

    }
}

is equivalent to:

h1.class {

}

 

 


cursor 속성

개요

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

  • auto: 자동
  • default: 기본값 (화살표)
  • pointer: 손가락 모양 (클릭 가능한 버튼)
  • wait: 로딩

등 다양한 종류의 값이 있습니다.

 


가상 요소(pseudo element)

  • 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다.
  • 가상 요소 : 미리 정의해 놓은 위치에 삽입되도록 약속되어 있는 보이지 않는 요소

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.

728x90