border: 0 vs. border: none

결론
border: 0 쓰자! 👻

 

 

보더 없앨 때 none 보다 0을 썼었는데 이유는 그게 더 치기 편하니까 🙄 (손꾸락은 소중하자나여)

그러다 어느날 앗 내가 혀를 어디다 두고 있었지! 를 자각하는 것처럼 0과 none의 차이가 뭐지!를 자각해버린 바람에

정리하는.. 그런... 글....

 

일단 W3C의 문서를 촤르륵 훑어보면 border 단축 속성은 border-width, border-style, border-color 를 한번에 적용할 수 있다.

여기서 0과 none의 차이가 갈린다.

 

border: 0;	border: none;
border-width: 0;	border-width: medium;
border-style: none;	border-style: none;

즉, border-width를 0으로 만드느냐, 아니면 초기값(medium)으로 냅두느냐의 차이가 있다.

 

 

따라서 아래와 같이 border-style을 적용시켰을 때, border: none;은 이미 width 값이 있기 때문에 보더가 그려지게 된다.

 

 

See the Pen Untitled by nanalike (@nykim_) on CodePen.

 

 

 

덧붙여, border: hidden; 속성을 쓰는 방법도 있다!

이 경우 border-style: hidden;이 되므로 border-style: none; 처럼 보더를 숨길 수 있다.

none이나 hidden이나 큰 차이는 없지만, 차이점이 있다면 테이블 내 보더 간 충돌이 일어날 때 none의 우선순위가 낮다는 것.

 

테이블 내에서 border-collapse: collapse; 를 적용하면 각 셀들이 보더를 공유하게 되는데,
이때 누구 보더를 쓸 것인가 싸움이 일어나게 된다.

이 과정에서 어떻게 충돌을 무마시킬 것인지(?) 정해놓은 규칙이 있다고 한다.

 

1. border-style: hidden; 은 충돌하는 다른 모든 보더보다 우선순위가 높다.
2. border-style: none; 은 가장 낮은 우선순위를 갖는다. 이 가장자리에서 만나는 모든 요소의 보더 속성이 none인 경우에만 보더가 숨겨진다. (하지만 border-style의 디폴트값이 none 이긴 함)
3. 어느 것도 border-style: hidden; 이 아니고, 그중 적어도 하나가 border-style: none이 아니라면 더 두꺼운 보더를 사용하게 된다. 만약 여러 개가 동일한 border-width 를 갖는다면 double - solid - dashed - dotted - ridge - outset - groove - inset 순으로 우선순위가 낮아진다.
4. 테두리 스타일 중 border-color만 다른 경우, 셀에 설정된 스타일이 row, row group, column, column group, table 동일한 유형의 두 요소가 충돌하면 좌측(테이블 방향을 오른쪽으로 지정했다면 우측) 상단의 요소가 우선시 된다.

 

 

 

아무튼 결론은 캐스캐이딩 과정에서 꼬일지도 모르니 0을 쓰는 것이 낫다! 는 게 이유인 듯. (일단 짧으니까.. 짧은 게 최고...)

 

 

 

참고한 글

Should I use 'border: none' or 'border: 0'? - stackoverflow