- HTML 속성은 선택적이지만 ( 일부 태그가 일부 속성 소유 )
- ex) bgcolor : <body>, <table>, <tr>, <td>, <marquee>
- CSS 의 속성은 모든 태그에 적용이 가능 (******)
- background 속성
- background-color
- 배경색
body { background-color : yellow; background-color : rgb(255,0,0); background-color: rgba(255,0,255, 0.5); }
- background-image
- 배경 이미지
- url 사용
#box { background-image : url(images/catty02.png);
- background-repeat
- 배경 이미지의 반복
- repeat, repeat-x, repeat-y, no-repeat
#box { background-repeat : no-repeat; }
- background-position
- 배경 이미지의 위치
- 수평: left, right, center , 수치
- 수직 : top, center, bottom, 수치
#box { background-positon : center center ; }
- background-attachment
- 배경 고정 유무
- scroll, fixed
#box { background-attachment : fixed; }
- CSS 색상 표현법
- Color Name : red, blue, yellow...
- RGB Color(HEX) : #000000 ~ #FFFFFF
- RGB Color(DEC) : rgb(0,0,0) ~ rgb(255,255,255)
- RGBA Color(DEC) : rgba(255,255,255,1) , Alpha Channel (투명도)
<head>
<style>
#textSearch {
background-image: url(images/hangame.png);
background-repeat: no-repeat;
background-position : center center;
}
/* 의사 클래스 */
#textSearch:focus {
background-image :url();
}
</style>
</head>
<body>
<form>
<input type="text" id="textSearch" size="30" autocomplete="on">
<input type="submit" id="btnSearch" value=" 검색하기">
<button><img src="images/bullet02.png">검색하기</button>
<br>
<button id="bt"><img src="images/bullet08.png">검색</button>
</form>
<div><label>데이터: </label><input type="text" class="data"></div>
<div><label>데이터: </label><input type="text" class="data"></div>
</body>
'프로그래밍 > CSS' 카테고리의 다른 글
[CSS] Selector , 선택자 (0) | 2021.08.03 |
---|
Uploaded by Notion2Tistory v1.1.0