<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[이지혜, 프론트엔드 웹 개발자]]></title><description><![CDATA[Freelance Front-end Web Developer]]></description><link>https://heyjihye.com/blog/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><generator>GatsbyJS</generator><lastBuildDate>Sun, 01 Oct 2023 04:49:40 GMT</lastBuildDate><atom:link href="https://heyjihye.com/rss.xml" rel="self" type="application/rss+xml"/><author><![CDATA[이지혜]]></author><copyright><![CDATA[© 2017-2023 이지혜 All rights reserved.]]></copyright><language><![CDATA[ko]]></language><managingEditor><![CDATA[ghe.lee19@gmail.com (이지혜)]]></managingEditor><webMaster><![CDATA[ghe.lee19@gmail.com (이지혜)]]></webMaster><category><![CDATA[Tech]]></category><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><category><![CDATA[개발블로그]]></category><creativeCommons:license>https://creativecommons.org/licenses/by-nc-nd/4.0/</creativeCommons:license><item><title><![CDATA[Gatsby Cloud에서 Netlify로 배포 플랫폼 변경하기 — Gatsby Cloud 서비스 종료 대응]]></title><description><![CDATA[배포 플랫폼 Gatsby Cloud 서비스 종료 9월부터 사용하지 않던 Netlify로부터 Gatsby Cloud 서비스 종료 이메일을 몇 개 받았어요.

Netlify 공식 블로그의 공지 글 "Netlify Announces the Evolution of Cloud Platform"을 볼까요.

Netlify는 2023년 2월에 Gatsby를 인수했어요. Netlify와 Gatsby Cloud는 비슷한 서비스이기 때문에 효율화를 위해 Gatsby Cloud 서비스를 종료해요. (2023년 9월부터…]]></description><link>https://heyjihye.com/blog/deploy-to-netlify-from-gatsby-cloud/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-deploy-to-netlify-from-gatsby-cloud</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sun, 01 Oct 2023 04:40:00 GMT</pubDate><media:content url="https://heyjihye.com/static/2420ea25eeb22d493ba2b6c2fc747a89/0d4d1/gatsby-netlify.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Gatsby Cloud에서 Netlify로 배포 플랫폼 변경하기 ]]&gt;</media:title></media:content></item><item><title><![CDATA[업비트 웹사이트에서 자동으로 로그인을 연장하는 북마클릿 사용법]]></title><description><![CDATA[삶의 질을 높이고자 나 대신 로그인 연장버튼을 눌러주는 간단한 자바스크립트 코드를 만들어서 공유해요. 북마클릿으로 사용하고 있는데 매우 만족스럽답니다. 🏝️ 이 프로젝트는  upbit-web-login-forever에서 확인할 수 있어요. 북마클릿 사용하기

아래 북마클릿을 브라우저의 즐겨찾기(북마크)로 등록합니다.

업비트 웹사이트에 로그인 후 1)에서 등록한 즐겨찾기를 클릭합니다.

화면 상단에  영역이 보입니다. 마우스를 올리면 툴팁으로 안내사항이 보여요.

로그인 '연장' 버튼이 생기면 자동으로…]]></description><link>https://heyjihye.com/blog/upbit-web-login-forever-bookmarklet/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-upbit-web-login-forever-bookmarklet</guid><category><![CDATA[Programming]]></category><category><![CDATA[bookmarklet]]></category><category><![CDATA[upbit]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 29 Jul 2023 12:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/e230ae7ccca4b6882d1def1242309970/0d4d1/upbit-web-login-forever-bookmarklet.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ 업비트 웹사이트에서 자동으로 로그인을 연장하는 북마클릿 사용법 ]]&gt;</media:title></media:content></item><item><title><![CDATA[명령어 기초 — 최소한으로 알아야 할 CLI 개념과 필수 명령어]]></title><description><![CDATA[준비물 🍏 맥OS: 맥OS가 설치된 개발 환경이 필요해요. 이 글은 운영체제에 따라 매우 달라지는 내용을 다루며, 맥OS 기준으로만 설명해요.
기본 개념

