개발야옹

CSS media queries

media queries 는 단말기의 유형과 어떡 특성이나 수치 ( 화면 해상도, view port, 너비 등 ) 에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용.

media queries는 CSS3에 포함되어 있으며, media type ( screen, tv, print ... ) 와 하나 이상의 expression으로 구성된다. 

ex) 

아래 예시의 경우 width (너비) 가 500px 이하 일 때의 배경색상을 white로 적용한다는 의미이다. 

@media ( max-width : 500px ) {
	background : white;
}

출처 :https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

& Ampersand

상위 선택자 참조.

ex 1)

.btn {
	position : absolute;
}

.btn.active {
	color : blue;
}


/* Ampersand 활용 */

.btn{
	position : absolute;
    
    // & 가 btn으로 치환된다. 
    &.active{
    	color : blue;
    }
}

ex 2)

.list li : last-child {
	margin : 20px;
}

/* Ampersand 적용 */
.list {
	li{
    	// &가 li로 치환된다. 
    	&:last-child{
    		margin : 20px;
        }
    }
}

출처 :

https://sso-feeling.tistory.com/232

https://velog.io/@jch9537/CSS-SCSS-SASS