- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
HTML [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법
2024.08.09 00:50
[HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법
[SCSS] HTML에 SCSS 적용하는 법
또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다.
SCSS를 사용하면 CSS 코드가 훨씬 간결해진다.
HTML에 SCSS 적용하는 방법
- 툴에 프로젝트를 생성한다.
- 해당 프로젝트 안에 'index.html'파일을 만들어 준다.
- 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다.
- css 폴더 안에 style.css와 style.scss 파일을 생성한다.
- index.html에 css코드를 불러온다.
→ scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된다.
css에 scss 내용이 자동으로 작성되게 하는 방법
툴에서 터미널을 열어 명령어를 입력한다.
npx sass --watch css/style.scss css/style.css
- npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻.
- --watch : 소스에 변형이 일어날 때마다 자동으로 컴파일을 시켜주는 명령어.
- css/style.scss css/style.css : 'css폴더 안에 style.scss가 css폴더 안에 style.css파일로' 라는 뜻.
터미널에 위 사진과 같이 나오면 정상적으로 style.scss의 내용이 style.css로 컴파일 된것이다.
그리고 css 폴더 안을 보면 style.css.map 파일이 생성된 걸 확인할 수 있다.
테스트
1. index.html에서 div 박스를 하나를 만들고 그 안에 h3 태그로 글을 하나 써준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCSS 사용해보기</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box">
<h3>흠냐리</h3>
</div>
</body>
</html>
2. style/scss에 스타일을 작성하고 저장한다.
.box {
background-color: greenyellow;
h3 {
color: deeppink;
}
}
→ style.css 파일을 열어보면 style.scss 파일에 입력한 내용이 적혀 있는 걸 볼 수 있다.
(scss파일에서 .box를 한번만 입력했는데 css파일에서 .box가 2개 입력되어 있는 것을 확인할 수 있다.)
출처: https://arajo.tistory.com/442 [아라 메모장:티스토리]
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.