- 전체
- 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 [아라 메모장:티스토리]
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 13 | [Next.js 개발] pm2 로 Next.js 실행하기 | 졸리운_곰 | 2025.07.01 | 480 |
| 12 | [Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현 | 졸리운_곰 | 2024.03.09 | 560 |
| 11 |
[Next.js 개발] Using Next.js Version 13
 | 졸리운_곰 | 2024.03.09 | 409 |
| 10 |
[Next.js 개발] Common Errors in Next.js and How to Resolve Them
| 졸리운_곰 | 2024.03.09 | 468 |
| 9 | [Next.js 개발] [Javascript] 현재 날짜, 시간 구하기 | 졸리운_곰 | 2024.03.09 | 431 |
| 8 |
[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용
| 졸리운_곰 | 2024.03.07 | 500 |
| 7 |
[Next.js 개발] [React] useEffect에서 async/await
| 졸리운_곰 | 2024.03.06 | 362 |
| 6 |
[next.js 개발] How to use fetch API in Next.js?
| 졸리운_곰 | 2024.03.05 | 368 |
| 5 | [next.js 개발] Next.js14에 Mysql연결하기 | 졸리운_곰 | 2024.03.05 | 458 |
| 4 |
[next.js 개발] How To Connect MySQL And Auth To A Next.js App
| 졸리운_곰 | 2024.03.05 | 323 |
| 3 |
[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리
| 졸리운_곰 | 2024.03.05 | 523 |
| 2 | [next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것 | 졸리운_곰 | 2024.03.05 | 555 |
| 1 | [next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이) | 졸리운_곰 | 2024.03.05 | 457 |