00. CSS3
· head 영역에서 style 태그로 스타일 지정
<!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>01.예제</title>
<style>
.multiBack {
/*background-size : cover : 박스(요소)의 크기와 배경이미지 크기가 다를 경우
배경 이미지 크기를 박스 크기에 맞춰서 도달하도록 크기를 조정한다. */
height: 500px;
width: 100%;
background-image: url(imgs/BackgroundFront.png), url(imgs/BackgroundBack.png);
background-size: cover;
background-repeat: no-repeat no-repeat;
}
</style>
</head>
<body>
<div class="multiBack"></div>
</body>
</html>01. CSS3에서 추가된 스타일
· 요소 선택자
· 클래스 선택자
· 블록형 요소 div
· text-shadow 를 이용해 텍스트에 그림자 효과 주기
· 세로 중앙 정렬, 가로 중앙 정렬
· 배경에 이미지 넣기
<!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>CSS3에서 추가된 스타일 속성</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
/* font-family: 'Patrick Hand', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&display=swap');
/* font-family: 'Merriweather', serif; */
/* 요소선택지는 요소명으로 요소를 선택한다.*/
h3 {
font-family: 'Merriweather', serif;
font-size : 54px; color: aqua;
background:#03F;
}
h4 {
font-family: 'Patrick Hand', cursive;
font-size: 36px; color:aliceblue;
text-shadow: 2px 2px 3px #333;
/* 가로 그림자 크기 세로 그림자 크기 번짐크기 그림자색상 */
}
/* 0922 */
/* 클래스 선택자 : .class속성값 */
/* div는 블록형 요소이다. 블록형 요소의 기본 너비값은 100%이고, 기본 높이값은 0이다. */
/*이미지 태그를 사용하여 이미지를 HTML 문서에 포함시키면
이미지 위에 다른 텍스트 같은 콘텐츠를 추가할 수 없다.
이미지 위에 텍스트 같은 컨텐츠를추가할려면 배경 이미지를 사용해야 한다.*/
.box {height: 500px; background: url(imgs/cloud.jpg); background-size: 150px;}
/* background-size: 120px : width 값을 120px로 지정 */
.box h5 {padding-top:200px; text-align:center;}
.multiBack1 { height: 500px;
background-image: url(imgs/back_img.png), url(imgs/cloud.jpg);
background-repeat: repeat-y, repeat;
background-position: center center;} /* 첫번째값 : 좌우 두번째값 : 상하 */
/* 후손 선택자 : 빈칸(spacebar)을 사용하여 후손 요소를 선택할 수 있다. */
.multiBack1 h5 {padding-top:200px; text-align:center;}
/*세로 중앙 정렬 : padding-top, text-align : 가로 중앙 정렬 */
.multiBack2 { height: 1000px;
background-image: url(imgs/tree.jpg), url(imgs/sky.jpg);
background-repeat: repeat-x, repeat-x;
background-position: left bottom, left top;}
</style>
</head>
<body>
<h3>font-face</h3>
<h4>text-shadow</h4>
<!-- 0922 -->
<div class="box">
<h5>box</h5></div> <!-- div는 웹사이트를 제작할 때 가장 많이 사용하는 태그이다.-->
<div class="multiBack1">
<h5>다중 배경 이미지</h5>
</div>
<div class="multiBack2"></div>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 테이블 태그, 공간분할 태그 (HTML) (0) | 2022.09.23 |
|---|---|
| [HTML+CSS3] 시멘틱 태그 (0) | 2022.09.23 |
| [HTML+CSS3] 추가 입력 양식 태그 (HTML) (2) | 2022.09.21 |
| [HTML+CSS3] 웹 컨텐츠를 담는 태그 (HTML) (2) | 2022.09.20 |
| [HTML+CSS3] 하이퍼링크 (2) | 2022.09.19 |