WEB UIUX/Sass \ SCSS

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #6(믹스인)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) 3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트) 4탄 - 2022.10.28 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #4(주석사용과 중첩규칙(nesting), 단축속성 중첩, 상위선택자 참조) 5탄 - 2022.1..

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #5(변수)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) 3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트) 4탄 - 2022.10.28 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #4(주석사용과 중첩규칙(nesting), 단축속성 중첩, 상위선택자 참조) # 변수 스타일을 작..

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #4(주석사용과 중첩규칙(nesting), 단축속성 중첩, 상위선택자 참조)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) 3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트) # Sass는 한줄주석 (//)과 여러줄 주석(/* */)을 둘다 사용할 수 있다. - 한줄짜리 주석(//)은 컴파일 시 css파일에 반영되지 않고 - 여러줄 주석(/* */) 만 반영되는 차이점이 있다! 프라이빗한 내용을..

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) 프롬프트나 터미널같이 명령어를 입력하여 컴파일을 진행하는 Sass명령행 인터페이스로 사용하기에 앞서 *node.js 를 설치해준다. *node.js - 명령행 인터페이스로 자바스크립트를 실행할 수 있는 자바스크립트 실행환경 설치를 완료하면 vscode에서 기본 파일셋팅을 하고 명령행 인터페이스를 쓰기전 node.js가 성공적으로 깔렸는지 확인한다. - 비쥬얼스튜디오의 터미널에서 명령어 nod..

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트)

1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 비쥬얼스튜디오를 켜고 Live Sass Compiler를 설치한다 1. Sass를 연습할 폴더 하나 만들기.. 2. index.html파일과 main.scss 파일 셋팅 3. scss파일에 스타일 작성하고 하단에 Watch Sass를 클릭! 그러면 main.scss파일이 main.css로 컴파일된 파일이 자동생성된다. watch Sass를 계속 활성화 해두면 실시간으로 css파일에 컴파일됨! **** sass로 scss구문을 빌드할때 주의할점 빌드한 css파일은 건들지 않는게 좋다. 왜냐하면 어차피 다시 빌드하면 다 덮여서 수정되기때문이다! **** ..

WEB UIUX/Sass \ SCSS

[Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..)

Sass(syntactically Awesome StyleSheets) - Sass는 CSS의 전처리기로 규모가 큰 프로젝트에서 굉장히 효율적이고 편리하게 쓰인다. - css는 스타일을 계속 반복해서 써주어야해서 코드 길이가 길어질수록 수정에 불편함이 있다 하지만 Sass와SCSS는 코드 조각들을 만들어 쏙쏙 사용하기에 그 조각들만 수정하면 돼서 편하다고 한다! - Sass와 SCSS는 서로 같다고 볼 수 있다 한다. 둘이 사용하는 구문은 아주 조금 다르지만 둘중 어떤 구문을 사용하더라도 Sass를 사용하는 것이다!(Sass로 컴파일 하기에..) - Sass의 동작흐름 *.sass > sass전처리기 > *css 이 과정을 컴파일 이라고 한다. 이 과정이 필요한 이유는 브라우저는 Sass의 구문을 이해하..

카이아
'WEB UIUX/Sass \ SCSS' 카테고리의 글 목록