➖ 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을 선택해서 사용하도록 하자.
-이상-
Author And Source
이 문제에 관하여(➖ Border and Outline), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kcj_dev96/Border-and-Outline저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)