CSS 완벽가이드

CSS 핵심 개념과 동작 원리를 책을 통해 이해한 후 해당 내용을 정리하기 위해 만든 기록지입니다.

---

1. Index

01. CSS와 문서

02. 선택자

03. 우선순위와 캐스케이드

04. 값과 단위

05. 폰트

06. 텍스트 프로퍼티

07. 레이아웃 기본

08. 패딩, 보더, 외관선, 마진

09. 색깔, 배경, 그레이디언트

10. 플로트와 셰이프

11. 포지션

12. 플렉서블 박스 레이아웃

13. 그리드 레이아웃

14. 테이블 레이아웃

15. 리스트와 생성된 콘텐츠

16. 트랜스폼

17. 트랜지션

18. 애니메이션

19. 필터, 혼합, 자르기, 가르기

20. 미디어 전용 스타일

2. Table (ToDo)

Rule 😎
00. 목차 이름을 딴 브랜치를 만들고 브랜치로 별로 push를 한다.
01. 작성자를 뺴먹지 않고 작성한다.
02. 한 페이지의 정리가 끝나면 작은 제목의 내부 링크를 연결한다.
03. 페이지 경로는 contents/인덱스.목차이름/인덱스.제목.md (한글로 입력하기)
    * ex) contents/01.CSS와문서/1.웹스타일의간략한역사.md

04. 작성 내용은 default 포맷을 참고하여 작성한다. (contents/default.md 참고)
05. 이미지 첨부시 경로는 images/인덱스.목차이름/.(png | jpeg | jpg)
    * ex) images/01.CSS와문서/main.jpeg

06. 작성이 끝난 후 README.md 파일에서 완료 여부에 체크를 한다.

01장.CSS와 문서 😜

제목	페이지	작성자	완료
웹 스타일의 간략한 역사	21	Local	✔️
요소	23	Local
CSS와 HTML의 결함	29	Local
스타일시트 콘텐츠	40	Local
미디어 쿼리	46	Local
기능 쿼리	52	Local
요약	56	Local

02장.선택자 😚

제목	페이지	작성자	완료
기본 스타일 규칙	57	Santos	✔️
그룹화	63	Santos	✔️
클래스 선택자와 ID 선택자	70	Santos	✔️
속성 선택자	78	Santos	✔️
문서 구조	91	Santos	✔️
가상 클래스 선택자	102	Santos
가상 요소 선택자	140	Santos
요약	144	Santos

03장.우선순위와 캐스케이드 😋

제목	페이지	작성자	완료
우선순위	145	Local
상속	153	Local
캐스케이드	157	Local
요약	164	Local

04장.값과 단위 😝

제목	페이지	작성자	완료
키워드, 문자열, 기타 텍스트 값	165	Santos
숫자와 퍼센트	173	Santos
거리	174	Santos
계산된 값	186	Santos
프로퍼티 값	187	Santos
색상	188	Santos
각도	200	Santos
시간과 주파수	201	Santos
위치	202	Santos
커스텀 값	203	Santos

05장.폰트 🤨

제목	페이지	작성자	완료
폰트 패밀리	209	Local
@font-face 사용하기	216	Local
폰트 두께	232	Local
폰트 크기	241	Local
폰트 스타일	255	Local
폰트 스트레칭	259	Local
폰트 커닝	262	Local
폰트 변형	263	Local
폰트 기능	267	Local
폰트 합성	271	Local
font 프로퍼티	272	Local
폰트 매칭	278	Local
요약	280	Local

06장.텍스트 프로퍼티 🧐

제목	페이지	작성자	완료
들여쓰기와 인라인 정렬	283	Santos
인라인 정렬	293	Santos
단어 간격과 문자 간격	305	Santos
텍스트 변형	310	Santos
텍스트 장식	313	Santos
텍스트 렌더링	317	Santos
텍스트 그림자	319	Santos
공백 처리	320	Santos
줄바꿈과 하이픈	325	Santos
쓰기 모드	332	Santos
요약	341	Santos

07장.레이아웃 기본 🤪

제목	페이지	작성자	완료
기본 박스	343	Local
요소 디스플레이 변경	347	Local
인라인 요소	375	Local
요약	408	Local

08장.패읻, 보더, 외곽선, 마진 🤓

