CSS속성들
알파채널
색상이 비치는 정도, 즉 투명도를 결정함.
rgba(0, 209, 112, 0.5) //red, green, blue, alpha투명도를 나타내는 알파.
1: 완전 불투명
0: 완전 투명
해당 요소나 적용하는 부분의 배경색에만 해당된다. 텍스트 등에는 적용되지 않음.
헥스코드에서는 #00ccFF00 기존 헥스코드 뒤에 투명도 00~FF까지 붙는다.
Opacity 불투명도
특정요소나 그 요소의 컨텐츠와 자손 요소의 투명도를 결정하는 특성.
#opacity {
opacity: 0.3;
}0: 완전 투명
1: 완전 불투명
배경색에만 적용되는 rgba와 달리 모든 요소에 다 적용된다.
Positon 위치속성
div {
position: static;
}static: 일반적인 문서 흐름상 위치에 고정. top, bottom, z-index등이 통하지 않는다.
relative: 일반적인 문서 흐름상 위치에 놓이지만 top, bottom등으로 변경가능. 원래 위치에서 상대적으로 이동된다.
absolute: 일반적인 문서 흐름에서 요소가 제거되고 공간도 배정되지 않음. top, bottom등으로 변동을 주면 가장 가까이 위치가 지정된 조상이 있다면 조상을 기준으로 하거나 없다면 초기 컨테이닝, body를 기준으로 움직인다.
fixed: 일반적인 문서 흐름에서 제거되고 공간도 배정되지 않는다. 초기 컨테이닝 블록의 상대적 위치로 이동된다. absolute와 같지만 조상과 무관함. 페이지를 길게 하고 스크롤을 내려도 그 위치에 붙어 따라온다. 네비게이션 바 등을 만들수 있다.
sticky: 원래 위치에 있다가 내릴때만 따라온다. 처음에는 고정하지 않았다가 나중에 고정되게 할 수 있다.
Transitions
전환. 하나 이상의 특성으로 이루어질때 한 특성값에서 다른 값으로 변화할 때 전환으로 애니메이션 효괄르 주는 것.
예를 들어 hover를 써서 커서를 올리면 모양이 바뀐다고 할때
.circle {
trasition: 2s;
}를 넣어주면 전환이 2초에 걸쳐 천천히 애니메이션 효과를 받아 변한다.
transition: property name | duration | timing function | delay효과를 줄 특성 이름 | 지속시간 | 타이밍효과 | 딜레이
여러개 특성이 바뀐다면 그중 하나만 골라서 시간을 줄수 있다.
timing function은 전환의 효과. 빨라지다 느려지게 전환하게 할수도 있다. 다양함. 결과는 모두 같다.
Transform
회전하거나 기울이거나 할수있음
h1 {
transform: rotate(45deg);
}45도 기울임
transform: scale(0.5); 크기를 절반으로.
scale(2,1); 너비 두배, 높이 동일.
Translation
요소를 움직임.
h1 {
transform: translateX(200px);
}X축 방향으로 200px 움직임.
skew
요소를 2차원 평면상에서 기울이는 기능
box-shadow
박스에 그림자 효과를 줄 수 있다.
다양한 효과를 다 외울 필요는 없고 필요할때 검색해서 쓸수 있으면 된다.
background
저작권 프리 이미지 사이트: unsplash
section {
background-image: url("https://--")
}배경이미지 적용
background-size: contain
cover, auto, %등의 값을 주면 이미지 자름, 채우기 등 적용 가능.
속기법으로 한번에 여러 가지를 바꿀 수 있다.
Google fonts
많은 글꼴들을 제공한다. 무료.
웹 안전 글꼴: 대부분 있을 것으로 가정되는 목록
글꼴을 문서에 포함시킬수도 있다.
구글 폰트에서 필요한 글꼴을 선택하면 나오는 링크 주소를 문서의 헤드에 넣으면 된다. css에 추가해야할 구분이 표시된다.
반응형
브라우저 크기에 따라 변하도록 설정하기 위해 css레이아웃에서 이상한 소수나 수학적인 수를 보는 것은 매우 자연스럽다. 1.6666% 이런식.
img {
width: 30%;
margin: calc(10%/6);
}직접 안쓰고 이렇게 계산식을 넣어도 된다. 이러면 논리를 확인할 수 있어서 좋다.
화이트스페이스
html에서
<img></img><img></img>이렇게 쓰는것과
<img></img>
<img></img>이렇게 쓰는것은 다르다. 밑처럼 쓰면 img 사이에 화이트스페이스 작은 부분이 생긴다. 너비를 %로 계산해서 쓸때 화이트스페이스가 안들어가도록 한줄에 쓸것.
flexbox를 쓰면 괜찮음.
