반응형
폰트 관련 속성
- font : 속성
- font-family : 폰트 종류
- font-size : 폰트 크기
- font-style : 폰트 형태
- font-variant : 폰트 변형
- font-weight : 폰트 두께
변환 관련 속성
- transform : 변환
- transform-origin : 변환 중심
- transform-style : 변환 형태
- perspective : 투시 수치
- perspective-origin : 투시 중심
- backface-visibility : 후면 가시성
변형 관련 속성
- transition : 변형
- transition-property : 변형 대상
- transition-duration : 변형 진행 시간
- transitiontiming-function : 변형 수치 변환 함수
- transition-delay : 변형 지연 시간
애니메이션 관련 속성
- animation : 애니메이션
- animation-property : 애니메이션 이름
- animation-duration : 애니메이션 진행 시간
- animation-timing-function : 애니메이션 수치 변환 함수
- animation-delay : 애니메이션 지연 시간
- animation-iteration-count : 애니메이션 반복 횟수
- animation-direction : 애니메이션 방향
- animation-play-state : 애니메이션 진행 상태
배경 속성
- background : 배경
- background-attachment : 배경 부착 방식
- background-color : 배경 색상
- background-image : 배경 이미지
- background-position : 배경 위치
- background-repeat : 배경 반복 형식
- background-clip : 배경 적용 범위
- background-origin : 배경 중심 위치
- background-size : 배경 크기
테두리 속성
- border : 테두리
- border-color : 테두리 색상
- border-style : 테두리 형태
- border-width : 테두리 두께
- border-radius : 테두리 곡률
- border-image : 테두리 이미지
- border-image-outset : 테두리 이미지 표시
- border-image-repeat : 테두리 반복 형식
- border-image-slice : 테두리 이미지 분할 비율
- border-image-source : 테두리 이미지 파일
- border-image-width : 테두리 두께
- outline : 테두리 외곽
- outline-color : 테두리 외곽 색상
- outline-width : 테두리 외각 두께
그림자 속성
- text-shadow : 글자 그림자
- box-shadow : 박스 그림자
박스 관련 속성
- width : 너비
- height : 높이
- margin : 마진
- padding : 패딩
- box-sizing : 크기 지정 방식
가시 속성
- display : 표시 형태
- visibility : 가시성
- opacity : 투명도
- overflow : 내용물이 넘칠 경우의 처리 방식
위치 속성
- position : 위치 지정 방식
- left : 왼쪽
- right : 오른쪽
- top : 위
- bottom : 아래
- z-index : 태그의 스택 순서
- float : 부유 방식
글자 관련 속성
- color : 글씨 색상 지정
- direction : 글자 진행 방향
- letter-spacing : 글자 간격
- line-height : 글자 높이
- text-align : 글자 정렬 방식
- text-decoration : 글자 꾸밈 방식
- text-indent : 글자 들여쓰기 크기
- text-transform : 글자 변환
- vertical-align : 글자 수직 정렬 방식
- white-space : 글자 공백 처리 방식
- text-overflow : 글자가 넘칠 경우의 처리 방식
- word-spacing : 단어 간격
- word-wrap : 단어가 넘칠 경우의 처리 방식
참고
모던 웹 디자인을 위한 HTML5 + CSS3 입문 개정판, 윤인성 지음
반응형