자몽톡과 더덕마켓 클론 코딩으로 배우는 Sass (반양장)

자몽톡과 더덕마켓 클론 코딩으로 배우는 Sass (반양장)

$25.00
Description
문법이 아닌 스타일 설계 감각을 익히다
모던 CSS 기능이 늘어나면서 스타일을 정리할 수 있는 선택지가 많아졌지만, 여전히 규모 있는 프로젝트에서는 구조를 세우고 반복을 줄이는 일이 쉽지 않다. 이 책은 CSS를 이미 써본 사람, 그래서 오히려 더 답답해진 사람을 위해 Sass를 제대로 쓰는 방법을 안내한다. Sass를 새롭게 외우는 대신, 모던 CSS와의 관계 속에서 CSS를 더 잘 쓰기 위한 확장 도구로 이해시키고, 왜 이런 기능이 필요한지부터 실제로 어디에 써야 효과가 나는지까지 기준을 제시한다.
주석과 중첩 규칙 같은 기초부터 변수, 믹스인, 함수, @extend까지 핵심 기능을 차근히 다루고, 조건문과 미디어 쿼리로 스타일을 더 유연하게 구성하는 방법도 정리한다. 후반부에는 ‘자몽톡’ 메신저 앱과 ‘더덕마켓’ 중고 장터 사이트 클론 코딩 실습을 통해 공통 스타일 분리, 페이지와 컴포넌트 단위 모듈화, 재사용 가능한 스타일 구조를 직접 만들어보며 체득하도록 구성했다.
AI가 코드를 만들어주는 시대일수록 스타일이 깨졌을 때 이를 판단하고 고칠 수 있는 사람이 강하다. CSS를 기본기로 삼고, 모던 CSS, Sass, SCSS를 상황에 맞게 선택하며, 더 깔끔하고 유지보수 가능한 스타일을 만들고 싶은 프런트엔드 개발자와 퍼블리셔에게 든든한 출발점이 되어줄 책이다.
저자

강윤호

현재직업훈련교사로활동하며,온·오프라인교육현장에서프로그래밍과IT기술을가르치고있다.클래스101,인프런등다양한플랫폼과교육기관에서강의경험을쌓아왔으며,복잡한기술을이해하기쉽게전달하는데에꾸준히관심을가지고있다.웹앱을비롯한다양한애플리케이션을보다사용하기편하고보기좋게만드는일에흥미를느끼며,CSS를비롯한웹기술은물론파이썬,인공지능,로봇분야까지폭넓게학습하고교육콘텐츠로풀어내는것을즐긴다.유튜브채널‘유노코딩’을통해IT지식을공유하며,학습자에게실질적인도움이되는설명과예제를만들기위해노력하고있다.

목차

베타리더후기vii
시작하며x
이책에대하여xii

PARTISass시작하기
CHAPTER1Sass를소개합니다3
1.1CSS전처리기3
1.2Sass를사용해야하는이유5
__1.2.1낮은진입장벽5
__1.2.2유용한기능과안정성5
__1.2.3Sass라이브러리와확장5
1.3Sass작동원리6
__1.3.1명령행인터페이스7
__1.3.2프로젝트에Sass도입시주의할점8
1.4Sass의두가지문법8
요약9

CHAPTER2Sass설치하기10
2.1웹브라우저와코드에디터10
__2.1.1웹브라우저설치10
__2.1.2코드에디터설치12
2.2비주얼스튜디오코드확장기능LiveSassCompiler15
__2.2.1LiveSassCompiler설치하기15
__2.2.2LiveSassCompiler사용하기19
2.3Sass설치하기25
__2.3.1Sass설치하기25
__2.3.2Sass명령어사용하기34
__2.3.3Sass설치및테스트를마치며38
요약38

CHAPTER3Sass기초40
3.1주석과중첩40
__3.1.1Sass주석40
__3.1.2Sass중첩규칙42
3.2상위선택자참조와단축속성중첩46
__3.2.1상위선택자참조46
__3.2.2상위선택자와결합하지않고치환만하는경우48
__3.2.3네임스페이스중첩50
3.3변수51
__3.3.1CSS변수와Sass변수비교52
__3.3.2Sass변수는언제어떻게사용할까?54
3.4믹스인55
__3.4.1믹스인사용법55
__3.4.2믹스인호출시인수전달하기57
__3.4.3믹스인기본인수설정하기60
__3.4.4믹스인콘텐츠블록62
3.5Sass함수65
__3.5.1함수사용법65
__3.5.2매개변수사용법에따른함수의형태68
__3.5.3가변인수70
3.6@extend지시자71
__3.6.1@extend사용법71
__3.6.2유령스타일블록만들기73
__3.6.3믹스인과의비교75
3.7@debug지시자와값78
__3.7.1@debug지시자78
__3.7.2숫자와문자열80
__3.7.3리스트와맵82
__3.7.4불리언과%00;85
요약87

