1. 하나의 스타일에서 다른 스타일로 점차적으로 변환되는 것 2. 애니메이션 효과 주기의 첫 단계 : @keyframes 지정 keyframe(키프레임) 이란? 특정 시간에 요소가 가지는 스타일 3. css 속성 @keyframes - animation-name : keyframes의 이름을 넣어줌 - animation-duration : 애니메이션 효과를 얼마나 유지할 것인가 - animation-delay : 애니메이션 효과를 언제 시작할 것인가 - animation-iteration-count : 애니메이션 효과를 반복할 횟수(infinite는 무한대 반복) - animation-direction : 애니메이션 효과가 나오는 방식 > 속성 값 : reverse, normal, alternate, a..

1. 전환? 주어진 기간 동안 속성값을 부드럽게 변경 2. 전환 속성들 - transition 속성(약식) - transition-delay 속성 - 전환 작업 시작 시간 설정 - transition-duration 속성 - 전환 시간 설정 - transition-property 속성 - 전환 속성 설정 - transition-timing-function 속성 - 속도 곡선 설정(전환 속도) > ease 기본값(천천히 시작 빨라졌다가 천천히 종료) > linear(곡선) 처음부터 끝까지 일정한 속도(등속) > ease-in 천천히 시작 > ease-out 천천히 종료 > ease-in-out 천천히 시작해서 천천히 종료 3. 전환 효과를 만들려면 2가지 지정 1) 효과를 추가하려는 CSS 속성 2) 효과..

[2D 변환 작업 관련 속성 값] 1. 요소를 이동하는 작업 - translate(x좌표, y좌표) 속성 값 2. 요소를 회전시키는 작업 - rotate(n deg) 속성 값 > 시계 방향(+), 반시계 방향(-) 회전 가능 3. 요소 크기를 조정하는 작업(너비, 높이) - scale(), scaleX(), scaleY() 속성 값 너비 높이 4. 요소의 기울기를 주는 작업 - skew(), skewX(), skewY() 속성 값 요소를 지정된 각도만큼 x축, y축으로 기울인다. 5. 이동/회전/크기/기울기를 동시에 주는 작업 - matrix() 속성 값 [3D 변환 작업 관련 속성 값] 1. 요소 이동 - translateX(), translateY(), translateZ(), tanslate3d(x..

[그라데이션 효과] 1. 선형 그라데이션( linear-gradient(그라데이션 방향, 최소한 두 개의 색상 지정) ) > 지정된 색상 간에 부드러운 전환(빨강->노랑) > 방향: top->bottom(to bottom), to right, to left, to top 또는 각도 2. 방사형 그라데이션( radial-gradient(모양크기, 색상, 색상) ) > 중심으로부터 부드러운 전환 3. 원추형 그라데이션 [적용 결과]

1. background-size 속성 [속성 값] contain : 가능한 크게 배경 이미지를 확대 cover : 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리 [코드 예시] I am Sam Lorem ipsum dolor sit. Hire me Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam placeat omnis asperiores incidunt iste molestias! [적용 결과] 2. background-origin 속성 - background-position : 배경 이미지의 위치를 지정하는 속성 (left top, center middle = x,y 좌표 값을 지정해서 위치 지정) ..

[적용 결과]

[css 특수성(특이성)?] - 동일한 요소를 가리키는 css 규칙이 두 개 이상 있을 경우 어떤 css 규칙을 요소에 적용할 것인지를 나타내는 것 - 점수로 순위가 정해진다. [특이성 수준을 나타내는 점수] 1. 인라인 css 적용 : 1000점(인라인 스타일 적용 방식이 항상 가장 우선순위가 높다.) ex) h1 style="color:red" 1. id 속성 : 100점 #mydiv{} 2. 태그명, 의사요소 : 1점 3. 클래스명, 의사클래스, 속성선택자 : 10점 4. * : 0점 [!important 속성 값] - !important 속성 값을 주면 특수성 규칙에 예외 발생. 인라인 스타일 시트 적용도 무시하고 가장 먼저 적용이 되어진다. [적용결과]

- 이미지 스트라이트란? 단일 이미지에 넣은 이미지 모음 - 왜 사용하는가? 이미지가 많은 웹페이지는 로드할 때 시간이 오래 걸린다.(성능 저하) = 서버가 이미지를 가지러 여러 번 요청을 하게 됨 아래와 같은 이미지가 이미지 스트라이프

1. 반응형 웹 + 이미지 갤러리 css 반응형 웹 + 이미지 갤러리 Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quisquam accusamus laborum iure omnis repudiandae explicabo culpa deleniti sapiente amet. Sit laudantium iusto ullam nulla nemo illo consectetur nihil ..