본문 바로가기
프로그래밍/CSS

[CSS] Background 속성

by jjjhhhhh 2021. 8. 3.
  • HTML 속성은 선택적이지만 ( 일부 태그가 일부 속성 소유 )
  • ex) bgcolor : <body>, <table>, <tr>, <td>, <marquee>
  • CSS 의 속성은 모든 태그에 적용이 가능 (******)

 

  • background 속성
  1. background-color
    • 배경색
    body { 
    	background-color : yellow;
    	background-color : rgb(255,0,0);
    	background-color: rgba(255,0,255, 0.5);	
     } 
  1. background-image
    • 배경 이미지
    • url 사용
    #box { background-image : url(images/catty02.png);
  1. background-repeat
    • 배경 이미지의 반복
    • repeat, repeat-x, repeat-y, no-repeat
    #box { background-repeat : no-repeat; }
  1. background-position
    • 배경 이미지의 위치
    • 수평: left, right, center , 수치
    • 수직 : top, center, bottom, 수치
    #box { background-positon : center center ; } 
  1. background-attachment
    • 배경 고정 유무
    • scroll, fixed
    #box { background-attachment : fixed; }

 

  • CSS 색상 표현법
  1. Color Name : red, blue, yellow...
  1. RGB Color(HEX) : #000000 ~ #FFFFFF
  1. RGB Color(DEC) : rgb(0,0,0) ~ rgb(255,255,255)
  1. 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