🍁outline
테두리 서식을 부여할 때 border 대신 outline을 줄 수 있다.
border와 outline의 차이점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
#box1 {
/* border: 10px solid tomato; */
outline: 10px solid tomato;
}
#box2 {
/* border: 50px solid cornflowerblue; */
outline: 50px solid cornflowerblue;
}
#box3 {
/* border: 10px solid gold; */
outline: 10px solid gold;
}
</style>
</head>
<body>
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>
border와 달리 outline은 요소들을 밀어내지 않는다는 특징이 있다.
border는 객체의 크기에 반영이 되기 때문에 점점 밀어내는 현상이 생기고, outline은 객체의 크기에 반영이 되지 않기 때문에 겹치는 현상이 생기게 된다.
outline의 활용
<body>
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<input type="text" class="txt">
<hr>
다른 내용...
</body><style>
.box {
width: 200px;
height: 200px;
}
#box1 {
border: 10px solid tomato;
/* outline: 10px solid tomato; */
}
#box2 {
/* border: 50px solid cornflowerblue; */
outline: 10px solid cornflowerblue;
}
#box3 {
border: 10px solid gold;
/* outline: 10px solid gold; */
}
.txt {
display: block;
border: 1px solid #777;
padding: 5px;
outline: none;
}
.txt:focus {
background-color: gold;
/* border-color: blue; */
/* border-width: 5px; */
outline: 5px blue solid;
}
</style>
border는 객체 크기에 영향을 주기 때문에 indicator를 focus로 주었을 때, 텍스트 박스를 클릭하게 되면 화면이 흔들리게 된다.
이때 outline을 이용하면 안정감이 있으면서 테두리를 줄 수 있게 된다.
보편적으로 border를 많이 사용하긴 하지만, 이와 같은 경우에서 outline을 고려할 수 있다.
