코드스피츠 채널에서 보고 정리한 글입니다.
Geometry 영향을 끼치지 않는다.
margin
Box-shadow (갯 수 제한이 없다. border - radisous 에 영향을 미친다.)
Border-box ( 그림을 그려주는 Fragment는 Border -box 까지이다.)
paddingbox
Box-sizing 을 border-box로 지정하면 width , height 는 테두리 크기까지 포함 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
display: inline-block;
}
</style>
<body>
<div style="background: red"></div>
<div style="background: blue; box-sizing: border-box"></div>
</body>
</html>
그림에 순서에 의해 z-index가 나중에 그려진 것이 올라간다.(Fragment 와 연관있다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px dashed #000;
display: inline-block;
}
</style>
<body>
<div style="background: red"></div>
<div style="background: blue; box-shadow: 0 0 0 10px yellow;;"></div>
</body>
</html>
Position relative 는 Nomal Flow를 그리고 그다음 relative 를 재계산해서 그린다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px dashed rgba(0undefined 0undefined 0undefined 0.5);
display: inline-block;
}
</style>
<body>
<div style="background: red; position: relative;"></div>
<div style="background: blue; box-shadow: 0 0 0 10px yellow;;"></div>
</body>
</html>
밖에 부터 그려진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px dashed rgba(0undefined 0undefined 0undefined 0.5);
display: inline-block;
}
</style>
<body>
<div style="background: red;"></div>
<div style="background: blue; box-shadow:0 0 0 10px purpleundefined inset 0 0 0 10px yellow;;"></div>
</body>
</html>
outline 을 지정하고 안에 마감은 border-radius 로 하는 기법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px dashed rgba(0undefined 0undefined 0undefined 0.5);
display: inline-block;
}
</style>
<body>
<div style="
background: yellow;
border-radius: 15px;
outline: 10px solid rgba(0undefined255undefined0undefined0.5);
border: 5px dashed #fff;
color: #fff;
box-shadow: 0 0 0 10px red;"
>
</div>
</body>
</html>
static | relative | absolute | Fiexed
Caret Position & Offset
frame : 브라우저가 한번의 계산하는 단위(변경해야 되는 요소를 queue 에 flush 하는 행위)
Null
Recursive Search
Parent Position : !Static = ok ( absolute, relative{ 주로 absolute 의 기준을 잡기 위해 사용})
Absoulte
left,right,top,bottom 속성을 사용하면 더이상 부모 값의 기준이 아니라 offsetParent를 기준으로 삼는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div style="width: 200px; height: 200px; background: yellow;margin: 100px;">
<div style="width: 100px; height: 100px;position: absolute; background: red;"></div>
<div style="width: 100px; height: 100px;position: absolute; background: blue;left: 0;"></div>
</div>
</body>
</html>
relative{ 주로 absolute 의 기준을 잡기 위해 사용}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
.in {
width: 100px;
height: 100px;
border: 1px dashed black;
display: inline-block;
}
.abs {
position: absolute;
height: 50px;
width: 50px;
background: red;
left: 40px;
top: 40px;
}
.rel {
position: relative;
}
</style>
<body>
<div style="background: red;"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in rel">
<div class="abs"></div>
</div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in rel">
<div class="abs"></div>
</div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in rel">
<div class="abs"></div>
</div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</body>
</html>
Q. <div><div>★</div></div> 태그로 다음의 실드를 구현하시오
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
div {
display: inline-block;
border-radius: 50%;
}
</style>
</head>
<body>
<div style="margin: 30%; box-shadow:0 0 10px 30px rgb(150undefined 80undefined 80);">
<div
style="
width: 150px;
height: 150px;
font-size: 100px;
text-align: center;
line-height: 160px;
vertical-align: middle;
background: blue;
color: white;
border: 20px solid white;
box-shadow:0 0 0 20px redundefined inset 0 0 0 20px red;
"
>
★
</div>
</div>
</body>
</html>
border 와 box-shadow inset 을 이용하여 해결하였다.