- 전체
- 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
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 8 | 제로보드 XE의 최근 게시글 5개를 DB에서 직접 조회 | 졸리운_곰 | 2020.08.04 | 456 |
| 7 | python 으로 XE mysql 쿼리로 자동 게시물 등록하기 | 졸리운_곰 | 2020.03.03 | 448 |
| 6 | [WP]외부 게시판을 IFRAME으로 넣기 | 졸리운_곰 | 2019.01.30 | 533 |
| 5 | XE(제로보드) 게시판 내 스크립트 사용하기 | 가을의곰 | 2017.06.18 | 734 |
| 4 | XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기. | 가을의곰 | 2017.06.18 | 308 |
| 3 | 예제를 통해 쉽게 읽어보는 XE모듈개발 시작하기 | 졸리운_곰 | 2016.05.10 | 585 |
| 2 | [시니시즘] 비회원에게 파일 다운로드 권한이 없다고 뜰 때 | 졸리운_곰 | 2016.04.14 | 766 |
| 1 | XE 템플릿 구문 | 졸리운_곰 | 2015.05.12 | 1135 |