본문 바로가기
728x90
300x250
SMALL

Front-end313

Sass(Scss) Shadowing 그림자 효과 Scss 지역 변수는 전역 변수와 같은 이름으로 선언 할 수 도 있다. 이 경우에는 같은 이름을 가진 두 개의 다른 변수 가 존재하고 하나는 지역 변수이고 다른 하나는 전역 변수 이다. 따라서 동일한 파일에서 작업하는 여러 개발자들이 있고 전역 변수 이름을 인식하지 못하고 같은 이름으로 지역 변수를 선언하는 경우 SassScript 실패에 대해 걱정할 필요가 없다. SCSS(SASS) $variable: global value; .content { $variable: local value; value: $variable; } .sidebar { value: $variable; } CSS .content { value: local value; } .sidebar { value: global value; }.. 2022. 1. 2.
vs code 2개 단어 검색 정규식 visual studio code에서 2개 단어 한꺼번에 검색하기 1. visual studio code에 돋보기 아이콘을 클릭하고 정규식 사용을 위해서 검색영역 제일 오른쪽에 정규식 사용 아이콘을 클릭합니다. 아래와 같이 검색합니다. (word1[\s\S\n]*word2)|(word2[\s\S\n]*word1) 예를들어서 h3과 img가 함께 있는 파일을 찾는다면 (h3[\s\S\n]*img)|(img[\s\S\n]*h3) 이렇게 검색해 주면 h3와 img가 함께 있는 html 파일을 찾아줍니다. 출처 : https://stackoverflow.com/questions/49944569/search-in-vs-code-for-multiple-terms 2021. 12. 31.
css order 속성 css의 order 속성은 flex나 grid 속성에서 엘리먼트의 배치 순서를 지정하는 속성입니다. 사용법은 z-index를 생각하면 이해하기 쉽습니다. 기본값은 order:0 이고 음수 양수를 지원하고 오름차순 정렬됩니다. 만약 order 갑이 같으면 순서대로 표시됩니다. html order0 order1 order2 order3 order test css .wrap {display:flex; list-style:none;flex-direction: column;} .wrap li:nth-child(1){ order:0;} .wrap li:nth-child(2){ order:1;} .wrap li:nth-child(3){ order:2;} .wrap li:nth-child(4){ order:3;} or.. 2021. 12. 30.
Sass variable(Scss 변수) Sass에서 변수를 사용하기 위해서는 $로 시작해야 하며 변수 값으로 올 수 있는 것은 문자, 숫자(px, em포함), 컬러(#1c6eff)가 있다. 1. SCSS 변수 사용예시 SCSS $font-stack: Helvetica, sans-serif; /* font-stack 변수선언 */ $primary-color: #333; /* primary-color 변수선언 */ body { font: 100% $font-stack; color: $primary-color; } CSS body { font: 100% Helvetica, sans-serif; color: #333; } 위와 같이 sass 변수를 사용하면 일괄적으로 관리하고 변경 가능하기 때문에 색상이 수정 되더라도 변수값만 수정 하면 되고 같은 .. 2021. 12. 27.
728x90
반응형
LIST