📚background

CSS에서는 배경 스타일도 지정할 수 있다. 이와 관련된 속성들은 아래와 같다.

📝background-image

background-image는 배경 이미지를 정의하는 속성이다.

selector { background-image:url(이미지 주소); }

📝background-attachment

background-attachment는 배경 이미지의 고정, 스크롤 여부를 지정하는 속성이다.

• scroll : 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤되지 않음
• fixed : 움직이지 않음
• local : 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지도 스크롤됨

default 값은 scroll이다. 이 속성은 다음과 같은 형태로 사용된다.

selector { background-attachment: scroll; }
selector { background-attachment: fixed; }
selector { background-attachment: local; }

📝background-color

background-color는 배경색을 정의하는 속성이다. 색상값은 color 속성의 색상값과 동일하게 지정할 수 있다.

selector { background-color: red; }
selector { background-color: rgb(255, 0, 0); }
selector { background-color: #FF0000; }

📝background-position

background-position은 배경 이미지의 시작 위치를 지정할 수 있는 속성이다.

selector { background-position: left top; }
selector { background-position: 가로위치 새로위치; }

left top과 같은 값들은 아래와 같다.

• left top : 왼쪽 상단
• left center : 왼쪽 중앙
• left bottem : 왼쪽 하단
• right top : 오른쪽 상단
• right center : 오른쪽 중앙
• right bottom : 오른쪽 하단
• center top : 중앙 상단
• center center : 정 중앙
• center bottom : 중앙 하단

가로 위치와 새로 위치는 %, cm, px, pt, em등의 단위로 지정이 가능하며, 한 가지만 지정할 경우 나머지는 50%로 지정된다.

📝background-repeat

background-repeat은 배경 이미지의 반복 여부를 지정하는 속성이다. 가질 수 있는 값은 아래와 같다.

• repeat : 가로, 세로 방향으로 반복
• repeat-x : 가로 방향으로 반복
• repeat-y : 세로 방향으로 반복
• no-repeat : 반복하지 않음

default 값은 repeat이며, 아래와 같이 사용된다.

selector { background-repeat: no-repeat; }

📝background-size

background-size는 배경 이미지의 크기를 지정하는 속성으로 아래와 같이 사용된다.

selector { background-size: 100px 100px; }

📝background

background는 위에서 다루었던 배경 이미지와 관련된 속성을 한 번에 정의할 수 있는 축약 기법이다.

📚link 스타일

링크 스타일은 의사 선택자에서도 다루었듯이 하이퍼링크의 스타일을 지정할 수 있다. 각각의 링크 스타일은 아래와 같다.

• a:link : 방문되지 않은 링크 스타일
• a:visited : 방문된 링크의 스타일
• a:hover : 마우스를 위로 올렸을 때의 스타일
• a:active : 마우스로 클릭될 때의 스타일

각각 선택자별로 color나 font-size 등을 이용해 링크의 스타일을 지정해줄 수 있다.

의사 선택자 예제는 여기로!