셸, 셸 프롬프트, 터미널 등 용어는 명확히 구분되지 않고 사용되기 때문에 헷갈릴 수 있어요. 아래 3가지 개념만 이해하세요.

명령행(Command Line): 명령어를 입력하여 프로그램을 실행하는 텍스트 구문. 명령행 인터페이스(CLI, Command Line Interface): 명령행 방식을 통해 기능을 제공하는 인터페이스. 명령 프롬프트, 터미널, 셸, 콘솔이라고도 해요. 명령행 프로그램: 명령행 인터페이스를 제공하는 프로그램. 셸, 셸 프로그램이라고도 해요.

명령행 프로그램을 실행하면 터미털 창이 나타나요. 셸 프롬프트에 명령행을…]]></description><link>https://heyjihye.com/blog/command-line-for-beginners/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-command-line-for-beginners</guid><category><![CDATA[Programming]]></category><category><![CDATA[Shell]]></category><category><![CDATA[CLI]]></category><category><![CDATA[개발 환경설정]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 08 Jul 2023 09:30:00 GMT</pubDate><media:content url="https://heyjihye.com/static/8ea163326ce55f2343aa10fa330b8925/0d4d1/command-line-for-beginners.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ 명령어 기초 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Crontab UI를 사용해서 파이썬 스크립트를 주기적으로 실행하는 법]]></title><description><![CDATA[Crontab UI 소개 Crontab UI는  작업을 웹 UI로 쉽게 관리할 수 있게 해주는 노드 패키지에요.

맥을 사용하면 내장된 으로  작업을 관리할 수 있지만 터미널을 사용한 명령어 인터페이스에 익숙해야 해요. Crontab UI를 사용하면 GUI로 편리하게 관리할 수 있어요. 👍

Crontab UI 사용법
플러그인 설치

터미널을 열고  명령어로 패키지를 설치해요.

Crontab UI 실행하기

설치가 완료되면…]]></description><link>https://heyjihye.com/blog/how-to-use-crontab-ui/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-how-to-use-crontab-ui</guid><category><![CDATA[Dev]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 03 Jun 2023 14:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f8cdb855297e197b308de00006aae654/0d4d1/crontab-ui.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Crontab UI를 사용해서 파이썬 스크립트를 주기적으로 실행하는 법 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Google 태그 관리자(GTM) 설치하기]]></title><description><![CDATA[준비물 💜 Gatsby v5 웹사이트: Gatsby로 만든 웹사이트가 필요해요. 없다면 먼저 Gatsby 웹사이트를 만들어 보세요. → Gatsby Quick Start 👩‍🎓 Google 태그 관리자에 대한 지식: Google 태그 관리자(GTM)에 대해 알고 있어야 해요. → Google 태그 관리자
Google 태그 관리자를 왜 사용 하나요?

