웹페이지
CSS STEP 5 - BackGround
IT의 큰손
2023. 4. 13. 16:49
728x90
★ HTML/CSS
- 케밥 표기법
- aaa-bbb-ccc
- CSS의 대부분의 속성은 모든 태그에 적용이 가능하다!
★ CSS 색상 표현법
- 1. Color name : red, yellow, blue ...
- 2. RGB color(HEX) : #FF0055
- 3. RGB color(DEC) : rgb(255,0,128)
- 4. RGBA color(DEC) : rgba(255,255,255,1)
- a(alpha channel - 불투명도(0~1))
body {
/* background-color: yellow; */
/* background-color: rgb(9, 115, 236); */
background-color: rgba(0,0,255,.5);
}
★ <html>, <body>
- 블럭 태그
- 블럭 태그 영역
- 너비 : 100%
- 높이 : 내용물 만큼
★ 배경(BackGround)
- 1. 배경색(background-color)
- 사용 ex)
body {
background-color: yellow;
}
h1 {
background-color: blue;
}
input {
background-color: aquamarine;
}
- 2. 배경이미지(background-image)
- background-image : url(이미지 경로);
- 사용 ex)
body {
/* background-image : url(이미지 경로); */
background-image : url(images/cat01.jpg);
background-repeat: repeat-x; /* x축 반복 */
background-repeat: repeat-y; /* y축 반복 */
background-repeat: no-repeat; /* 반복x */
}
- 3. 이미지 위치
- 수평 : left/center/right
- 수직 : top/center/bottom
- 수치(px) : 절대위치
- 수치(%) : 상대위치
- 사용 ex)
background-image : url(images/cat01.jpg);
background-repeat: no-repeat;
background-position: center top;
background-position: 200px 200px;
background-position: 50% 50%;
background-attachment: fixed; : 스크롤이 움직여도 따라서 움직임
■ ex) 검색 창에 배경 넣기
- focus : 감빡이는 상태(포커스가 검색창 안에 있을 때)
- 소스코드
<!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>
#search{
background-image: url(images/hangame.png);
background-repeat: no-repeat;
background-position: center center;
}
/* focus는 포커스의 위치 : 포커스가 검색창 안에 있을 때 */
#search:focus {
background-image: url();
}
</style>
</head>
<body>
<h1>네이버</h1>
<input type="text" id="search">
<input type="button" value="검색하기">
<hr>
</body>
</html>- 실행결과
- 다양한 옵션
- ex) 포커스 두었을 때 진하게 태두리 생기는 것을 지우는 옵션
.data {
outline: none;
}- ex) 포커스를 두었을 때, 배경색이 노란색으로 만들기
data:focus {
background-color: yellow;
}
728x90