Cascading
중요도•
CSS 가 선언된 위치에 따라 중요도를 판단한다.
브라우저 스타일 시트 < 사용 스타일시트 < 개발자 스타일 시트
◦
개발자 스타일 시트의 중요도
<link> 로 연결한 css 파일 < <style> 요소 안에 있는 CSS
< 인라인 스타일 CSS
•
중요도 우선순위 정리
1.
인라인 스타일 CSS
2.
<style> 요소 안에 있는 CSS
3.
<link>로 연결한 CSS 파일
4.
사용자 스타일 시트
5.
브라우저 스타일 시트
구체성(명시도)•
선택할 대상을 구체적으로 특정할수록 명시도가 높아진다.
•
부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
•
!important : 모든 조건을 무시하고 강제로 명시도를 최상위로 끌어올려준다.
해당 소스코드 전체의 우선순위를 꼬아버릴 수 있으니 조심히 사용하기 선언순서명시도가 동일할 시, 나중에 선언한 스타일이 우선 적용된다.
배경
요소의 배경을 지정하는 CSS 속성
/* background-color : 요소의 배경에 색상을 지정한다. */
background-color : #색상 | rgb(0, 0, 0)
/* background-image : 요소의 배경 이미지를 한 개, 혹은 여러개 지정한다. */
background-image : url("이미지 경로")
/* 이미지 중첩하기 : 앞에 있는 것이 가장 위에 깔린다. */
background-image : url("이미지 경로 1"), url("이미지 경로 2")
/* 그라데이션 배경 만들기 */
background-image : linear-gradient(방향, 시작색상, 종료색상)
/* background-position */
/* 다섯가지 키워드를 조합해서 위치를 지정합니다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;
/* x축과 y축 수치 직접입력 */
background-position: 50px 24px; (각각 x축 y축)
/* background-repeat : 요소의 배경 이미지의 반복 여부와 반복 방향을 지정한다. */
background-repeat: no-repeat | repeat | repeat-x | repeat-y
/* background-attachment : 요소의 배경 이미지의 스크롤 여부를 지정한다. */
background-attachment: fixed | scroll(기본값) | local
/* background 단축 속성 */
/* background : color imageUrl repeat position/size attachment */
background : red url("이미지 경로") no-repeat center/cover fixed
/* object-fit : <image> 나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식 */
/* 네개 중 하나를 선택해서 사용합니다. */
object-fit : cover / fill(기본값) / contain / none
/* object-position : <image> 나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다. */
object-position : 100px 40px
CSS
복사
색상
색상 이름 표기법color : 색상이름
Hex 색상 코드color : #색상코드
rgb 색상 코드color : rgb(red 좌표, green 좌표, blue 좌표)
opacity - 불투명도0 ~ 1 사이의 숫자 지정
opacity : 숫자