CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}CSS 선택자
규칙에서 요소를 선택하는 데 사용하는 부분
태그 이름
h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용한다.
h1{
color: blue;
}아이디 (id)
맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 쓴다. 아이디는 한 페이지 안에서 중복으로 쓰면 안 된다!!!
#id {
color: blue;
}클래스 (class)
아이디는 한 페이지 내에 중복으로 사용될 수 없지만, 클래스는 그렇지 않다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 쓴다.
.class {
color: blue;
}색상 단위
색상 이름
red, green, yellow 같은 영어로 된 색상 이름
색상 코드
샵(#)으로 시작하는 여섯 글자의 코드
빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값 ex) #FF00FF
RGB
빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 나타냄.
빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이다. ex) rgb(25, 0, 255)
RGBA
빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타냄.
빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값
알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명해진다. ex) rgba(255, 0, 25, 0.2)
절대적인 크기 단위
픽셀 px
절대적인 단위
화면을 표시하는 기준이 되는 크기
상대적인 크기 단위
퍼센트 %
부모 태그의 크기에 상대적으로 지정할 때 사용.
ex) 부모 태그의 height의 절반 값을 쓰고 싶다면? : height: 50%
em
부모 태그 font-size의 크기
ex) 부모 태그 글자 크기의 4배를 하고 싶다면? : font-size: 4em
rem
루트(root) em이라는 의미
CSS에서 rem은 <html> 태그의 font-size 크기이다.
ex) <html> 태그 글자 크기에서 2배를 하고 싶다면? : font-size: 2rem
CSS 속성
배경 이미지 background-image
url(...)이라는 문법으로 배경 이미지를 넣을 수 있다.
background-image: url('flowers.png');배경 이미지는 여러 개 넣을 수 있는데, 작성한 순서대로 위부터 밑으로 깔린다.
background-image:
url('a.png'),
url('b.png'),
url('c.png');여기서는 a.png가 제일 위에 보일 것이다.
배경의 위치 background-position
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center; /* 가운데 */기본값은 left top(왼쪽 위)이다.
배경의 반복 background-repeat
background-repeat: repeat; /* 반복하기 */
background-repeat: no-repeat; /* 반복 안 함 */기본값은 repeat(반복)이다.
배경의 크기 background-size
background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */그라디언트 linear-gradient()
기본적으로 시작 색상과 종료 색상으로 사용한다.
background-image: linear-gradient(#000000, #ffffff);기본 방향의 각도는 180도인데 (위에서 아래로 내려오는 방향)
이 각도를 바꾸고 싶다면 맨 앞에 각도를 쓰면 된다. 각도의 단위는 deg이다.
background-image:
linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));그림자 box-shadow
가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 쓴다.
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);위 코드가 의미하는 바는 이렇다.
가로: 5px
세로: 10px
흐린 정도(Blur): 15px
퍼지는 정도(Spread): 8px
색상: rgba(0, 0, 0, 0.6)
불투명도 opacity
요소 전체의 불투명도를 조절할 때 사용
0에서 1 사이의 소수 값으로 단위 없이 작성
opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */