➖ Border and Outline

input태그를 styling하다 border속성과 outline속성의 차이가 무엇일까 궁금하여 작성한다.

Border

border은 요소의 안쪽선을 정의하도록 하는 속성이다.

• border은 element 안쪽에서 만들어진다.
• border은 공간을 차지한다.

border

      input {
        background-color: gray;
      }

border:none

      input {
        border: none;        
        background-color: gray;
      }

Outline

outline 속성은 요소의 바깥라인을 정의하도록 하는 속성이다.

• outline은 공간을 차지하지않는다.
• input태그에 outline: none을 지정하면 focus됐을 때 outline이 강조되지 않는다.
• outline은 element 바깥쪽에서 만들어진다.

outline:none을 적용하지 않았을 때

      input {
        border: none;
        background-color: gray;
      }

outline:none을 적용했을 때

      input {
        border: none;
        outline : none;
        background-color: gray;
      }

Conclusion

border과 outline의 차이는 미묘하기 때문에 위와 같은 이슈를 제외하고는 크게 신경쓰지 않아도 될 것 같다.

다만 stlying에 신경쓰고자할 때는(border radius 등)은 border 속성의 선택폭이 많으니 border을 선택해서 사용하도록 하자.

-이상-