39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

투케이2K

39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시 본문

FrontEnd

39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시

투케이2K 2021. 6. 28. 08:56

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

[소스 코드]

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정
		12. display : 해당 div 영역을 표시 여부 설정		
		13. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정
		14. table-layout : 표 크기 고정 실시
		15. font-size : 텍스트 사이즈 지정
		16. white-space : 스페이스와 탭, 줄바꿈, 자동 줄바꿈 처리 설정	
		17. text-overflow : 텍스트 초과 시 설정
		18. box shadow : 레이아웃에 그림자 효과를 부여합니다
		19. opacity : 레이아웃 불투명도 설정합니다	
		20. keyframes : css 속성을 사용해 애니메이션을 동작할 수 있습니다
		*/
				    			 	
    	

		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}
		
		

		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}



		.container_common{
			width : 50%;
			height : 10%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : none;

			/* box shadow 그림자 설정 */
			box-shadow: 5px 5px 5px 5px #000000; 

			/* 브라우저에서 화면 터치 시 파란박스 하이라이트 제거 */
			-webkit-tap-highlight-color : rgba(0,0,0,0);

			/* div 테두리 영역 둥글게 설정 */
			border-radius : 20px;
			
			/* display 설정 : 텍스트 수직 정렬 */
			display : table; 
			
			/* 텍스트 내용 길면 숨김 처리 하기 위함 */
			table-layout: fixed;

			/* 불투명도 설정 */
			opacity: 1;
		}
		.txt_common{
			/* 텍스트 가로 정렬 지정 */
			text-align : center; 
			
			/* 텍스트 색상 지정 */
			color : #000000;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 150%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
			
			/* 텍스트 내용 길면 숨김 처리*/
			overflow : hidden;
			text-overflow : ellipsis;
			white-space : nowrap;
			
			/* a 태그 밑줄 없애기 */
			text-decoration : none;		
		}
        
        

		/* 컨테이너 배치 정렬 실시 */
		#one_container {						
			float : top;
			position : relative; 
			top : 15%;
			left : 0%;
		}
		/* keyframe 애니메이션 함수 */
		@keyframes one_animation {
			/* 0%는 시작 부분 */
			/* 50%는 중간 부분 */
			/* 100%는 마지막 부분 */
			/* 100% 까지 수행 완료 후 다시 원본 스타일로 복귀 */			
			100% { background-color: #00ff00; }
		}
		
		

		/* 컨테이너 배치 정렬 실시 */
		#two_container {						       								
			float : top;
			position : relative; 
			top : 20%;
			left : 0%;
		}
		/* keyframe 애니메이션 함수 */
		@keyframes two_animation {
			/* 0%는 시작 부분 */
			/* 50%는 중간 부분 */
			/* 100%는 마지막 부분 */
			/* 100% 까지 수행 완료 후 다시 원본 스타일로 복귀 */			
			100% { background-color: #ff00ff; }
		}
		
		

		/* 컨테이너 배치 정렬 실시 */
		#three_container {						
			float : top;
			position : relative; 
			top : 25%;
			left : 0%;
		}
		/* keyframe 애니메이션 함수 */
		@keyframes three_beafore_animation {
			/* 0%는 시작 부분 */
			/* 50%는 중간 부분 */
			/* 100%는 마지막 부분 */
			/* 100% 까지 수행 완료 후 다시 원본 스타일로 복귀 */			
			100% { background-color: #0000ff; }
		}
		/* keyframe 애니메이션 함수 */
		@keyframes three_after_animation {
			/* 0%는 시작 부분 */
			/* 50%는 중간 부분 */
			/* 100%는 마지막 부분 */
			/* 100% 까지 수행 완료 후 다시 원본 스타일로 복귀 */
			0% { background-color: #ff0000; }			
			50% { background-color: #00ff00; }			
			100% { background-color: #000000; }
		}
		
		

		/* 컨테이너 배치 정렬 실시 */
		#four_container {						
			float : top;
			position : relative; 
			top : 30%;
			left : 0%;
		}
		/* keyframe 애니메이션 함수 */
		@keyframes four_animation {
			/* 0%는 시작 부분 */
			/* 50%는 중간 부분 */
			/* 100%는 마지막 부분 */
			/* 100% 까지 수행 완료 후 다시 원본 스타일로 복귀 */
			0% { opacity: 0; }			
			50% { opacity: 0.5; }			
			100% { opacity: 1; }
		}
		      				                          
    </style>

</head>


<body>

<!-- 레이아웃 : 애니메이션 1회 실행 -->
<div id = "one_container" class="container_common" style="animation: one_animation 3s;">
	<p id = "a_one" class="txt_common">one</p>
</div>


<!-- 레이아웃 : 애니메이션 무한 반복 -->
<div id = "two_container" class="container_common" style="animation: two_animation infinite 3s;">
	<p id = "a_two" class="txt_common">two</p>
</div>


<!-- 레이아웃 : 다중 애니메이션 : three_beafore_animation 3초동안 실행 후 > 3초간 대기 후 > three_after_animation 5초간 수행 -->
<div id = "three_container" class="container_common" style="animation: three_beafore_animation 3s, 5s three_after_animation 3s;">
	<p id = "a_three" class="txt_common">three</p>
</div>


<!-- 레이아웃 : 애니메이션 : 서서히 나타남 -->
<div id = "four_container" class="container_common" style="animation: four_animation infinite 3s;">
	<p id = "a_four" class="txt_common">four</p>
</div>

</body>

</html>

/* =========================== */

[결과 출력]

/* =========================== */

[요약 설명]

[CSS 요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)

9. float : 정렬 기준 설정

10. div : 레이아웃 표시 블록

11. position : 레이아웃 위치 정렬 설정

12. display : 해당 div 영역을 표시 여부 설정

13. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정

14. table-layout : 표 크기 고정 실시

15. font-size : 텍스트 사이즈 지정

16. white-space : 스페이스와 탭, 줄바꿈, 자동 줄바꿈 처리 설정

17. text-overflow : 텍스트 초과 시 설정

18. box shadow : 레이아웃에 그림자 효과를 부여합니다

19. opacity : 레이아웃 불투명도 설정합니다

20. keyframes : css 속성을 사용해 애니메이션을 동작할 수 있습니다

/* =========================== */

[파일 첨부]

a_test_default.html

0.01MB

/* =========================== */

저작자표시

'FrontEnd' 카테고리의 다른 글

41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시 (0)	2021.07.02
40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법 (0)	2021.07.01
38. (html/css/javascript/jquery) 반응형 tab 탭 화면 기능 구현 - display 사용 (0)	2021.06.25
37. (html/css/javascript/jquery) class 클래스 설명 및 input text 기본 구현, value 변경 및 확인 (0)	2021.06.22
36. (html/css/javascript/jquery) box shadow 사용해 div 영역에 그림자 표시 수행 실시 (0)	2021.06.22

'FrontEnd' Related Articles

Comments

투케이2K

39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시 본문

39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시

'FrontEnd' 카테고리의 다른 글

티스토리툴바