CHAPTER4Sass고급88
4.1제어문88
__4.1.1@if조건문89
__4.1.2@while반복문과@for반복문93
__4.1.3@each반복문96
4.2모듈화99
__4.2.1@import지시자99
__4.2.2@import사용법100
4.3미디어쿼리102
__4.3.1Sass미디어쿼리102
__4.3.2Sass문법을활용한미디어쿼리103
4.4빌트인모듈106
__4.4.1sass:list106
__4.4.2sass:map107
__4.4.3sass:math108
__4.4.4sass:string109
요약109

PARTIISass를이용한클론코딩프로젝트
CHAPTER5자몽톡클론코딩113
5.1자몽톡만들기113
5.2프로젝트구조만들기117
__5.2.1프로젝트폴더생성117
__5.2.2Sass파일구조자세히살펴보기118
5.3프로젝트진행121
__5.3.1로그인페이지만들기121
__5.3.2내비게이션바만들기129
__5.3.3헤더바만들기133
__5.3.4채팅미리보기만들기137
__5.3.5폰트어썸사용하기143
__5.3.6폰트어썸아이콘추가하기148
__5.3.7채팅추가하기154
__5.3.8채팅입력폼추가하기160

CHAPTER6더덕마켓클론코딩164
6.1아르바이트구인서비스페이지만들기164
6.2프로젝트구조만들기167
__6.2.1프로젝트폴더생성167
__6.2.2Sass파일생성및임포트168
6.3프로젝트진행169
__6.3.1페이지헤더만들기169
__6.3.2정보섹션만들기177
__6.3.3구인공고섹션만들기180
__6.3.4배너만들고메인콘텐츠마무리하기186
__6.3.5페이지푸터만들기190

APPENDIXASass문법과유사한모던CSS기능385
A.1중첩규칙198
A.2함수200
A.3조건문204
마치며205

찾아보기207

출판사 서평

따라하며배우는실전Sass,SCSS스타일원칙
이책은Sass문법을나열하는사용설명서가아닙니다.규모가커질수록복잡해지는CSS를어떻게구조화하고,반복을줄이고,유지보수가능한스타일로바꿀수있는지를다룹니다.이미CSS를써봤고,그래서오히려더답답해진분들을위해Sass를CSS를더잘쓰기위한확장도구로설명하는실전가이드입니다.

이책만의특별한점
Sass를왜써야하는지부터출발합니다.CSS전처리기라는개념,Sass의작동원리,두가지문법의차이를먼저이해한뒤에문법으로들어갑니다.기능을외우게하기보다언제쓰고언제쓰지말아야하는지를판단할수있도록기준을제시합니다.
1.문법보다구조와판단기준에집중
주석과중첩규칙같은기본부터변수,믹스인,함수,@extend까지핵심기능을다루되,CSS변수와Sass변수를비교하고믹스인과@extend를구분하며선택기준을분명히합니다.Sass를목적이아니라수단으로다루는관점을계속유지합니다.
2.실제프로젝트흐름을그대로옮긴클론코딩
'자몽톡'메신저앱과'더덕마켓'중고장터사이트를클론코딩하며파일구조설계,공통스타일분리,페이지와컴포넌트단위모듈화를직접경험합니다.예제수준이아니라실제서비스구조에가까운흐름으로Sass가어디서힘을발휘하는지체감하게합니다.
3.Sass문법과유사한모던CSS기능부록제공
중첩규칙,함수,조건문등Sass와개념적으로닮아있는모던CSS기능을부록으로정리했습니다.Sass를배우며자연스럽게최신CSS흐름까지함께이해할수있도록구성해,기술선택의폭을넓히고상황에맞는판단이가능하도록돕습니다.

이책은누가읽으면좋을까요?
●CSS를써봤지만프로젝트가커질수록관리가힘들어졌던분
●Sass를배워보고싶었지만언제써야할지감이안잡혔던분
●프런트엔드개발이나웹퍼블리싱에서스타일구조를한단계끌어올리고싶은분

이책에서다루는내용은무엇인가요?
●CSS전처리기와Sass의개념과작동원리이해
●주석과중첩,상위선택자참조와네임스페이스정리
●변수,믹스인,함수,@extend의역할과선택기준
●조건문과반복문을활용한유연한스타일구성
●미디어쿼리와모듈화를통한반응형스타일설계
●클론코딩프로젝트를통한실무중심Sass활용경험