drexqq

Animation animation: {name} {duration} {timing-function} {delay} {iteration} {direction} {fill-mode} {play-state} Property Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-iteration 애니메이션이 반복되는 횟수를 설정합니다. animation-direction 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션이 시간되기 전이나 끝나고 어떤 값을 적용할 ..

Transform 변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다. 이동(translate) 확대(scale) 회전(rotate) 기울이기(skew) 2d변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(ax,y,z,angle) x축 변환 translateX(x) scaleX(x) rotateX(angle) skewX(angle) y축 변환 translateY(y) ..

Background Blend mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를/ 통해 색상을 ..

Background Reference Property Sample Description background background : #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image : url(이미지 경로) 배경 이미지 설정 background-attachment background-attachment : fixed 배경 고정 여부 설정 background-color background-color : #fff 배경색 설정 background-position background-position : top 배경 이미지 위치 설정 background-origin background-origin : co..

Box-Shadow Reference box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; Property Description h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. Box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 {box-shadow: ..

margin - 박스 요소의 바깥쪽 여백을 설정합니다. 사용법 margin-top : 10px; - 요소의 위 바깥쪽 여백을 설정합니다. margin-right : 11px; - 요소의 오른쪽 바깥쪽 여백을 설정합니다. margin-bottom : 12px; - 요소의 아래 바깥쪽 여백을 설정합니다. margin-left : 13px; - 요소의 왼쪽 바깥쪽 여백을 설정합니다. margin : 10px 11px 12px 13px; - 위쪽/오른쪽/아래/왼쪽(시계방향) margin : 10px 11px 12px; - 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px) margin : 10px 11px; - 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px) margin : 10px; - 위쪽,오른쪽,아래,왼..

CSS 선언 방법 CSS 선언 방법에는 3가지가 있습니다. External Style Sheet : css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. Internal Style Sheet : HTML 문서 안의 안에 CSS 코드를 넣는 방법입니다. Inline Styles : HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.

CSS 색상 CSS 색상 표현 방법은 7가지가 있습니다. #RRGGBB 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정한다. 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지의 색을 사용할 수 있다. #RGB 빨강 초록, 파랑의 강도를 16진수 한 자리로 지정한다. 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않는다. rgb(r, g, b) 빨강, 초록, 파랑의 강도를 0~255 범위의 정수로 지정한다. rgba(r, g, b, a) rgb값 외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정한다. 0은 투명한 색이며 1은 불투명, 0.5는 반투명이다. hsl(h, s, l) 색상, 채도, 명도로 색상을 지정한다. 채도는 0~365 사이의 각도이고 명도, 채도는 ..

CSS 단위 CSS 단위 표현 방법은 9가지가 있습니다. % - 기본 크기에 대한 비율 em - 글꼴 높이의 배수 ex - 소문자 높이의 배수 px - 픽셀 / 단위를 생략할 때의 기본값 pt - 포인트 pc - 파이카 (12포인트와 같음) in - 인치 cm - 센티미터 mm - 밀리미터

CSS 선택자 선택자를 통하여 요소를 선택하고 속성을 줄 수 있습니다. id 선택자 하나의 태그만 식별하기 위한 선택자입니다. 하나의 태그에 하나만 사용할 수 있습니다. "#"으로 표시합니다. class 선택자 여러개의 태그를 식별하기 위한 선태자입니다. 하나의 태그에 여러개를 사용할 수 있습니다. "."으로 표시합니다. 속성 선택자 [ ] 괄호안의 속성 이름과 값 사이에 다양한 연산자를 사용하여 속성값의 일부만 평가하여 조건에 맞는 엘리먼트를 선택한다. 선택자설명 A[속성^=값] 특정 값으로 시작한다. A[속성$^=값] 특정 값으로 끝난다. A[속성*=값] 특정값을 부분 문자열로 포함한다. A[속성~=값] 특정 값을 단어로 포함한다. A[속성|=값] 특정 값을 단어로 포함한다. ~=에 비해서는 하이픈을..