Style

글자관련

color

정의

• 글자 색을 지정하는 속성

속성

• rgb(빨강 (Red), 초록(Green), 파랑(Blue))
  hsl(색상(Hue), 채도(Saturation), 명도(Lightness))
• a(Alpha)는 투명도 (0 : 투명 , 1 : 불투명)
• transparent : 투명색

형태

color : 색상명(영문) | 16진수 숫자 RGB(#fff <- #ffffff)
        | rgb(255, 255, 255) | rgba(255, 255, 255, 1)
        | hsl(360, 100, 100) | hsla(360, 100, 100, 1)

text-decoration

정의

• 텍스트에 줄을 긋는 속성

속성

• underline : 아랫줄 긋기
• line-through : 중간줄 긋기
• overline : 밑줄 긋기
• none : 줄 제거

형태

text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none;

text-align

정의

• 글자 정렬 (왼쪽, 가운데, 오른쪽, 양쪽)
• inline 상태

속성

• left : 왼쪽 (기본값)
• right : 오른쪽
• center : 가운데
• justify : 양쪽 끝

형태

text-align: left; /*기본값*/
text-align: right;
text-align: center;
text-align: justify;

line-height

정의

• 줄 높이
• 줄 사이 간격 X, 줄 높이 O

속성

• 숫자px : px만큼 줄 높이 지정

형태

line-height: 30px;

letter-spacing

정의

• 글자 사이 간격

속성

• 숫자px : px만큼 글자 사이 간격 지정

형태

letter-spacing: 10px;

text-shadow

정의

• 텍스트에 그림자 효과 추가

속성

• 숫자px 숫자px 색 : 오른쪽px, 아래쪽px, 색
• 숫자px 숫자px 숫자px 색 : 오른쪽px, 아래쪽px, 흐림정도px, 색
• 여러 층으로 중첩 가능
• (음수는 왼쪽, 위쪽)

형태

/* 오른쪽:3px 아래쪽:3px 흰색 그림자 */
text-shadow: 3px 3px white;
/* 오른쪽:5px 아래쪽:5px 5px정도로 흐린 흰색 그림자*/
text-shadow: 5px 5px 5px white;
/* 중첩 */
text-shadow: 0px 0px 4px red,
             0px -5px 4px orange,
             2px -10px 6px magenta,
             -2px -15px 11px blue,
             2px -20px 18px green;

변형관련

transform

정의

• 요소의 형태, 위치, 크기, 방향 등을 변경할 수 있는 속성
• 선택자:hover 등에 이용(마우스 오버 시)

요소

translate

정의

• 요소를 이동

속성
translateX(숫자px) : 요소를 X축으로 숫자px 만큼 이동
translateY(숫자px) : 요소를 Y축으로 숫자px 만큼 이동
translate(숫자px, 숫자px) : 요소를 X축과 Y축으로 숫자px 만큼 이동

형태

transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, -100px);

scale

정의

• 요소의 크기를 조정

속성
scaleX(숫자) : 요소를 숫자 만큼 width 확대
scaleY(숫자) : 요소를 숫자 만큼 height 확대
scale(숫자, 숫자) : 요소를 숫자 만큼 width, height 확대

형태

transform: scaleX(2);
transform: scaleY(2);
transform: scale(2, 2);

rotate

정의

• 요소를 회전

속성
rotate(숫자deg) : 요소를 숫자 도(°) 만큼 회전

형태

transform: rotate(180deg);

transition

정의

• 스타일의 변화가 부드럽게 애니메이션되도록 만들어주는 속성

transition-duration

정의

• 변화에 걸리는 시간
• 단위 : s, ms

형태

transition-duration: 5s;

transition-timing-function

정의

• 속도의 곡선 (느려졌다 빨라졌다 등)

속성
ease (기본값) : 처음과 끝이 부드럽게 변화
linear : 등속
ease-in : 천천히 시작 -> 빠르게 끝
ease-out : 빠르게 시작 -> 천천히 끝
ease-in-out : 천천히 시작 -> 빠르게 진행 -> 천천히 끝
형태

transition-timing-function: ease;

transition-delay

정의

• 변화를 시작하기 전의 대기 시간

형태

transition-delay: 2s;