1. vscode에서 확장 프로그램 다운로드
2. 확장 프로그램 > 설정> 확장 설정
3. settings.json에서 편집을 누르고, 세팅을 시작한다.
세팅 내용은 아래 코드와 같으며, 주석은 본인이 작성하였다.
{
"workbench.startupEditor": "none",
"editor.fontFamily": "D2Coding",//가독성
"editor.tabSize": 2,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"editor.minimap.enabled": false,//우측에 있는 미니맵 유무, 현재는 없음. 필요하면true로 설정.
"editor.stickyScroll.enabled": false,
"liveServer.settings.donotShowInfoMsg": true,
"translation.provider": "google",
"window.zoomPerWindow": false,
"editor.mouseWheelZoom": true,//마우스로 화면 크기 조절
"terminal.integrated.mouseWheelZoom": true,
"window.confirmSaveUntitledWorkspace": false,
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"liveServer.settings.donotVerifyTags": true,
"editor.fontLigatures": false,
"explorer.confirmPasteNative": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"liveSassCompile.settings.autoprefix": [
007E
],
"liveSassCompile.settings.forceBaseDirectory": "",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],//이 부분 중요.
"liveSassCompile.settings.includeItems": [],
"color-highlight.sass.includePaths": [],
"liveSassCompile.settings.useNewCompiler": false,
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],
"security.workspace.trust.untrustedFiles": "open",
"liveServer.settings.CustomBrowser": "chrome",
"editor.wordWrap": "on",
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"typescript": "tsx"
},
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.altClickMovesCursor": false,
"terminal.integrated.autoReplies": {},
"editor.fontVariations": false,
"terminal.integrated.enableMultiLinePasteWarning": false,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"eslint.workingDirectories": [],
"eslintConfig": {
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"plugins": ["react"],
"rules": {
"react/self-closing-comp": "error"
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"terminal.integrated.fontSize": 16,
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.ChromeDebuggingAttachment": false,
"powermode.presets": "exploding-rift",
"json.schemas": [],
"json.format.enable": false,
"editor.lineHeight": 0,
"editor.fontSize": 15
}
= 깃허브에 있는 사진 속 내용(properties)과 키값(default)을 settings.json에 붙여넣기해서 설정완료하였음.
4. 파일 생성 후, 하단에 있는 watch scss 클릭하면 watching...으로 바뀜.
5.scss을 만들면 css> .css파일이 만들어짐. 이후 html파일에 css파일을 링크 걸어줌 (scss를 링크걸면 안됨.)
scss에서 설정하는데로 css에 자동으로 들어감.
선택자를 중첩해서 사용하는 scss 문법 = 네스팅이라고 함.
!!!! 수정 시 scss에서 해야지, css파일에서 수정하면 안됨. 설정은 될지라고 그렇게 사용하면 안됨.!!!!!
BODY는 개별적으로 사용하자.
위와 같이 사용할 수 있음. 공통되는 부모를 적고, 그 하위로 &로 처리하면 된다.
scss에서 작성하면 css에 이런식으로 적용됨.
오버했을때, (:hover) &:hover로 사용.
@at-root 사용법.
5) 변수 사용. variables
