목차
베타리더 후기 vii
시작하며 x
이 책에 대하여 xii
PART I Sass 시작하기
CHAPTER 1 Sass를 소개합니다 3
1.1 CSS 전처리기 3
1.2 Sass를 사용해야 하는 이유 5
__1.2.1 낮은 진입 장벽 5
__1.2.2 유용한 기능과 안정성 5
__1.2.3 Sass 라이브러리와 확장 5
1.3 Sass 작동 원리 6
__1.3.1 명령행 인터페이스 7
__1.3.2 프로젝트에 Sass 도입 시 주의할 점 8
1.4 Sass의 두 가지 문법 8
요약 9
CHAPTER 2 Sass 설치하기 10
2.1 웹브라우저와 코드 에디터 10
__2.1.1 웹브라우저 설치 10
__2.1.2 코드 에디터 설치 12
2.2 비주얼 스튜디오 코드 확장 기능 Live Sass Compiler 15
__2.2.1 Live Sass Compiler 설치하기 15
__2.2.2 Live Sass Compiler 사용하기 19
2.3 Sass 설치하기 25
__2.3.1 Sass 설치하기 25
__2.3.2 Sass 명령어 사용하기 34
__2.3.3 Sass 설치 및 테스트를 마치며 38
요약 38
CHAPTER 3 Sass 기초 40
3.1 주석과 중첩 40
__3.1.1 Sass 주석 40
__3.1.2 Sass 중첩 규칙 42
3.2 상위 선택자 참조와 단축 속성 중첩 46
__3.2.1 상위 선택자 참조 46
__3.2.2 상위 선택자와 결합하지 않고 치환만 하는 경우 48
__3.2.3 네임스페이스 중첩 50
3.3 변수 51
__3.3.1 CSS 변수와 Sass 변수 비교 52
__3.3.2 Sass 변수는 언제 어떻게 사용할까? 54
3.4 믹스인 55
__3.4.1 믹스인 사용법 55
__3.4.2 믹스인 호출 시 인수 전달하기 57
__3.4.3 믹스인 기본 인수 설정하기 60
__3.4.4 믹스인 콘텐츠 블록 62
3.5 Sass 함수 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 불리언과 null 85
요약 87
CHAPTER 4 Sass 고급 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.1 Sass 미디어 쿼리 102
__4.3.2 Sass 문법을 활용한 미디어 쿼리 103
4.4 빌트인 모듈 106
__4.4.1 sass:list 106
__4.4.2 sass:map 107
__4.4.3 sass:math 108
__4.4.4 sass:string 109
요약 109
PART II Sass를 이용한 클론 코딩 프로젝트
CHAPTER 5 자몽톡 클론 코딩 113
5.1 자몽톡 만들기 113
5.2 프로젝트 구조 만들기 117
__5.2.1 프로젝트 폴더 생성 117
__5.2.2 Sass 파일 구조 자세히 살펴보기 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
CHAPTER 6 더덕마켓 클론 코딩 164
6.1 아르바이트 구인 서비스 페이지 만들기 164
6.2 프로젝트 구조 만들기 167
__6.2.1 프로젝트 폴더 생성 167
__6.2.2 Sass 파일 생성 및 임포트 168
6.3 프로젝트 진행 169
__6.3.1 페이지 헤더 만들기 169
__6.3.2 정보 섹션 만들기 177
__6.3.3 구인공고 섹션 만들기 180
__6.3.4 배너 만들고 메인 콘텐츠 마무리하기 186
__6.3.5 페이지 푸터 만들기 190
APPENDIX A Sass 문법과 유사한 모던 CSS 기능 385
A.1 중첩 규칙 198
A.2 함수 200
A.3 조건문 204
마치며 205
찾아보기 207
시작하며 x
이 책에 대하여 xii
PART I Sass 시작하기
CHAPTER 1 Sass를 소개합니다 3
1.1 CSS 전처리기 3
1.2 Sass를 사용해야 하는 이유 5
__1.2.1 낮은 진입 장벽 5
__1.2.2 유용한 기능과 안정성 5
__1.2.3 Sass 라이브러리와 확장 5
1.3 Sass 작동 원리 6
__1.3.1 명령행 인터페이스 7
__1.3.2 프로젝트에 Sass 도입 시 주의할 점 8
1.4 Sass의 두 가지 문법 8
요약 9
CHAPTER 2 Sass 설치하기 10
2.1 웹브라우저와 코드 에디터 10
__2.1.1 웹브라우저 설치 10
__2.1.2 코드 에디터 설치 12
2.2 비주얼 스튜디오 코드 확장 기능 Live Sass Compiler 15
__2.2.1 Live Sass Compiler 설치하기 15
__2.2.2 Live Sass Compiler 사용하기 19
2.3 Sass 설치하기 25
__2.3.1 Sass 설치하기 25
__2.3.2 Sass 명령어 사용하기 34
__2.3.3 Sass 설치 및 테스트를 마치며 38
요약 38
CHAPTER 3 Sass 기초 40
3.1 주석과 중첩 40
__3.1.1 Sass 주석 40
__3.1.2 Sass 중첩 규칙 42
3.2 상위 선택자 참조와 단축 속성 중첩 46
__3.2.1 상위 선택자 참조 46
__3.2.2 상위 선택자와 결합하지 않고 치환만 하는 경우 48
__3.2.3 네임스페이스 중첩 50
3.3 변수 51
__3.3.1 CSS 변수와 Sass 변수 비교 52
__3.3.2 Sass 변수는 언제 어떻게 사용할까? 54
3.4 믹스인 55
__3.4.1 믹스인 사용법 55
__3.4.2 믹스인 호출 시 인수 전달하기 57
__3.4.3 믹스인 기본 인수 설정하기 60
__3.4.4 믹스인 콘텐츠 블록 62
3.5 Sass 함수 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 불리언과 null 85
요약 87
CHAPTER 4 Sass 고급 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.1 Sass 미디어 쿼리 102
__4.3.2 Sass 문법을 활용한 미디어 쿼리 103
4.4 빌트인 모듈 106
__4.4.1 sass:list 106
__4.4.2 sass:map 107
__4.4.3 sass:math 108
__4.4.4 sass:string 109
요약 109
PART II Sass를 이용한 클론 코딩 프로젝트
CHAPTER 5 자몽톡 클론 코딩 113
5.1 자몽톡 만들기 113
5.2 프로젝트 구조 만들기 117
__5.2.1 프로젝트 폴더 생성 117
__5.2.2 Sass 파일 구조 자세히 살펴보기 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
CHAPTER 6 더덕마켓 클론 코딩 164
6.1 아르바이트 구인 서비스 페이지 만들기 164
6.2 프로젝트 구조 만들기 167
__6.2.1 프로젝트 폴더 생성 167
__6.2.2 Sass 파일 생성 및 임포트 168
6.3 프로젝트 진행 169
__6.3.1 페이지 헤더 만들기 169
__6.3.2 정보 섹션 만들기 177
__6.3.3 구인공고 섹션 만들기 180
__6.3.4 배너 만들고 메인 콘텐츠 마무리하기 186
__6.3.5 페이지 푸터 만들기 190
APPENDIX A Sass 문법과 유사한 모던 CSS 기능 385
A.1 중첩 규칙 198
A.2 함수 200
A.3 조건문 204
마치며 205
찾아보기 207
기본 적립금
2배 적립금