<color> 표현방법
-키워드사용 {blue, transparent (초기값, 투명)}
-RGB 3차원 좌표계(# + 16진수 표기법 또는 rgb(), rgba() 의 함수형 표기법)
-HSL 실리더형 좌표계
16진수표기법 (HEX)
0~9 + A~F = 16가지를 이용
0이 제일 작은숫자, F가 제일 큰 숫자
000000을 사용하게 되면 채도가 제일낮다 (검정색)
FFFFFF를 사용하게 되면 채도가 제일 높다 (하얀색)
color picker (RGB를 많이 사용) RGB는 0~255
background-color : #000000 ;
background-color : rgb ( 0 , 0 , 0 );
검정색
width : 100px ;
height : 100px ;
background-color : rgba ( 0 , 0 , 255 , 0.8 )
}
rgba (0,0,255,0.8) 0.8은 80퍼센트 투명도(밝기)
opacity -요소의 불투명도를 설정
-요소의 내용을 포함해 모든 곳에 영향을 줌.
-0.0~ 1.0 으로 표현 0이 완전히 투명해 보이지 않고 1.0이 불투명함
< div >
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam nihil ratione eveniet odit? Quam totam impedit rem hic maiores ab, soluta fugit, iure placeat non vero, doloremque eius veniam temporibus.
</ div >
< div class = "floating-box" >
안녕하세요!
</ div >
.floating-box {
width : 150px ;
height : 150px ;
position : fixed ;
top : 10px ;
left : 10px ;
background-color : cadetblue ;
}
.floating-box {
width : 150px ;
height : 150px ;
position : fixed ;
top : 10px ;
left : 10px ;
background-color : cadetblue ;
opacity : 0.5 ;
}
opacity : 0.5 ; 안에있는 안녕하세요!까지 투명도가 적용됨.
.floating-box {
width : 150px ;
height : 150px ;
position : fixed ;
top : 10px ;
left : 10px ;
background-color : rgba ( 100 , 100 , 100 , 0.2 )
}
background color를 사용하면 배경색만, 안에있는 안녕하세요!는 선명
backgroud-color
backgroud-image backgroud-color와 함께 쓰이면 image가 앞으로 뜬다.
image에 흰 부분은 뒤에 배경색을 비추기도 한다.
backgroud-repeat
.box {
height : 300px ;
background-repeat : repeat-x
}
background-repeat : repeat-x -------->x축으로 반복
.box {
height : 300px ;
background-repeat : repeat-y ;
}
.box {
height : 300px ;
background-repeat : no-repeat ;
}
background-repeat : no-repeat ;
background-position
.box {
width : 300px ;
height : 500px ;
border : solid red ;
background-repeat : no-repeat ;
background-position : 150px 200px ;
}
150 x축, 200px y축
background-position : top center ;
}
backgroud-origin 배경의 원점을 테두리시작점, 테두리(border) 내부, 안쪽여백(padding) 내부 중 하나로 지정
.box {
height : 500px ;
border : 30px dashed blue ;
padding : 30px ;
background-repeat : no-repeat ;
background-origin : content-box ;
}
background-origin : border-box ;
}
background-origin : padding-box ;
background-size 배경이미지의 크기, 늘리거나 줄일수 있음.
기본: background:auto (원본크기를 유지), 이미지의 비율을 유지하며 요소의 크기를 맞춘다.
cover
이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정
.box {
height : 400px ;
border : blue 5px solid ;
background-repeat : no-repeat ;
background-color : cadetblue ;
background-size : cover ;
}
페이지를 늘리거나 줄이면 사진이 작아지거나 커진다.
contain
.box {
height : 400px ;
border : blue 5px solid ;
background-repeat : no-repeat ;
background-color : cadetblue ;
background-size : contain ;
}
.box {
height : 400px ;
border : blue 5px solid ;
background-repeat : no-repeat ;
background-color : cadetblue ;
background-size : 200px ;
}
width 값을 200px 로 맞춤, 2개를 쓰면 맞추긴맞추는데 찌그러질 수 있음
.box {
height : 400px ;
border : blue 5px solid ;
background-repeat : no-repeat ;
background-color : cadetblue ;
background-size : 100% ;
}
가로에 맞춰서 100%
background 단축속성은 색상, 이미지, 원점(origin), 크기, 반복 등 여러 배경 스타일을 한번에 지정
<background-color>는 맨 마지막에 해야함
<position> 뒤에 <background size> 사이에 / 로 구분함
