border-radius 50% vs 100%

1. border-radius 50% vs 100%

• 우리는 border-radius: 50%를 지정하여 원을 만들 수 있다.
• 그런데 타인의 코드를 보면 50%, 100% 등 2가지를 다양하게 쓰고 있다.
• 그렇다면 border-radius: 50%, 100%의 차이는 무엇일까?

(1). 원을 만들 때 차이

• 첫번째 div에는 border-radius: 50%, 두번째 div에는 100%를 지정해보았다.
• 아래 결과를 보면 알 수 있듯이 둘 다 원의 모습을 띤다.

See the Pen border-radius difference by KumJungMin (@kumjungmin) on CodePen.

(2). 모서리 별로 다르게 적용할 때 차이

• 한 모서리에만 border-radius를 줘서 부채꼴을 만들어보자.
• 이때, 50%, 100% 모두 원처럼 부채꼴이 될까? 아니다!
• 우리가 원하는 부채꼴을 만들기 위해서는 100%를 지정해줘야한다.
• 이처럼 각 모서리에 다른 border-radius를 지정하는 경우, 차이점을 알 수 있다.

See the Pen border-radius difference2 by KumJungMin (@kumjungmin) on CodePen.

출처
아래 링크를 찾아가면 더 자세히 알 수 있다구~

• stackoverflow, What is the difference between border-radius 50% and 100%?