뇨내

[CSS-Visual Studio Code] shadow 그림자 본문

Web/CSS

[CSS-Visual Studio Code] shadow 그림자

삐옥 2021. 12. 17. 10:40

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Shadow 그림자

 

1. text-shadow: x y blur color

2. box-shadow: npx npx npx color

 

블럭태그, 인라인태그 그림자 효과

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
        .box { border: 1px solid black; width: 200px; height: 100px; margin: 20px; }
        
        
        /* 개체간의 중첩된 margin은 합이 아니라, 큰 마진이 적용된다. */
        /* #box1 { margin-bottom: 10px; }
        #box2 { margin-top: 20px; } */
    
 
    
    </style>
</head>
<body>
   
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
 
    <hr>
 
    <p>안녕하세요. <span>삐옥이</span>입니다. 저는 <span>CSS 공부</span>를 합니다.</p>
</body>
</html>
 cs

 

 

 

 

 개발자도구 (F12) : 참고용

 

 

 

 

 

저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[VSCode] Tab키로 문장 끝으로 편리하게 이동하는 방법/해결 방법  (1) 2021.12.24
[CSS-Visual Studio Code] WebFont 웹 폰트  (0) 2021.12.17
[CSS-Visual Studio Code] Alignment 정렬  (0) 2021.12.16
[CSS-Visual Studio Code] Position  (0) 2021.12.16
[CSS-Visual Studio Code] Float  (0) 2021.12.16
'Web/CSS' Related Articles more
Comments