웹사이트를 개발하면 웹 분석을 위해 Google 애널리틱스, 카카오…]]></description><link>https://heyjihye.com/blog/gatsby-google-tagmanager/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-gatsby-google-tagmanager</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 20 May 2023 09:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/59fa8c2d2d6b9ea75b84df743f55f2fa/0d4d1/gatsby-google-tagmanager.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Google 태그 관리자(GTM) 설치하기 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Font Awesome 6 사용하기 — react-fontawesome 패키지 사용법]]></title><description><![CDATA[준비물 💜 Gatsby v5 웹사이트: Gatsby로 만든 웹사이트가 필요해요. 없다면 먼저 Gatsby 웹사이트를 만들어 보세요. → Gatsby Quick Start  Font Awesome 사용 계획:
6 버전 사용: 최신 버전인 6 버전을 사용할 계획이어야 해요. 5 버전과 일부 기능과 선택할 수 있는 아이콘이 달라요. 참고 Versions of Font Awesome SVG+JS 방식 사용: 리액트 컴포넌트를 SVG로 변환하는 방식을 사용해요. WebFonts+CSS 방식을 사용하기 위한 설정은 이 글에서 설명하지 않아요. 참고 Web Fonts vs SVG 무료 아이콘만 사용: 유료…]]></description><link>https://heyjihye.com/blog/gatsby-fontawesome/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-gatsby-fontawesome</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 06 May 2023 11:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/379744203b0d0be77aa6282e9fe696f3/0d4d1/gatsby-fontawesome.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Font Awesome 6 사용하기 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Font Awesome 아이콘 크기 버그 해결 — SSR/SSG 기능을 위한 필수 설정하기]]></title><description><![CDATA[준비물 💜 Gatsby v5 웹사이트: Gatsby로 만든 웹사이트가 필요해요. 없다면 먼저 Gatsby 웹사이트를 만들어 보세요. → Gatsby Quick Start  Font Awesome 사용: React 용 패키지를 설치하고 관련 컴포넌트를 사용해야 해요. -> Font Awesome 6 사용하기
문제: 웹사이트 첫 화면에서 Font Awesome 아이콘이 매우 컸다가 작아져요

이 문제는 아래와 같은 환경에서 확인할 수 있어요.

 컴포넌트를 페이지에 포함하고 있어야 해요…]]></description><link>https://heyjihye.com/blog/gatsby-fontawesome-fix-huge-icons/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-gatsby-fontawesome-fix-huge-icons</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Thu, 27 Apr 2023 10:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/a20b0c09b68756db600f325d30e70b2e/0d4d1/gatsby-fontawesome-fix-huge-icons.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Font Awesome 아이콘 크기 버그 해결 ]]&gt;</media:title></media:content></item><item><title><![CDATA[RSS 피드 추가하기 — gatsby-plugin-feed 사용법]]></title><description><![CDATA[준비물 👩‍🎓 RSS 개념 및 명세에 대한 지식: RSS가 무엇인지 혹은 피드에 어떤 내용을 써야 할지 모르겠다면? 이 글을 먼저 읽어보세요. → RSS 피드 💜 Gatsby 웹사이트: Gatsby로 만든 웹사이트가 필요해요. 없다면 먼저 Gatsby 웹사이트를 만들어 보세요. → Gatsby Quick Start 📰 콘텐츠: 블로그 포스트나 기사, 팟캐스트 등 계속 발행하는 콘텐츠가 있어야 해요.

💁‍♀️ 예시는 타입스크립트로 작성했어요. 타입스크립트가 아닌 자바스크립트를 사용하나요? 예시에서 타입 정보를 빼고 봐주세요.

Gatsby 웹사이트에 RSS 피드 추가하기

기능을 추가하기 위해 Gatsby 공식…]]></description><link>https://heyjihye.com/blog/gatsby-rss/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-gatsby-rss</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Fri, 21 Apr 2023 10:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/d9967f224c23d56b1ec1f6dec6282a60/0d4d1/gatsby-feed-v2.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ RSS 피드 추가하기 ]]&gt;</media:title></media:content></item><item><title><![CDATA[RSS 피드 — 콘텐츠를 지속 발행하는 웹사이트의 필수 기능]]></title><description><![CDATA[RSS 피드가 뭐예요? RSS 피드(=RSS 채널)은 발행 주체인 채널과 발행한 콘텐츠 정보를 담고 있는 웹 피드 중 하나에요. 블로그, 기사, 웹툰, 웹소설, 팟캐스트 등 시리즈 콘텐츠를 발행 즉시 독자/청취자/시청자에게 전달하기 위해 많이 사용해요.

웹 콘텐츠를 구독하기 위한 표준 웹 피드

