배경(background)에서 가질 수 있는 요소들
background-color
HTML요소의 배경 색을 지정할 수 있다.
키워드값, RGB값, 16진수값 등을 지정해서 출력할 수 있다.
<style>
body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }
</style>background-image
HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타난다.
background-repeat
이미지를 반복해서 보여준다. 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타니는데, 이 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.
background-repeat: repeat-x;: 이미지의 수평 반복background-repeat: repeat-y;: 이미지의 수직 반복background-repeat: no-repeat;: 반복되지 않고 한번만 나타나게 함
background-position
반복되지 않는 배경 이미지의 상대 위치를 설정한다.
top,right,bottom,left,center들을 각각, 혹은 두개씩 적절히 조합해서 사용하면 이미지의 상대 위치를 조정할 수 있다.
background-attachment
배경 이미지를 뷰포트 내에서 고정할지 말지를 결정한다.
-
scroll: 선택한 요소와 함께 움직인다. 내용을 스크롤해도 이미지는 스크롤되지 않는다. (기본값) -
fixed: 해당 위치에 이미지를 고정한다. 스크롤과는 무관하게 움직이지 않는다. -
local: 선택한 요소와 함께 움직인다. 내용을 스크롤하면 이미지도 스크롤된다.
background
앞에 나온 5가지 속성들을 간편하게 이용할 수 있다.
<style>
body { background: #FFCCCC url("/examples/images/img_man.png")
no-repeat left bottom fixed; }
</style>background-size
배경 이미지의 크기를 설정한다.
-
contain : 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절한다. 단, 배경 이미지의 크기가 해당 요소의 내용 영역을 넘지는 않게 조절한다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다. -
cover : 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절한다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있다.
가상 클래스
(Pseudo-class)
선택하고자 하는 HTML요소의 특별한 상태(state)를 명시할때 사용한다.
여기서 특별한 상태는 주로 사용자의 행동에 따라 달라진다.
선택자:가상클래스 { 속성: 속성값; }
<style>.hover-box:hover{ background-color: red; }</style>대표적인 CSS 가상 클래스
:link- 방문한 적이 없는 요소 (href 속성을 가진<a>,<area>,<link>중 방문하지 않은 모든요소):visited- 방문한 적이 있는 링크:hover- 커서가 요소 위에 올라와 있을 때:active- 사용자가 활성화한 요소(버튼 등):focus- 포커스 되었을 때 (input 태그 등에서 보통 사용자가 클릭 혹은 탭키로 선택했을 때):nth-child- 형제 사이에서의 순서에 따라 요소를 선택:not(selector)-not(selector)안에 포함된 요소들을 제외
가상 요소
(Pseudo-element)
해당 HTML요소의 특정 부분만을 선택할때 사용한다.
선택자::가상요소 이름 { 속성: 속성값; }
<style>.button:hover::before{ background-color: red; content: '*'}</style>대표적인 CSS 가상 요소
::first-letter- 텍스트의 첫 글자만을 선택(블록 레벨 요소에서만 사용가능)::first-line- 텍스트의 첫 라인만을 선택(블록 레벨 요소에서만 사용가능)::before- 특정 요소의 내용부분 바로 앞에 다른 요소를 삽입할 때 사용::after- 특정 요소의 내용부분 바로 뒤에 다른 요소를 삽입할 때 사용::selection- 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용(마우스로 글자 선택 등)
