Q. 박스에 그림자 넣기
➡️ box-shadow 속성 이용
box-shadow: none | x-posision y-posision blur spread color | inset|initial|inherit
• none : 그림자 효과X
• x-posision : 가로 위치. 양수는 오른쪽 음수는 왼쪽. - 필수
• y-posision : 세로 위치. 양수는 아래쪽 음수는 위쪽. - 필수
• blur : 값이 클수록 그림자가 흐려진다.
• spread : 양수면 그림자 확장. 음수면 축소.
• color : 그림자 색
• inset : 그림자를 안쪽에 만들기.
• initial : 기본값.
• inherit : 부모의 값을 상속.
[CSS 파일]
.box {
width: 300px;
hight: 50px;
background-color: lightblue;
margin: 30px;
padding: 5px;
border: 4px solid black;
border-radius: 15px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
color: darkolivegreen;
text-align: center;
box-shadow: 5px 5px 5px gray;
}
[HTML 파일]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link href="css/main.css"; rel="stylesheet">
</head>
<body>
<img src="lion.jpg" style="width:100px;
display: block; margin-left: auto; margin-right: auto">
<h3 class="profile">My Name</h3>
<p style="text-align: center; margin-right: 10px; font-family: 'Times New Roman'">
<span style="color: red;">
<strong>¡Hola!</strong>
</span>
Buenos tardas. Soy coreano y soy muy amable. ¡Mucho gusto!
</p>
<!-- 네모 박스 추가 / division(분할)의 약자 -->
<div class="box">
<p>네모박스</p>
</div>
</body>
</html>
[결과 화면]
': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS] 레이아웃 만들기 (float, inline-box) (0) | 2023.11.16 |
|---|---|
| VSCode git이랑 연결하기 / git에 올리기 (1) | 2023.11.09 |
| CSS 기초 - <div> 이용하여 네모 상자 만들기 (0) | 2023.11.09 |
| CSS 기초 - CSS 파일 사용하기, CSS selector 우선순 (0) | 2023.11.09 |
| HTML 꾸미기 - 자기소개 화면 만들기 (0) | 2023.11.09 |
