[1주차] CSS 애니메이션, 반응형 웹

이번 글을 마지막으로 CSS가 끝나고 Git으로 돌아와야 하는데 벌써부터 걱정이 많네요😂😂 우선 마무리를 해보겠습니다!

CSS 애니메이션

CSS는 애니메이션 효과를 적용하는 기능을 제공합니다. 콘텐츠나 요소들을 더욱 생동감 있게 만들 수 있습니다.

/* 애니메이션 속성 */
.animation {
	animation-name: changeWidth; /* 애니메이션 이름(임의로 작성 가능) */
	animation-delay: 3s; /* 애니메이션 시작까지의 지연 시간 */
	animation-direction: alternate; /* 애니메이션 진행 방향 */
	animation-duration: 3s; /* 애니메이션 완료하는데 걸리는 시간 */
	animation-fill-mode: forwards; /* 애니메이션 끝나고 상태 유지 */
	animation-iteration-count: infinite; /* 애니메이션 반복 횟수 */
	animation-timing-function: ease-in-out; /* 애니메이션 효과의 속도*/
}

@keyframes changeWidth {
	from { width: 300px; }
	to { width: 600px; }
}

• 속성 값을 한 줄로 작성할 때, 나머지 속성 값의 순서는 상관 없으나 먼저 나오는 숫자가 duration, 나중에 나오는 숫자가 delay (숫자가 하나만 있을 경우 duration)

CSS Transition

CSS의 transition은 요소의 스타일 변화를 부드럽게 처리하는 기능입니다. color, transform, opacity 등 다양한 속성에 적용하여 요소의 스타일 변화를 부드럽게 처리할 수 있습니다.

/*transition 속성*/
.tansition {
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;

transition: background-color 2s ease-in-out 1s;
}
.transition:hover { background-color: red; }

• hover : css에서 미리 만들어 놓은 클래스로, ‘마우스를 올렸을 때’라는 조건
• .transition:hover 띄어쓰기 없이 작성

CSS Transform

CSS의 transform은 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용됩니다.

• .rotate(angle) : 입력한 각도만큼 회전하며, 음수도 입력 가능
• .scale(x, y) : 숫자는 비율을 의미하며 width를 x배, heigth를 y배 확대
• .skew(x, y) : 입력한 각도만큼 x축, y축을 기준으로 비틂
• .translate(x, y) : 선택한 오브젝트의 좌표 변경

반응형 웹

반응형 웹은 다양한 기기에서 웹사이트를 이용할 때, 화면의 크기에 맞추어 적절하게 조정되는 웹사이트를 말합니다.

미디어 쿼리(Media Queries)

미디어 쿼리는 PC뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문입니다.

.media {
	width: 500px;
	heigt: 500px;
	background-color: red;
}

/* 미디어 쿼리 */
@media (min-width: 320px) and (max-width: 600px) {
	.media {
		width: 300px;
		heigth: 300px;
		background-color: yellow;
}

📍CSS - @-rules, transition

/* 일반적인 구조 */
@IDENTIFIER (RULE) ; /* Rule(규칙)이 뒤따름 */

@charset "utf-8"; /* utf-8과 호환되는 캐릭터셋을 지원해라! 라는 규칙을 설정 */

@media ,@keyframes ,@charset ,@import 사용되었다면 어떠한 규칙인가 유추할 수 있음.

뷰포트(Viewport)

뷰포트는 사용자가 웹사이트를 볼 때 실제로 보이는 영역을 말합니다. 반응형 웹을 구현할 때는 뷰포트의 크기에 맞춰서 스타일을 조정해야 합니다.

<!-- 뷰포트 설정 방법-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

width=device-width : 뷰포트의 너비를 기기의 너비와 같게 설정

initial-scale=1.0 : 초기 화면 배율 1로 설정

유동 그리드(Grid)

유동 그리드는 요소의 크기와 위치를 유연하게 조정하여 화면 크기에 맞춰 배치하는 방법입니다. 2차원(행과 열)의 레이아웃 시스템을 제공합니다.

/* 유동 그리드 */
.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
}

Container와 Item이라는 두 가지 개념으로 구분되어 있습니다. container는 items를 감싸는 부모 요소이며, 그 안에서 각 item을 배치할 수 있습니다.

• grid-template-rows/columns : 속성을 이용하여 행/열의 크기를 정의
• repeat(auto-fit, minmax(200px, 1fr)) : 자동으로 개수를 조정하면서 최소 너비 200px 유지
• grid-gap : 요소 간의 간격 조정

🎮추천 게임

Grid Garden

Grid Garden

📝추천 과제 : 계산기 숫자패드 그리드 만들어보기

추천 아티클 : Heropy tech(gird, flex) 참고