CSS 하나 하나의 동작들을 이해하는 건 그렇게 어렵지 않은거 같네요.
아마 반복하면 잘 하실 거 같아요. 

다만 CSS로 창의적인 무엇인가를 만들어 내는 능력은 굉장한 거 같습니다.~ 
(정형화 되있는 웬만한 백엔드 개발보다 훨씬 어려운거 같습니다. 개인적으론 ^^) 

1. 태극문양 만들기 

    #yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: red;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
    }
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid red;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: red;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }

2. CSS로 귀여운 봉투애니메이션 만들기
3. CSS로 귀여운 날씨 토글 만들기
4. CSS 맵 크리에이터
5. CSS로 쿨한 달력만들기

@하마 답변 감사합니다. 이해해보려고 노력해봐야겠네요

근데 저런 창의적인 무언가를 만드는 능력도 프론트엔드 개발자에게 필요한 부분인가요?

YYYYYY / 

너무 걱정하지 마세요.
저런거 뚝딱 만드는 분들은 CSS에 진심이고 좀 더 특별한 능력을 가진 것이라고 보고요.
저런것 못 만들어도 보편적으로 사용되는 정형화된 표현력으로도 대개 충분합니다.

(저런 것을 만드는건 "재능"도 문제지만 "여유"와 도 관련 있는 거 같습니다. 저런 거 만드는데 들어가는 CSS 집중에 대한 노력과 시간에 대한 보상을 직장에서 그리고 스스로에게 얻지 못 할 것 같은 여유 없음 이랄까... 그 시간에 자바스크립트도 공부해야하고, 업무도 공부해야하고...타입스크립트도 공부해야하고...백엔드도 공부해야하고...CS도 공부해야하고..뭐도 공부해야하고... ㅎㅎ 일요일날 취미로 카페가서 CSS로 노는걸 즐기는 사랑 까지 가기가 쉽지 않죠.."그냥 가져다 쓰자~")

다만 어떤 기술이든 깊게 팔 수록 어렵다는 것을 보여주고 싶었습니다.

애초에 html 이랑 css 이랑 난이도 차이 있어요.

css 도 js랑 비등하게 공부할게 많아요

Css로 뱅글뱅글 돌아가는 별을 만드는 걸 보고

감탄한 게 벌써 6년 전의 일이군요.

CSS 어렵습니다.

백엔드는 정말 잘하시는데, CSS 어려워서 프론트엔드 말고 백엔드 오셨다는분들도 은근 많아요.

잘 갖다 쓰기만 해도 될것 같습니다

그럴려면 대충이라도 이게 무슨 기능인지는 알아야 하는 것 같습니다

css 진짜 어려워요 고수들이 만든거보고 따라 계속 만드는 거 연습하는 수밖에는 없는듯

css는 개체들간의 상호작용을 잘 알아야 합니다 그걸 모르면 매우 어렵게 느껴지죠 

takin17 // 개체들간의 상호작용을 알려면 어떻게 해야될까요? 도움되는 사이트나 방법이 있을련지요 

좋은 글과 좋은 댓글이다

이 정도면 따라할 수 있겠다싶은 웹페이지 하나 찾아서

그거 크롬에서 개발자모드로 html, css 소스 찍어서 보시면서 일단 똑같이 따라서 만들어 보세요

안 되는거나 색깔 같은 건 개발자모드로 찍어서 긁어오셔서 일단 똑같이 만들어보세요

비슷하게 만들어졌으면 구글검색으로 예쁜 디자인같은 거 찾아서(소스 찾아서) 좀더 꾸며보세요

그렇게 하다보면 감이 좀 잡혀요

남의 소스, 디자인 따라서, 베끼면서 만드는 거 여러번 해보면 실력이 늘어요

참고로 웹페이지 전체가 아니라 딱 한 페이지…

예를 들면 여러회사 로그인 페이지만 찾아서 보시면서 그 중 적당한 거 골라서 띠라하셔도 돼요

따라하기 적당한 범위나 스타일이 제가 보기엔 로그인 페이지더라구요 ^^