html에 design을 입히는 것으로, 유지보수 차원에서 html과 분리해서 관리합니다.
css는 선택자(selector)
, 선언부(property)
, 값(value)
으로 나뉩니다.
selector {
property: value;
}
.box {
disply: block;
}
margin-left: auto; // 우측 배치
margin: 0 auto; // 가운데 배치
margin-right: auto; // 왼쪽 배치
.box {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
디바이스의 해상도에 따라서 적절하게 대응하는 반응형 웹을 만들기 위하여 사용
<meta name="viewport" content="width=device-width"/>
@media screen and (min-width: 768px)
/* 내가 보고있는 화면의 최소 width size가 768이면 아래의 css적용해줘 */
font-size : 글자 크기
1-1. px: 절대 단위
1-2. em(equal to capital M): 상대 단위, 현재 적용된 크기가 기준(부모 요소의 font-size가 기준이 될 수도 있음)
1-3. rem(root em): 상대 단위, html에 적용된 크기
line-height : 줄 간격
2-2. 글자는 줄 간격의 가운데에 위치함
2-3. px, em, rem의 단위를 따름. em만 생략 가능하다
font-family : 폰트 서체
3-1. 왼쪽의 서체부터 적용하고, 없으면 그 다음 서체를 적용해라
font-family: "Poppins";
font-family: "Poppins", sans-serif;
font-family: "Poppins", "Roboto", sans-serif;
font-weight : 폰트 굵기
4-1. 300: light
4-2. 400: regular
4-3. 700: bold
4-4. 900: max bold
text-align : 폰트 정렬
5-1. left
, right
, center
text-indent : 들여쓰기
text-transform : 알파벳 텍스트 대/소문자 변형
7-1. capitalize: 단어의 첫 글자를 대문자
7-2. uppsercase: 모든 글자를 대문자
7-3. lowercase: 모든 글자를 소문자
text-decoration : 줄 관련 속성
8-1. none: default
8-2. underline: 밑줄
8-3. line-thorough: 취소선
8-4. overline: 윗줄
font-style
9-1. normal: default,
9-2. italic: 기울임 문자
/* font.css */
@font-fact {
font-family: 'kimbug';
font-style: normal;
font-weight: 400;
src: url('./assets/font/webfont.eot');
src: url('./assets/font/webfont.eot?#iefix') format('embedded-opentype');
}
@font-fact {
font-family: 'kimbug';
font-style: normal;
font-weight: 700;
src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
}
<link rel="stylesheet" href="./fonts.css"/>
@import url('./fonts.css');
.box {
background-color: #ffffff;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);
}
.box {
background-image: url('./assets/heart.png');
}
background-repeat
3-1. repeat: default. 이미지 반복
3-2. no-repeat: 노 반복
background-size : 이미지의 크기에 대한 속성
4-1. contain: 직사각형의 이미지를 정사각형에 넣을 때, 이미지 모든 부분을 포함시키는 것
4-2. cover: 직사각형의 이미지를 정사각형에 넣을 때, width/height를 기준으로 포함시키는 것
4-3. custom: 아래의 코드는 세로의 100%꽉 맞추고, 가로는 auto로 해줘
background-size: 50% auto;
background-size: 100% auto;
background-position: center center;
CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법
property dudration [timing-function] [delay]
.box {
transition: font-size 2500ms;
transition: all 2500ms;
}
.box {
transition: all 2500ms ease-out
}
delay
5-1. n초 후에 변화 시작
여러 요소를 각각에 맞춰 변화시키기
6-1. font-size는 1초 동안 변화
6-2. background-color는 1초후에 2초동안 cubic-bezier에 맞춰 변화
.box {
transition: font-size 1000ms ease-out,
background-color 2000ms cubic-bezier(.08, .57, .83, .67) 1000ms
animation-name duration timing-function
.box {
animation-name: move-box;
animation-duration: 2000ms;
animation-timing-function: ease-in-out;
animation-delay: 1000ms;
animation-iteration-count: 3;
}
@keyframes move-box {
from {
// 변화해야하는 속성 작성
top: 0;
background-color: #0066ff;
}
to {
top: 200px;
background-color: #ff4949;
}
}
@keyframes name {
0% {
}
50% {
}
100% {
}
}
자식이 부모의 width/height를 넘었을 때 처리하는 법
요소를 2/3차원 공간에서 변형하는 것.
transform으로 위치나 크기를 변경해도 기존의 위치와 크기는 기억된다.