SCSS4 [scss] 파일명에 _ (언더바) 붙이는 이유 scss 파일명앞에 _를 붙여서 사용하는 경우가 종종 있다. 언더바를 왜 사용하는 것일까?? 우선 scss가 css로 컴파일된다는 것을 알고 있어야 한다. global.scss 는 css 파일로 컴파일된다. 하지만 _footer.scss 와 같이 작성한 scss 파일은 css파일로 컴파일되지 않는다. 그래서 언더바가 붙은 scss 파일은 css 파일로 변환되게 할 하나의 scss 파일에 import해서 사용한다. 그래야 css 로 불필요하게 바뀌는 일이 생기지 않기 때문! 2022. 6. 28. Vue deep 선택자 (deep selector) Deep Selector in Vue scoped vue에서 를 주면 해당 컴포넌트 안에서만 스타일 속성이 주어진다. ... .btn[data-v-e1123455]:hover { } 이런 방식으로 특정 vue 컴포넌트의 특정 요소에 지정되어 다른 컴포넌트에는 영향을 끼치지 않는다. scoped를 붙이지 않으면 글로벌하게 적용된다. deep 는 하위 컴포넌트에까지 영향을 끼치진 않는다. 만약 한 컴포넌트에 포함된 하위 컴포넌트까지 스타일을 적용하고 싶다면, deep selector를 사용해야 한다. // Vue2 /deep/ {} // deprecated ::v-deep // Sass >>> // without Sass // Vue3 /deep/ {} // deprecated >>> // deprecate.. 2022. 6. 13. Media Query 미디어 쿼리 사용 Media Query 미디어 쿼리 사용 미디어 쿼리의 사용 반응형 웹을 만들기 위해 사용한다. 크롬의 개발자 도구(f12)로 확인할 수 있는 모바일 기기의 크기 등, 웹 사이트를 각 단말에 맞게 적용하기 위해 사용한다. 사용방법 1) css 내부 삽입 ()괄호 안에 넣은 조건이 될 때 웹이 유동적으로 변한다. @media (max-width:700px) { .container { margin: 0; padding 0; } }2) 링크 연결 연산자 and 여러 미디어 특징을 하나로 결합 , 개별적인 미디어 쿼리 not 전체 미디어 쿼리를 부정 only 미디어 쿼리를 지원하는 클라이언트만 미디어 쿼리를 해석하라는 명령어. 생략 가능. 기본값은 only로 주어지기 때문에 일반적으로 명시해 작성하지 않음. Me.. 2022. 6. 3. scss 기본 문법 정리, css와의 차이점 scss는 중첩, 변수 선언, 연산자 등을 활용할 수 있다. CSS 코드와의 비교 css 코드 body { font: 100% Helvetica, sans-serif; color: #333; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } scss 코드 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } nav { ul { ma.. 2022. 5. 22. 이전 1 다음