100일 CSS 챌린지란?
Link To 👉 100일 CSS 챌린지
100일동안 주어진 문제를 CSS로 구현해 보는 챌린지이다!
CodePen 아이디를 사용하여 참여할 수 있다.
위와 같은 이미지 (움직이는 이미지도 有)들을 HTML과 CSS(SCSS)를 이용하여 똑같이 만들면 된다!
JS도 사용 가능하지만 CSS로만 하는 것을 지향한다고 한다~
100일동안 열심히 달려봐야지!!
DAY #1
문제 )
100 Days CSS: An easy start into the challenge with a custom build number with gradient.
- 내가 만든 CHALLENGE Code
알고보니 classname은 제공을 해주는 것 같은데 나는 내가 직접 정하느라고 고민을 좀 함ㅠㅠ
나는 SCSS가 편해서 SCSS를 사용했고, 템플릿에 reset code가 아무것도 없길래
무난히 전체 마진, 패딩값 0만 설정해 주었다. (실제 프로젝트에서는 *선택자 사용을 지양하라고 하지만, 여기서는 그냥 간단하게 적기 위해 사용함)
* {
margin: 0;
padding: 0;
}그리고 나름 쉽지만은 않았던 저 숫자 100 모양 만들기!!
number박스에 position relative를 주고 숫자박스 하나하나 absolute를 이용해 위치를 잡아줘야 한다 ㅋㅋ
그리고 제일 까다로웠던 숫자 1....
number_1 박스를 rotate시켜 툭 뒤어나온 부분이 1자 기둥 뒤에 딱!! 가려질 수 있게 위치를 잡는데 시간을 많이 씀 ㅋㅋㅋ
그리고 또 하나의 어려움.... 바로 숫자 0.... (그냥 다 어렵네)
저렇게 구멍이 뻥!! 뚫린 모양 즉, 도넛모양을 만들때 내가 원래 사용하던 방법은
그냥 원을 그려놓고 원태그에 ::after를 사용해서 가상태그로 작은 원을 만든 다음, 그것을 원의 정중앙에 올려놓아 뒷 배경색이랑 색깔을 맞추어 그저 구멍이 뻥 뚫려보이게 눈속임 하는 방법을 사용했었다...
하지만 이건 그렇게 하면 뒤에있는 그라디언트 배경이랑 색을 맞출수가 없었다 😭
그래서 서치를 한 결과, 원을 만들어 border를 주는데, 이때 border 굵기를 굵게 주면 저렇게 뚱뚱한 도넛 모양이 된다는 사실을 알게 되었다!! 👍👍
사실 쉽게만 봤던 첫 번째 문제였는데, 생각보다 까다로운 점이 많은 문제였다...
하지만 푸는 과정이 재미있었음 ㅎㅎ
😊
다음 문제도 차근차근히 풀어 봐야겠다!!
끝