제목	페이지	작성자	완료
기본 요소 박스	409	Santos
패딩	412	Santos
보더	425	Santos
외곽선	473	Santos
마진	480	Santos
오약	491	Santos

09장.색깔, 배경, 그레이디언트 🥸

제목	페이지	작성자	완료
색깔	493	Local
배경	500	Local
그레이디언트	565	Local
박스 섀도	606	Local
오약	610	Local

10장.플로트와 셰이프 😀

제목	페이지	작성자	완료
플로트	611	Santos
클리어	629	Santos
셰이프	633	Santos
오약	651	Santos

11장.포지션 😃

제목	페이지	작성자	완료
기본 개념	653	Local
오프셋 프로퍼티	656	Local
너비와 높이	659	Local
콘텐츠 오버플로와 자르기	664	Local
요소 가시성	666	Local
absolute 포지션	667	Local
fixed 포지션	688	Local
relative 포지션	690	Local
sticky 포지션	693	Local
요약	697	Local

12장.플렉서블 박스 레이아웃 😄

제목	페이지	작성자	완료
플렉스박스 기초	699	Santos
플렉스 컨테이너	706	Santos
플렉스 아이템 정렬	725	Santos
플렉스 컨테이너	726	Santos
콘텐츠(가로)정렬	726	Santos
아이템 정렬	735	Santos
align-self 프로퍼티	742	Santos
콘텐츠(세로)정렬	744	Santos
플렉스 아이템	750	Santos
플렉스 아이템 전용 프로퍼티	755	Santos
flex 프로퍼티	756	Santos
flex-grow 프로퍼티	758	Santos
flex-shrink 프로퍼티	765	Santos
flex-basis 프로퍼티	777	Santos
flex 단축 프로퍼티	789	Santos
order 프로퍼티	795	Santos

13장.그리드 레이아웃 😆

제목	페이지	작성자	완료
그리드 컨테이너 생성	803	Local
기본 그리드 용어	806	Local
그리드 라인 배치	809	Local
그리드에 요소 연결	840	Local
그리드 흐름	861	Local
자동 그리드 라인	867	Local
grid 단축 프로퍼티	870	Local
그리드 공간 열기	875	Local
정렬과 그리드	883	Local
레이어와 순서	890	Local
요약	892	Local

14장.테이블 레이아웃 😅

제목	페이지	작성자	완료
테이블 포맷	893	Santos
테이블 셀 보더	910	Santos
테이블 크기	920	Santos
요약	933	Santos

15장.리스트와 생성된 콘텐츠 😂

제목	페이지	작성자	완료
리스트	935	Local
생성된 콘텐츠	950	Local
카운터 패턴 정의	970	Local
요약	997	Local

16장.트랜스폼 🤣

제목	페이지	작성자	완료
좌표계	999	Santos
트랜스폼	1003	Santos
트랜스폼 프로퍼티	1023	Santos
요약	1038	Santos

17장.트랜지션 🥲

제목	페이지	작성자	완료
CSS 트랜지션	1039	Local
트랜지션 관련 프로퍼티	1041	Local
처음 상태로 돌아가는 트랜지션	1069	Local
애니메이션을 적용할 수 있는 프로퍼티와 값	1074	Local
폴백:트랜지션은 필수가 아닙니다	1079	Local
트랜지션 인쇄	1080	Local

18장.애니메이션 😇

제목	페이지	작성자	완료
키프레임 정의	1084	Santos
키프레임 애니메이션 설정	1086	Santos
키프레임 선택자	1087	Santos
요소에 애니메이션 적용	1094	Santos
하나로 모아서	1136	Santos
애니메이션, 선택자 우선순위, 애니메이션 우선순위	1141	Santos
발작과 전정 장애	1143	Santos
애니메이션 이벤트와 접두사	1144	Santos
애니메이션 인쇄	1146	Santos

19장.필터, 혼합, 자르기, 가리기 😍

제목	페이지	작성자	완료
CSS필터	1147	Local
합성과 혼합	1155	Local
배경 혼합	1164	Local
클립과 마스크	1169	Local
마스크	1176	Local
객체 맞춤과 위치 지정	1194	Local

20장.미디어 전용 스타일 🥰

제목	페이지	작성자	완료
미디어 전용 스타일 정의	1199	Santos
페이지로 구분되는 미디어	1212	Santos
요약	1230	Santos

3. Reference

• css완벽가이드