CSS style만들기 / 셀렉터 / Color / background

1. style 만드는 방법

1. style 속성에 스타일 시트 작성
2. <style></style> (내부 스타일 시트)
3. css.style (외부 스타일 시트)

• 우선순위 또한 위와 같다.

2. 셀렉터

1. id 셀렉터
2. class 셀렉터
3. 그룹 셀렉터 ( h3, li {color :brown;})

3. color 방법

1. 이름 : div{ color : blueviolet;}
2. rgb : div{ color : rgb(138, 43, 226) ;}
3. # : div{ color : #66eecc ;}

4. color 종류

1. color : 글자
2. background-color : 배경
3. border-color : 테두리

5. background 종류

1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
6. background-size

1) background-color

원하는 배경색 지정

2) background-image

url을 통한 사진을 배경으로 처리

3) background-repeat

repeat-x , repeat-y , no-repeat 속성에 따라 사진의 반복을 지정할 수 있다. (기본적으로는 반복이 전부 적용된 상태)

4) background-position

반복 되지않는 배경이미지의 상대위치를 설정

1. left right top bottom center 중 2개의 조합으로 처리
2. Apx Bpx 조합으로 적용하는데 이때 A,B는 각각 left/top 적용

5) background-attachment

background-position과 같이 쓰이며 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

1. scroll : 배경을 요소 자체에 대해 고정
2. fixed : 배경을 뷰포트에 대해 고정
3. local : 배경을 요소 콘텐츠에 대해 고정

간단히 scroll은 말그대로이고 fixed는 브라우저 자체를 기준으로 한 고정 위치라서 스크롤을 진행해도 해당 위치이고
local은 어떤 콘텐츠에 대해서 고정인 상태라
만약 콘텐츠 안에서의 고정을 원한다면 fixed가 아닌 local을 사용해야한다.

• local은 콘텐츠에 대해서는 고정이지만 body에 대해서는 스크롤이 적용될 수 있다는 얘기다.

6) background-size

1. auto : 원본 크기만큼 채운다.
2. contain : 그림이 모두 보일 수 있게 크기 조정
3. cover : 그림을 채울 수 있는 한 가득 채우기