Programming/HTML - CSS
[CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline)
LEFT
2022. 4. 25. 18:13
강의를 참고해 박스에 스타일을 적용합니다.
<style> 태그 내에 box-shadow 속성을 적용하여 박스에 그림자를 적용하고,
<style> 태그 내에 border, border-color, border-width 등의 속성을 이용해 테두리를 적용합니다.
Introduction
박스 그림자 속성은 box-shadow 를 통해 지정해 줄 수 있습니다.
box-shadow: none | x-position y-position blur spread color | inset | initial | inherit이러한 문법을 가지는데, 왼쪽부터
- none : 그림자를 적용하지 않음
- x-position : 가로에 대한 그림자 위치를 나타내며, + 시 오른쪽에 그림자가 생기고, - 시에는 왼쪽에 그림자가 만들어집니다. (필수)
- y-position : 세로에 대한 그림자 위치를 나타내며, + 시 아래쪽에 그림자가 생기고, - 시에는 위쪽에 그림자가 만들어집니다. (필수)
- blur : 값이 클수록 그림자가 흐려집니다.
- spread : + 시 그림자가 커집니다. - 시에는 그림자가 작아집니다.
- color : 그림자의 색을 지정합니다.
- inset : 내부 그림자로 지정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소로부터 상속받습니다.
박스 테두리 실습은 Box 그 자체라기보다는 테두리 속성과 배경색을 지정해주어 Box 처럼 보여지게 하는 실습입니다.
border, border-color, border-style, border-width 속성 등으로 박스에 특수효과를 지정합니다.
전체 코드 (Box_Shadow.html)
<head>
<title> CSS Property Basic </title>
<style>
div {
width:500px; height:100px;
background-color:white;
padding:10px;
margin:100px;
}
.a {
border:3px rgba(102,186,255,0.4);
box-shadow: 0px 0px 15px 20px rgba(102,186,255,0.4);
text-align:center;
}
.b {
border:3px solid black;
box-shadow: 15px 20px 0px 5px #BCE55C, 35px 40px 0px 5px #CEF279,
55px 60px 0px 5px #E4F7BA;
text-align:center;
}
</style>
</head>
<body>
<div class="a">
<h1>박스 그림자 특수 효과1</h1>
</div>
<div class="b">
<h1>박스 그림자 특수효과2</h2>
</div>
</body>Result
전체 코드 (Box_Outline.html)
<head>
<title> CSS Property Basic </title>
<style>
div {
}
.a {
width:auto; height:40px;
background-color:cyan;
line-height:5px;
padding:0px 100px;
border:dotted;
border-color:green;
border-width:7px;
color:red;
text-align:left;
}
.b {
width:auto; height:30px;
background-color:#d3d3d3;
padding:10px;
margin:30px;
line-height:0px;
border-style:solid;
border-color:blue red magenta black;
border-width:3px 5px 10px 5px;
color:green;
}
.c {
width:auto; height:70px;
background-color:gray;
padding:10px 30px;
margin:70px 20px;
line-height:30px;
border-style:dashed none;
border-color:red;
border-width:6px;
color:purple;
}
</style>
</head>
<body>
<div class="a">
<h2>박스 테두리 지정 - 1</h2>
</div>
<div class="b">
<h2>박스 테두리 지정 - 2</h2>
</div>
<div class="c">
<h2>박스 테두리 지정 - 3</h2>
</div>
</body>Result
CSS의 박스 스타일에 대해 알아보았습니다. 도형 스타일의 기본인 그림자 스타일과 다양한 테두리 속성을 이용해 구현할 수 있었습니다.