반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 모델 너비, 높이 지정</title>
<style>
.box1 {
width: 400px;
height: 100px;
border: 1px solid black;
margin-bottom: 100px;
}
.box2 {
width: 50%;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>둥근 테투리</title>
<style>
#container {
width: 700px;
margin: 20px auto;
}
.br1 {
padding: 30px;
border-style: solid;
border-width: thick;
border-color: green;
border-radius: 30px;
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<h1 class="br1">둥근 테두리 스타일 예제</h1>
<img src="images/photo.jpg">
<img id="circle" src="images/photo.jpg">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 그림자 효과</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
border: 1px solid blue;
border-radius: 20px;
}
/*
box-shadow
기본형 - box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
수평 거리 - 양수값은 요소의 오른쪽에, 음수값은 요소의 왼쪽에 그림자를 생성. 필수 요소
수직 거리 - 양수값은 요소의 아래쪽에, 음수값은 요소의 위쪽에 그림자를 생성. 필수 요소
흐림 정도 - 기본값은 0
번짐 정도 - 양수값은 모든 방향으로 그림자가 퍼져 박스보다 그림자가 크게 표시
음수값은 반대
*/
.box1 {
box-shadow: 2px -2px 5px 0px;
}
.box2 {
box-shadow: 5px 5px 15px 5px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 3일차 속성선택자 (0) | 2023.05.15 |
|---|---|
| CSS - 3일차 background (0) | 2023.05.15 |
| CSS - 2일차 float,clear (0) | 2023.05.11 |
| CSS - 2일차 display (0) | 2023.05.11 |
| CSS - 2일차 position (0) | 2023.05.11 |