100일 CSS #1 : 시작!

문제

https://100dayscss.com/days/1/

 

100 Days CSS: An easy start into the challenge with a custom build number with gradient.
100일 CSS : 직접 만든 숫자, 그라디언트와 함께하는 챌린지의 쉬운 시작

배경을 그라디언트로 만들고, 숫자 모양을 직접 만들어주면 되는 문제

 

내 풀이

See the Pen 100 DAYS CSS CHALLENGE : Day #1 by dobbyjang0 (@dobbyjang0) on CodePen.

 

SCSS

이번 기회에 SCSS를 처음 사용해보았는데, 자식 선택자를 >*로 표시하는 것을 몰라서 좀 해매었다. 또 SCSS 쓰면 BEM 명명법은 필요없는게 아닌가 느끼기도 하였다.

 

정 가운데 맞추기

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

탬플릿을 봐서 위와 같이 중심을 맞추는 법을 알게되었다. top, left에 50%를 주어 왼쪽 위 끝을 정 가운데로 맞춘다. 이 상태에서 박스 크기의 반만큼 평행이동을 하여 가운데로 맞춘다.

 

>* {
  margin : 10px auto;
  text-align: center;
}

이후 자식요소들은 다음과 같이 맞추어주었다. 정 가운데 맞추기는 항상 어렵다.

 

크기 조절

가장 애먹었던 부분이었다. <p> 태그는 font-size와 line-height로 크기가 정해지며, font-size가 변화하면 margin도 변화한다는 사실을 잘 몰랐었다. 또 이번 기회에 box-sizing을 처음 써봤다.

 

예시 모범답안

See the Pen 001 - 100 Days CSS by Matthias Martin (@roydigerhund) on CodePen.