css에서 대표적으로 사용하는 색상코드
RGB (255.255.255), HEX (#FFBBCF) , HSL (5, 100%, 92%)
같은 색상이지만 RGB(RGBA), HSL(HSLA) 뒤에 (, 15%)를 적게 되면 같은 색에서 투명도가 결정됨
RGBA(255, 252, 233, 50%) 뒤에 50%는 색의 투명도를 결정 - 소수점을 사용하는 숫자도 사용가능
- HSL의 (5,100%,95%)는 5의 색조, 100%의 채도, 95%의 명도를 나타낸다.
- HSL의 색 조합은 이곳에서 조합해보면 된다.(http://jun.hansung.ac.kr/cwp/htmls/html%20hsl%20colors.html)
테두리 ( 내부 .ver )
( border: 두께, 테투리종류, 색 )을 사용 (,)는 사용 X
< h1 style="border: 2px solid red";>2픽셀의 단일한 줄의 테두리가 생성< /h1 >
border의 스타일
none : 테두리가 없음
dotted : 점선
dashed : 짧은 선 조각들의 연속
solid : 단일한 줄
double : 두개의 실선(solid) 줄
groove : 창(canvas)에서 조각(파진)된 것처럼 보임
ridge 'grove'의 반대: 창에서 튀어나온 것처럼 보임
inset : 테두리가 창에서 전체 박스가 깔려있는(embed) 것처럼 보임
outset 'inset'의 반대: 테두리가 창에서 전체 박스가 튀어나온 것처럼 보임
방향 : top, right, bottom, left
두께 : 길이(px, em, ex), thin/medium/thick
배경색 ( color )
- background-color (색) = 글씨의 배경색을 결정
background-color : red;
글씨에 배경삽입 ( image )
- background-image (이미지) = 글씨의배경을 결정
[body 안에 넣게되면 body의 모든 배경을 지정하지만 < p >코드에 넣으면 그 글씨 만에 배경을 만들어 넣을 수 있다.]background-image : url("sky.jpg");
이미지 반복 ( repeat )
- background-repeat (반복) = 배경이미지를 반복해서 사용하고 싶을때 사용
x축으로 반복
background-image: url("sky.png");
background-rapeat : repeat-x;
background-position : center;
repeat-x = x축으로 반복(가로) (-y는 y축으로 반복(세로))
repeat = 전체를 반복으로 채우기
space = 전체를 채우되 원본사진을 헤치지 않음 (분배)
round = 전체를 채우되 원본사진이 변경될 수 있음(조절)
no-repeat = 반복하지 않고 원본사진만 존재
space-repeat = 원본사진을 헤치지 않고 반복
사진 고정/이동 ( attachment )
- background-attachment (배경첨부) = 사진의 위치를 결정
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
배경의 사진이 고정되어 스크롤을 내려도 사진의 위치가 변경되지 않음
attachment의 스타일
fixed = 사진이 고정되어 스크롤을 내려도 사진의 위치가 바뀌지 않는다
scroll = 사진이 고정되지 않고 스크롤을 내리는 것과 같이 사진이 내려가게 된다
사진의 위치 ( position )
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
오른쪽 위로 사진이 올라감
position 스타일
top, left, top, bottom
25% 65% = x축에서 25%, y축에서 65%만큼 이동
bottom 50px right 10px = 아래에서 50px 오른쪽에서 10px 이동
배경확장 ( background-clip ) 테두리 내부에 색을 채우기
#clip {
border: 10px solid red;
padding: 15px;
background: lightblue;
background-clip: border-box;
}
테두리를 포함한 테두리 안쪽 부분에 색이 칠해지게 된다
clip 스타일
border-box = 테두리를 포함한 모든 부분
padding-box = 테두리만 제외한 모든 부분
contents-box = contents box 부분
background-clip: border-box|padding-box|content-box|initial|inherit;
사진 원점 고정 ( origin )
#pic {
border: 10px dashed black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
사진의 시작이 padding-box에서 부터 시작한다 / attachment 가 fixed 일 경우 아무런 효과가 없다
origin 스타일
padding-box, border-box, content-box
사진크기 ( size )
#psize {
border: 2px solid black;
padding: 25px;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
사진의 크키를 테두리에 자동으로 사이즈가 맞춰서 적용된다
- 사이즈의 구문 : background-size: auto|length|cover|contain|initial|inherit;
size 스타일
auto = 자동으로 채워준다 ( default )
~~px , ~~px = 입력한 px값으로 가로, 세로가 결정된다
cover = 이미지를 자르거나해도 그냥 전체를 덮을수 있게 한다
불투명도/투명도를 지정하는 코드 ( opacity )
투명도는 0.0 ~ 1.0 사이의 값을 지정하고 값이 낮을수록 투명해짐
투명도는 opacity 로 설정하고 투명색은 transparent 로 정의하면 투명으로 지정됨
글씨는 pink, 배경색은 green, 투명도는 0.5를 가지는 style이 생성된다.
p {
color : pink;
background-color : green;
opacity : 0.5;
}
배경 그라데이션 설정 ( linear-gradation )
그라데이션을 나타내고 싶을 때 사용
background : linear-gradation(color1, color2, color3 . . . )
첫번째 색을 정하기 전에 위치를 적으면 색의 시작점을 지정할 수 있다.
상단 왼쪽에서부터 하단 아래쪽으로 진행함
background : linear-gradient(to top left, red, yellow);
첫번째 색을 정하기 전에 deg0~360 (각도)를 사용하면 360도 기준으로 사용각도를 지정할 수 있다.
12시 기준으로 45도부터 진행함
background : linear-gradient(deg45, red, yellow);
색 뒤에 **% 를 적으면 색의 진행도를 지정할 수 있다.
12시 기준으로 45도부터 진행함
background : linear-gradient(skyblue 50%, red 25%, yellow 25%);
- 색의 퍼센트가 애매하게 설정되면 색의 경계선이 뚜렷해져 그라데이션 효과가 없어질 수 있다.
