강의를 참고해 박스에 스타일을 적용합니다.
<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의 박스 스타일에 대해 알아보았습니다. 도형 스타일의 기본인 그림자 스타일과 다양한 테두리 속성을 이용해 구현할 수 있었습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
|---|---|
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
| [HTML 기초] 간단한 홍보책자 만들기 (0) | 2022.04.10 |
| [HTML 기초] 회원가입 사이트 만들기 (0) | 2022.03.22 |
