· div 태그의 스타일 속성 지정 시 필수 지정 속성 세가지
1. width
2. height
3. background
03.박스그림자
· box-shadow
box-shadow : 5px 5px 10px #333;
가로그림자 세로그림자 번짐효과 색상
· inset
박스 내부에 그림자를 만들겠다.
box-shadow : 5px 5px 10px #333, inset 5px 5px 10px #999;
· .클래스명:hover { box-shadow : none;}
.클래스명:hover : 해당 클래스 박스에 마우스를 오버 했을 때
box-shadow : none; : 박스 그림자를 제거하겠다.
<!DOCTYPE html>
<html lang="ko">
<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>박스그림자</title>
<style>
.halla {
display: block;
/* (body에서 img 사용 시 이미지의 크기를 조절하고 싶다면 width 값만 지정해준다. */
width : 300px; height: 199px;
background: url(imgs/halla.jpg);
border: 3px solid #fff;
box-shadow: 5px 5px 10px #333, inset 5px 5px 10px #999;
}
.halla:hover { /*halla 박스에 마우스 오버 했을 때 */
box-shadow: none; /*박스 그림자를 제거*/
}
.cloud {
}
</style>
</head>
<body>
<div class="halla"></div>
<img src="imgs/cloud.jpg" class="cloud">
<!-- 줄바꾸는 첫번째 방법 : 첫번째 img 태그 옆 <br> 태그 붙이기-->
<!-- 줄바꾸는 두번째 방법 : halla 박스의 유형을
블록형 박스(스타일 태그에서 display : block)로 변경-->
</body>
</html>예제 실행 결과
● body 태그 를 style 속성으로 사용 할 때 주의점
· body에 같은 태그가 2가지 이상일 경우 각 태그에 class명으로 구분을 해주어야함
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 회원가입 화면 만들기 (0) | 2022.09.23 |
|---|---|
| [HTML+CSS3] gradient(그레디언트) (2) | 2022.09.23 |
| [HTML+CSS3] 입력 양식 태그 (1) | 2022.09.23 |
| [HTML+CSS3] 테이블 태그, 공간분할 태그 (HTML) (0) | 2022.09.23 |
| [HTML+CSS3] 시멘틱 태그 (0) | 2022.09.23 |