웹 피드는 뉴스 기사처럼 자주 발행되는 콘텐츠를 사용자에게 제공(=웹…]]></description><link>https://heyjihye.com/blog/rss-feed/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-rss-feed</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Sat, 15 Apr 2023 15:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/e2f321936c5599727a4419ba41bbe5b3/0d4d1/rss-feed-v2.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ RSS 피드 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 식별자 이름 — 표기법과 특이사항]]></title><description><![CDATA[식별자 이름 표기법 일반적으로 CSS에서 사용하는 클래스 이름은 모두 소문자로 작성합니다. 그리고 대부분의 개발자는 다음의 두 가지의 표기법 중 하나를 사용할 것입니다. 이 중에서 뱀 표기법보다는 케밥 표기법이 더욱 많이 쓰입니다.

Sass에서도 식별자 이름에 따른 규칙이 강제로 정해진 것은 없지만 CSS와 거의 비슷하게 사용합니다. 케밥 표기법과 뱀 표기법 중 선호 하는 것을 사용하면 되겠죠. 참고로 Sass의 내장 함수 이름은 모두 케밥 표기법을 따릅니다.

하이픈과 밑줄

Sass 식별자 이름에서…]]></description><link>https://heyjihye.com/blog/sass-identifiers/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-identifiers</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Fri, 28 Jul 2017 07:33:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 식별자 이름 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 변수와 !default 플래그 — 조건부로 변수 정의하기]]></title><description><![CDATA[플래그를 알아보기 전에 변수를 재정의하는 기본 방식부터 알아보도록 하겠습니다. 변수 재정의

모든 프로그래밍 언어에서 변수가 그렇듯이 Sass에서도 변수에 값을 다시 정의2할 수 있습니다. 즉 변수에 값을 재할당할 수 있는데, 변수를 참조하기 전 가장 나중에 작성한 값이 변수의 값입니다.

변수 기본값 정의 

이렇듯 변수를 재정의할 때 작성 순서가 아주 중요하다는 것을 알았습니다. 그런데 Sass에는 이런 값 할당의 우선순위를 바꿀 방법이 있습니다. 바로  플래그입니다. 이 플래그는 변수값과 세미콜론  사이에 작성합니다. CSS에서  플래그…]]></description><link>https://heyjihye.com/blog/sass-variables-default-flag/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-variables-default-flag</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Thu, 20 Jul 2017 08:44:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 변수와 !default 플래그 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 변수 $ — 변수를 정의하고 사용하기]]></title><description><![CDATA[변수 변수 정의하기

변수 이름은 반드시  달러 기호로 시작합니다. 그러므로 변수가 어디서 어떻게 사용되는지 한 눈에 알아볼 수 있습니다.
 변수를 정의하는 문법은 CSS 속성 구문과 같이  형태를 띱니다.

변수 사용하기

변수는 다양한 곳에서 사용할 수 있지만 가장 기본적인 사용법은 속성값으로 할당하는 것입니다.]]></description><link>https://heyjihye.com/blog/sass-variables/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-variables</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Thu, 20 Jul 2017 07:42:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 변수 $ ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 대화형 셸 — SassScript 간편 실험실]]></title><description><![CDATA[SassScript 표현식을 스타일시트에서 작성하기 전에 대화형 셸을 이용하여 헷갈리는 데이터 유형이나, 애매하고 복잡한 변수, 함수 연산의 결과를 미리 확인하면 표현식의 결과를 명확히 할 수 있습니다. 또한, Sass 파일을 생성하지 않고 SassScript 표현식을 직접 작성하고 결과를 바로 얻을 수 있으므로 문법을 배우는 단계에서 실습하기에 좋습니다. 대화형 셸 사용법
맥의 '터미널'이나 윈도우의 '명령 프롬프트' 등 운영체제가 제공하는 기본 커맨드라인 인터페이스나, IDE가 내장한 커맨드라인 인터페이스를 엽니다. 를 입력한 후  혹은 을 누릅니다.2 가 표시되며…]]></description><link>https://heyjihye.com/blog/sass-interactive-shell/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-interactive-shell</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Wed, 19 Jul 2017 08:56:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 대화형 셸 ]]&gt;</media:title></media:content></item><item><title><![CDATA[SassScript — 작지만 강력한 확장 기능 모음]]></title><description><![CDATA[숫자, 문자열, 색상, 목록, 맵 등 다양한 데이터 유형을 제공하며, 이를 변수에 담아 활용하고, 연산자를 이용해 연산할 수 있습니다. 끼워 넣기  기법과 부모 스크립트 도 Sass의 활용 범위를 넓히는 데 큰 역할을 합니다. SassScript 사용 범위

