[SCSS] Live SASS 익스텐션 설치 방법

vs code에서 Live SASS 익스텐션을 설치해 보겠습니다. 1. Live SASS 익스텐션 ① Live SASS Compiler란? SASS 혹은 SCSS를 사용하려면 CSS로 반드시 컴파일을 해줘야 하는데요. 이때 cmd를 이용해 명령어로 컴파일을 해줍니다. 컴파일 방법 자세한 컴파일 방법은 위의 버튼에서 확인해 주세요. 그런데 vs code에서는 익스텐션으로 자동으로 컴파일이 가능하다는 사실! 오늘은 vs code에서 그 익스텐션을 이용해 자동으로 컴파일하는 방법을 알아보겠습니다. 나는 대체 그동안 왜 이 기능을 안 썼는가... 2. Live SASS 익스텐션 설치 ① live sass compiler 검색 vs code 가장 왼쪽에 세로로 된 메뉴가 있습니다. 그중 가장 아래 버튼을 클릭하면..

coding/editor · 2023. 3. 17. 07:30

css와 scss에서 마우스 클릭 가상 클래스 선택자를 알아보자

hover는 많이 쓰는데 마우스 클릭에 해당하는 가상 클래스는 잘 쓰지 않아서 정리해볼 겸 가져와봤습니다. hover는 마우스 오버 시 가상 클래스랍니다. 1. :active ① :active - 일단 이녀석의 이름은 :active입니다. - 헷갈리니 :(콜론)을 꼭 붙여서 외워주세요. - :hover와 동일하게 사용합니다. 2. css에서 가상 클래스 선택자 사용하기 button:active{ } ① 뒤에 붙이기 - 가상 클래스 선택자는 이렇게 적용하고 싶은 위치 뒤에 붙여주시면 됩니다. - 뜨어쓰기는 안됩니다. - 그 다음은 똑같이 중괄호 안쪽에 내용을 적어주세요. 3. scss에서 가상 클래스 선택자 사용하기 button{ &:active{ } } ① & 연산자 활용 - 물론 scss에서도 css와..

coding/html + css · 2021. 9. 28. 09:30

scss를 위해 컴파일러를 설치해보자

scss의 준비단계 컴파일러를 설치해봅시다!! 하드가 날아가니 다시 설치해야 하는 게 한두 개가 아니네요. 그래도 그 김에 하나라도 더 소개해드릴 수 있어서 잘됐죠? 1. 명령 프롬프트 ① 검색 - 시작 줄에서 [cmd]를 검색해 명령 프롬프트를 열어주세요. - 단축키 [window + S]를 누르면 검색창이 바로 뜬답니다. ② 명령 프롬프트 - 이 까만 화면이 명령 프롬프트입니다. - scss를 사용하려면 미리 친해져 봅시다. 2. 컴파일러 설치 ① 명령어 입력 - 설치 방법은 명령어만 알면 간단합니다. - [gem install sass]를 입력해주세요. - 오타가 업나 살펴보고 [엔터]키를 눌러주세요. ② 성공적인 설치 - 엄청 길게 뭔가가 써지고 설치가 됩니다. - 설치가 잘 된다면 표시된 것처럼..

coding/html + css · 2021. 9. 24. 09:30

[sass/scss] 반복 스타일 한 번에 쓰기

css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..

coding/html + css · 2021. 9. 7. 09:30

[sass/scss] 변수 사용법

scss의 가장 큰 장점은 css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요. 변수만 가능해도 유지보수가 한결 수월해지죠. 1. 변수 선언 ① 변수 - 변수 선언 방법은 [$변수 명: 변수 값] 형태로 사용해주시면 됩니다. - 사용하실 때는 [$변수 명]을 적어주시면 된답니다. - 여기에서는 변수에 생상 값을 넣어주었어요. ① 변수 사용 - 위에서 언급했든 [$변수 명]을 적어주시면 사용 가능합니다. - 여기에서는 태그의 색상에 값을 넣어줬네요. 이렇게 원하는 곳에 적어주시면 됩니다. - 변수 명은 나중에 다른 사람이 읽어도 어떤 것인지 알 수 있게 되도록 쉽고 명료하게 적는 게 좋아요. 2. 변수의 범위 ① 전역 변수 - 변수가 적용되는 범위가 정해져 있습니다. - 지금처럼 전역 변수, 즉 어..

coding/html + css · 2021. 9. 2. 09:30