CSS 체크리스트 - 나의 CSS 탐구일지

Why ?
기초부터 차근차근 알아보기 위해 CSS 체크리스트를 만들어 보았습니다.
나는 얼마나 CSS 지식을 가지고있고, 체크 할 수 있을지 궁금증이 생겨 시작하게 되었습니다.
Grid와 Flex를 적절하게 사용하면서 Laylout을 만드는것은 쉽지 않은 일이 였습니다.
다알고 있다 자만했던 나를 반성하며 다시 기초부터 다져보려 합니다.

✅ CSS 체크리스트

🔴 기초

1. line-style을 쓸 수 있다.
2. link로 css를 연결 할 수 있다.
3. tag에 style를 적용 할 수 있다.
4. HTML에 class를 만들어서 style을 적용 할 수 있다.
5. 마우스 hover시 색상을 바꿀 수 있다.
6. selector가 뭔지 알고 있다.
7. class selector가 뭔지 알고 있다.
8. id selector가 뭔지 알고 있다.
9. Selector의 우선순위 개념을 알고 있다.
10. Selector을 이용해서 하위 영역에 스타일을 적용할 수 있다.
11. 아래 코드가 무슨 의미인지 알고있다.

/* 예제1 */
#wrap a {background-color: red;}

/* 예제2 */
#wrap #inner a {background-color: blue;}

/* 예제3 */
#wrap div ul li a {color: yellow;}

/* 예제4 */
#wrap div ul .nav a {color: white;}

/* 예제5 */
div div li:nth-child(2) a:hover {border: 10px solid black;}

/* 예제6 */
div li:nth-child(2) a:hover {border: 10px dashed black;}

/* 예제7 */
div div .nav:nth-child(2) a:hover {border: 10px double black;}

🟠 CSS 이론

1. CSS 렌더링 순서를 설명할 수 있다.
2. Selector의 우선순위 개념을 알고 있다.
3. !important에 대해서 알고 있다.
4. input의 placeholder 색상을 바꿀 수 있다.
5. ::after나 ::before 그리고 content를 알고 있다.
6. ::after나 ::before 그리고 content에서 실전에서 사용되는 팁을 알고 있다.
7. vertical-align과 text-align의 차이점을 알고있다.
8. svg의 색상을 글자 색상으로 바꿀 수 있다.
9. #fff와 #ccc가 무슨 색인지 알고 있다.
10. r, g, b 값이 있으면 색상을 만들 수 있다.
11. 반투명한 색상을 만들 수 있다.

🟢 CSS Box Model

1. Inline과 Block, Inline-block의 개념을 알고 있다.
2. Box Model을 알고 있다. (margin, border, padding, content)
3. box-sizing: content-box 와 border-box의 차이를 알고 있다.
4. margin과 padding을 설명 할 수 있다.
5. border와 outline의 차이를 알고 있다.
6. 배경색과 배경이미지를 바꿀 수 있다.
7. 배경이미지를 반복해서 설정 할 수 있다.
8. cover, cotain의 차이를 알고 있다.
9. 스크롤시 배경이미지를 고정하는 CSS 효과를 줄 수 있다.

🔵 Flexbox Layout

1. flexbox를 알고 있다.
2. flexbox로 가로로 컨텐츠를 배치 할 수 있다.
3. flexbox를 이용해서 컨텐츠를 가운데에 배치할 수 있다.
4. flexbox를 이용해서 컨텐츠를 원하는 위치에 배치할 수 있다.
5. flexbox로 컨텐츠간의 고정 간격을 지정 할 수 있다.
6. flexbox로 컨텐츠간의 반응형으로 간격을 지정 할 수 있다.
7. flexbox내의 컨텐츠를 반응형으로 크기를 지정할 수 있다.
8. flex:1, flex:2 의 숫자 값의 의미를 알고 있다.
9. flexbox로 여러줄의 Grid 뷰를 만들 수 있다.
10. flexbox에서 Grid 형태일때 배치하는 방법을 알고 있다.
11. 디자인을 보고 어디에 어떤 flexbox을 써야 할 지 판단하고 작성할 수 있다.
12. 나만의 flexbox를 작성하는 루틴이 있다.
13. flexbox에서 img나 svg의 크기가 자동으로 줄어들때 대처 방법을 알고 있다.
14. flexbox에서 컨텐츠의 원본크기를 유지하는 방법을 알고 있다.

🟤 Grid Layout

1. grid와 flexbox를 같이 사용하여 레이아웃을 만들 수 있다.
2. grid에서 gap의 의미를 알고 있다.
3. repeat와 1fr의 의미를 알고 있다.
4. minmax, min-content, max-content를 알고 있다.
5. grid-area를 이용해서 레이아웃을 작성할 수 있다.
6. grid에서 line의 의미를 알고 있다.
7. grid에서 span의 의미를 알고 있다.
8. grid에서 dence의 의미를 알고 있다.

🙌 Episode

한주 동안 배운 내용을 모두 적기란 쉽지 않은 작업이였습니다.
Grid에대해 정리를 하다가 Velog를 가벼운 마음으로 쭉쭉 읽어 가고 있었어요.
이론적인 내용보다는 재미있고 쉽게 공부 할 수 있는 방법은 없을까 생각하던중 '이거다!'하는 콘텐츠가 나타났습니다.
바로 Teo님의 Velog였어요. 같은 내용인것도 아닌것도 있고 주관적으로 작성한것도 있습니다.
리스트는 CSS과정이 계속 되는동안 업로드를 계속해서 진행하고 수정해 보려고 해요.
개인의 공부자료로만 쓸것이며 소중한 자료 만들어주신 Teo님에게 감사의 마음을 전하고 싶습니다.🙏