background:색상(background-color) 이미지(background-image) 반복형태(background-repeat) 위치(background-position);
background-size 속성
background-attachment 속성
1. background-color 속성: 박스(요소)의 배경색(색상코드, rgb(0,0,0),rgba(255,255,255,0.5))을 지정한다.
2. background-image 속성: 박스의 배경 이미지를 지정한다.
url('상대경로')
3. background-repeat: 박스의 배경 이미지의 반복 형태를 지정한다.
background-repeat:no-repeat > 반복하지 않음(O)
background-repeat:repeat-x > 좌우로 반복하겠다.
background-repeat:repeat-y > 상하로 반복하겠다.
background-repeat:repeat > 상하좌우로 반복하겠다.
4. background-position 속성: 배경 이미지의 위치를 지정한다.
첫번째 값: 좌우배치 지정
두번째 값: 상하배치 지정
5. background-size 속성: 배경 이미지의 크기를 지정한다.
단위: px, %
이미지는 가로/세로 비율을 항상 유지하는 성격이 있다. 따라서 가로 크기만 변경하면 세로 크기는 자동으로 비율에 맞추어 작아진다.
키워드: cover는 배경 이미지를 지정한 박스의 크기 맞게 확대또는 축소한다.(O)
6. background-attachment 속성: 배경 이미지의 부착 형태를 지정
fixed: 고정시킨다.(O)
※첫 번째 미션: 풀 스크린 배경 구현
※두 번째 미션: batman 텍스트를 브라우저의 중앙에 배치(position 속성 사용)하고 bat는 흰색, man은 아쿠아색으로 변경하세요.
※세 번째 미션: 풀 스크린 배경을 활용하여 SPA(Single Page Application)를 구성하세요.
태그(꺽쇠+요소명): 웹 콘텐츠(UI 요소)를 저장하는(감싸는) 역할을 한다.
1. 텍스트
1-1. 제목: h1 ~ h6(중요도) > 태그 선택자
1-2. 문단: p(: 클래스명을 지정해야한다.) > 클래스 선택자
2. 이미지
1-1. 일반 이미지: <img src="상대경로" alt="이미지에 대한 설명">
1-2. 초상화(증명사진, 인물사진), 예술작품
<figure>
<img src="상대경로" alt="이미지에 대한 설명">
<figcaption>이미지에 대한 설명</figcaption>
</figure>
3. 비디오
<video autoplay preload controls loop muted>
<source src="상대경로">
</video>
4. 오디오
<audio autoplay preload controls loop muted>
<source src="상대경로">
</audio>
5. 목록(리스트): 제품 스펙, 메뉴(a 요소, 인라인: ul(flex-container)/li(flex-items)), 입력폼(인라인)
<ul> 목록 태그
<li></li> 항목 태그
<li></li>
</ul>
6. 하이퍼 링크: 웹 페이지의 계층구조, 정보 구조(IA)
<a href="상대경로" target="_blank"> target="_blank"는 새창으로 띄운다.
href 속성값: 상대경로, 절대경로, 아이디 경로(내부 링크), url 경로(http://www.naver.com)
7. 테이블
<table>
<thead>
<tr>
<th>text</th>
<th>text</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>
<h3>title</h3>
<img src="상대경로">
<p class="content">text</p>
</td>
</tr>
</tbody>
</table>
8. 입력폼
<input type="text" name="id(변수명:서버단으로 사용자가 입력한 데이터를 전송)" required(필수입력:유효성 검증) placeholder="아이디 입력">
<input type="checkbox" name="hobby" value="운동" checked> 운동
<input type="submit" value="전송">
<input type="reset" value="초기화">
<input type="button" value="버튼">
9. 버튼
9-1. a 요소: 하이퍼 링크 > CSS에서 display:block; 적용하여 레이아웃 관련 스타일시트가 적용되도록 박스 유형을 변경해야 한다.
9-2. button 요소: <button>메뉴</button>
<!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>
* {margin:0; padding:0; box-sizing:border-box;}
.batman, .tor { /*부모요소를 선택하여 공통스타일시트 지정*/
position:relative;
height:100vh; /*박스의 높이값을 100vh(%)로 지정하지 않으면 풀 스크린 배경을 구현할 수 없다.*/
}
.batman {
background:url('imgs/batman.jpg') no-repeat center center;
background-size:cover;
}
.tor {
background:url('imgs/tor.jpg') no-repeat center center;
background-size:cover;
}
h3 {
position:absolute; left:50%; top:50%;
width:400px; height:200px; margin:-100px 0 0 -200px;
font-size:72px; color:#FFF;
text-align:center; line-height:200px;
text-transform:uppercase;
text-shadow:1px 1px 2px #000;
}
h3 .aqua {color:aqua;}
.attachment-batman {
position:absolute; left:0; top:50%;
width:100%; height:300px; margin-top:-150px;
background:url('imgs/batman.jpg') no-repeat center center;
background-size:cover;
background-attachment:fixed;/*매우중요*/
}
.attachment-tor {
position:absolute; left:0; top:50%;
width:100%; height:300px; margin-top:-150px;
background:url('imgs/tor.jpg') no-repeat center center;
background-size:cover;
background-attachment:fixed;/*매우중요*/
}
</style>
</head>
<body>
<div class="batman">
<div class="attachment-batman"></div>
<h3>bat<span class="aqua">man</span></h3>
</div>
<div class="tor">
<div class="attachment-tor"></div>
<h3><span class="aqua">t</span>or</h3>
</div>
</body>
</html>
결과