SassScript를 사용하는 활용 범위를 크게 두 가지로 나누어 정리해봤습니다. 참 다양한 곳에 표현식을 사용할 수 있군요. 자세한 활용법과 예시는 각 부분의 페이지에서 다시 볼 수 있으니, 여기에선 큰 맥락을 살펴보는 차원에서 봐주시길 바랍니다.

직접 사용

변수, 연산, 함수를 값으로 직접…]]></description><link>https://heyjihye.com/blog/sass-sassscript/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-sassscript</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Wed, 19 Jul 2017 04:36:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ SassScript ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 인라인 주석과 블록 주석 — 출력 스타일에 맞춰 Sass 주석 활용하기]]></title><description><![CDATA[인라인 주석 인라인 주석은 출력 옵션에 상관없이 모두 CSS 출력물에서 삭제됩니다. 그러므로 최종 CSS 출력물에는 없어도 되는 개발용 내용 등을 자유롭게 작성할 수 있습니다.

블록 주석 

블록 주석은 출력 스타일에 따라 CSS 출력물에 다양하게 표시됩니다. (1)기본 스타일인 'nested'와 'expanded'에서는 그대로 출력되며, (2)출력 스타일이 'compatible'이면 여러 줄에 작성한 주석을 모두 한 줄로 표시합니다. (3)출력 스타일이 'compressed'이면 블록 주석은 삭제됩니다.]]></description><link>https://heyjihye.com/blog/sass-comments/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-comments</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Mon, 17 Jul 2017 09:01:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 인라인 주석과 블록 주석 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass CSS 확장 기능 — 중첩과 특수 선택자로 CSS 확장하기]]></title><description><![CDATA[중첩 중첩 은 CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법입니다. 여기에는 선택자를 중첩하는 '규칙 중첩'과 속성을 중첩하는 '속성 중첩'이 있습니다.

규칙 중첩

CSS 규칙을 중첩하여 작성할 수 있습니다. 규칙 중첩 은 부모 선택자를 계속 반복하지 않게 해줍니다. 특히 하위 선택자를 많이 사용하는 복잡한 CSS 규칙을 간단하게 작성할 수 있으며, 그 구조를 한눈에 볼 수 있습니다.]]></description><link>https://heyjihye.com/blog/sass-css-extensions/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-css-extensions</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Fri, 14 Jul 2017 08:07:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass CSS 확장 기능 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass는 SCSS로 쓰세요 — Sass를 Sass로 쓰지 않는 이유]]></title><description><![CDATA[Sass를 작성하는 문법은 두 가지입니다. 처음 Sass가 만들어질 때 함께 탄생한 Sass 문법과 대대적인 문법 개선으로 새로 추가된 SCSS 문법이 있습니다. 둘은 기능은 같지만, 문법적으로 모양새가 아주 다릅니다. 각 문법의 특징을 알아보면서 이유를 함께 살펴봅시다. CSS 호환성을 갖춘 SCSS 문법

