이번에 nextjs 기초 course 졸업작품을 하면서 border-radius를 여태 사용해본것과 다르게 조금 다르게 사용해봤다.
관련해서 border-radius를 찾아보고 적용한 내용과, nextjs 기초 course에 적용한 부분을 간략하게나마 기록하려고 한다.
사실 이번 과제를 하기 이전까지는 border-radius를 정말 1차원적으로만 사용했다.
radius. 즉 반지름 반큼 box 모서리에 굴곡 round를 준다고 이해하고 사용했었고, 원형모양으로 만들고 싶을때는 50%를 줘서 사용했었다.
근데 이번 과제를 확인하고 어떤식으로 구현하면 좋을까... 레퍼런스를 찾아보면서 border-radius에 대해서 다시 찾아볼 수 있었다.
자세한 과제의 내용은 스포가될 수 있고 동시에 운영진들에게도 피해가 될거라고 생각해서 언급은 최대한 하지 않도록 하겠음!
일단 과제에 적용할 css를 뭐랄까 사람이 직접 손으로 그린 느낌이 들도록 하고 싶었다.
image source
이런식으로 container들의 shape을 만들고 싶었고 결과적으로 4개의 모서리가 모두 각각 다른 border-radius를 갖고가야 하는데~ 라는 생각에 레퍼런스를 찾아봤다.
찾아보니 4개의 모서리에 서로다른 radius를 설정할 수 있다는건 알았지만, 1개의 값이 아닌 2개의 값을 설정해줄 수 있다는것을 알게되었다.
무슨말이냐? 라운드값은 원형이나 타원형으로 설정할 수 있고 아니면 정사각형으로 내버려둘 수 있다.
즉 raidus를 0으로 하면 라운드 없이 정사각형으로 설정한다는 의미이고, 1개의 값을 넣어주면 원형의 라운드가 적용되고, 2개의 값을 넣어주면 타원형의 라운드를 줄 수 있다는 의미다!
image source
/* the corner is a circle */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;
/* the corner is an ellipse */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;따라서 각각 4개 모서리의 radius를 타원형으로 설정해서 값을 잘 조정하면 손으로 네모를 그린것처럼 휘어진? 느낌을 줄 수 있을거라고 생각했다.
결과적으로 적절한 font와 shadow 그리고 4개의 서로다른 radius를 사용해서 초기에 원하는것 처럼 사람이 손으로 직접 그린 느낌과 비슷하게 구현할 수 있었다.
 |  |
|---|
+ 추가로 며칠전에 github account가 터지고나서 글을 올렸는데 트렌딩에 올라가있다!? ㅋㅋ 재밌는거 같다
