테두리

개념 이해하기

테두리는 width, style, color의 조합이며 style이 없으면 보이지 않습니다. border-left처럼 한 방향만 강조선으로 사용할 수도 있습니다.

border 단축 속성 한 줄로 대상 요소의 네 변에 2px 초록 실선이 둘러집니다. 두 번째 상자도 같은 규칙을 받지만 .second에서 border: 0으로 네 변을 모두 지운 뒤 border-left로 왼쪽에만 6px 점선을 다시 그립니다. 두 선언의 순서를 바꾸면 border: 0이 왼쪽 선까지 지워 테두리가 하나도 남지 않습니다.

평소에는 테두리가 없다가 hover 때만 border를 더하면 그 굵기만큼 상자가 커져 주변 요소가 밀립니다. 처음부터 같은 굵기의 transparent 테두리를 두고 hover에서 색만 바꾸면 자리 이동 없이 강조할 수 있습니다.