SCSS는 2010년 5월 버전 3으로 업그레이드하면서 갖춰진 새로운 문법 체계입니다. Sassy CSS 의미를 함축한 SCSS를 영어 그대로 번역하면 '멋진 CSS'라고 할 수 있지만, 기존 Sass 문법은 줄이고 CSS…]]></description><link>https://heyjihye.com/blog/write-sass-with-scss/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-write-sass-with-scss</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Thu, 13 Jul 2017 13:30:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass는 SCSS로 쓰세요 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 시작하기 — 스타일시트를 작성하는 멋진 방법]]></title><description><![CDATA[CSS의 모든 문법과 함께 변수 , 중첩 규칙 , 믹스인 , 인라인 불러오기  등 다양한 기능을 지원합니다. Sass는 내용이 많은 스타일시트를 잘 정리하게 도와주며, (특히 컴퍼스 스타일 라이브러리2를 사용하면) 스타일시트를 빠르게 작성할 수 있게 해줍니다. 특징
CSS의 모든 문법을 지원하는 CSS 완전 호환성3 변수, 중첩, 믹스인 등 사용으로 언어 확장 색상 등 값을 처리하는 다수의 유용한 함수 라이브러리를…]]></description><link>https://heyjihye.com/blog/make-awesome-stylesheets-with-sass/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-make-awesome-stylesheets-with-sass</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Thu, 13 Jul 2017 08:03:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 시작하기 ]]&gt;</media:title></media:content></item><item><title><![CDATA[친절한 Sass 설명서 — 모두를 위한 꼼꼼한 가이드북]]></title><description><![CDATA[Sass 공식 참고문서는 Sass의 모든 기능1과 문법을 예시와 함께 자세히 설명하고 있습니다. 하지만 함축적으로 표현하여 쉽게 이해가 안 되는 부분도 있고 내용 자체가 어려운 부분도 있습니다. 이 글 시리즈는 공식 참고문서를 바탕으로 딱딱한 문장을 풀어서 설명합니다. 예시가 없이 문장으로만 작성하여 이해하기 어려운 부분은 내용에 따라 목록으로 정리하거나 예시 코드를 함께 보여줍니다. 나아가 서로 연관된 내용은 링크로 연결하여 연결성을 높이고 새로운 내용도 추가해 원문보다 넓은 범위의 내용을 담고 있습니다. 용어

Sas…]]></description><link>https://heyjihye.com/blog/sass-awesome-docs/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-awesome-docs</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Mon, 10 Jul 2017 09:00:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ 친절한 Sass 설명서 ]]&gt;</media:title></media:content></item><item><title><![CDATA[Sass 출력 스타일 — 4가지 CSS 양식 중 마음에 드는 것을 선택하세요]]></title><description><![CDATA[출력 스타일 4가지 중첩 

중첩 스타일은 Sass의 기본 출력 스타일로, CSS 스타일과 HTML 문서의 구조를 잘 보여줍니다. 각 속성은 한 줄에 작성하고, 각 규칙은 중첩 정도에 따라 들여쓰기합니다.

들여쓰기 덕분에 훑어만 봐도 스타일 구조를 쉽게 알 수 있으므로 큰 CSS 파일을 살펴볼 때 더욱 유용합니다.

확장 

확장 스타일은 사람이 작성한 CSS 스타일과 거의 같다고 할 수 있습니다. 속성은 규칙 안에서 들여쓰기하여 각 한 줄에 작성하고, 규칙은 들여쓰기하지 않습니다.]]></description><link>https://heyjihye.com/blog/sass-css-output-style/?utm_source=blog-feed&amp;utm_medium=feed&amp;utm_campaign=feed</link><guid isPermaLink="false">blog-sass-css-output-style</guid><category><![CDATA[Web Dev]]></category><category><![CDATA[웹개발]]></category><category><![CDATA[Programming]]></category><dc:creator><![CDATA[이지혜]]></dc:creator><pubDate>Fri, 07 Jul 2017 01:23:00 GMT</pubDate><media:content url="https://heyjihye.com/static/f4f4f83cbbed17f9390854c1a45d869f/0d4d1/sass-docs.webp" type="image/webp" width="1200" height="630"><media:title type="plain">&lt;![CDATA[ Sass 출력 스타일 ]]&gt;</media:title></media:content></item></channel></rss>