100일 CSS 챌린지 #6 : 프로필

문제

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

 

Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.
프로필: 혹시 자신이 만든 소셜 미디어 프로필이 몇 개인지 아는 사람이 있나요? 분위기 환기를 위해 당신은 당신만의 프로필을 직접 만들수도 있습니다.

 

내 풀이

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

잘린 원호 만들기

width: 70px;
height: 70px;
border-radius: 50%;
clip-path : inset(0 5px 0 0);

잘린 원호를 만들기 위해 나는 위와 같이 원을 만든 후, clip-path를 이용하여 한쪽을 잘라주었다.

 

border-color: $brown $brown $brown transparent;

모범 답안을 보니 한쪽만 색칠하지 않는 방식으로 해결한 것을 보았다. 다음부터 반원이나 사분원이 필요하다면 이 방법을 이용하자.

 

기타

box-sizing: border-box;로 크기 맞추기, flax로 레이아웃 맞추기

 

예시 모범답안

See the Pen 006 - Profile by Matthias Martin (@roydigerhund) on CodePen.