border:none과 border:0의 차이점

이제껏 코딩을 하면서 border 값을 없애려고 할 때 border:none; 을 사용했었다.

우연히 다른 사람의 글을 통해 border:0;이 더 맞다는 걸 깨닫게 되고 정리해본다.

 

두 개의 p태그에 똑같은 css로 설정하고

첫번째 p 태그에는 border:none;

두번째 p 태그에는 border:0; 을 준 다음 border:style:dotted;를 설정해주니

이런 결과가 나왔다!.. 

border-style은 border:none 보다 우선 순위가 높아서 이런 현상이 발생되었다. 

border-style 다음에 border:none을 선언하면 캐스케이딩 원칙에 따라 후자가 적용된다. 

실수할지 모르니, 잘 알아두도록 하자.

 

 

 

See the Pen border test by yeji (@kimyeji) on CodePen.