CSS 속성 및 적용방법
1. CSS 글자 관련 속성
- color: 글자 색상
- font-size: 글자 크기
- font-familiy: 서체
- font-style: 서체 표현방식
- font-weight: 글자 두께
- letter-spacing: 자간
- text-indent: 들여쓰기
- text-align: 정렬
- text-decoration: 장식
- text-transform: 대소문자 지정
- text-shadow: 그림자
2. CSS 박스 관련 속성
- padding: 내부여백
- margin: 외부여백
- width: 너비
- min/max width: 최소/최대 너비
- height: 높이
- border: 테두리
border-style, border-color, border-width
*css border 속기법: solid red 5px;
3. CSS 변형 관련 속성
- translate(x,y) 이동
translate(x), translate(y), translate(z)
- rotate(회전)
rotateX(90deg), rotateY(90deg), rotateZ(90deg)
- skew(x,y) 기울이기
skewX(45deg), skewY(30deg)
- scale(x,y) 크기 조절
scaleX(1.5), scaleY(2)
4. CSS 시간 관련 속성
- transition: 2s;
- transition-duration: 전환시간
- transition-delay: 지연시간
- transition-property: width; 전환효과 요소 지정
- transition-timing-function: ease; 전환속도의 곡선을 지정
ease: 느리다 빠르게
linear: 동일한 속도
ease-in: 느린 시작
ease-out: 느린 마무리
ease-in-out: 느린 시작 끝 중간이 빠름
5. CSS 적용방법
1. 내부 CSS
<head>태그 안에 <style></style>요소 사용.
2. 외부 CSS
CSS파일을 따로 생성 후 <head>태그 안에 <link>요소를 연결하여 사용.
3. 인라인 CSS
요소 안에 스타일 속성을 추가하여 사용.
'코딩 공부' 카테고리의 다른 글
| animation, background 속성 (0) | 2021.01.01 |
|---|---|
| css flex속성 (2) | 2020.12.31 |
댓글