그냥 그래
CSS를 이용한 Loader 만들기 본문
CSS를 이용한 스타일은 어떤식으로든 포토샵 처럼 결과물이 다 다르기 마련 입니다.
최대한 창의적으로 사용 하는 것이 가장 중요하고, 어떻게 응용하느냐에 따라 다른 태그와 혼합 되었을 때
Crush 없이 정상적으로 작동이 되는지가 중요한 핵심 포인트가 되겠습니다.
예를 들어 화면 정중앙에 align 시키는 작업도, 결과는 같지만 코드는 무궁무진하게 짤 수 있습니다.
상황에 맞추어서 코딩을 해야하고, 확장성, 웹 표준성을 준수하는지 여부에 따라 좋은 코드인지 아닌지 파악할 수 있습니다.
이번 포스팅에 이용되는 코드 편집 툴은 Brackets를 이용했으며, 해당 HTML 및 CSS 소스는 자유롭게 이용해도 상관 없습니다.
다만, 유의해야 할 점은 이 포스팅에 들어가는 코드들은 모두 이렇게 사용할 수 있다고 보여주고 스타일을 익히기 위함이지,
실 사용시엔 커스터마이징이 필요하다는걸 유의 바랍니다.
기초 속성 강좌 및 기본적인 부분들 부터 설명하려 했으나 마침 진행하고 있는 Project 작업 도중 해당 포스트를 올리면
좋겠다 싶어서 포스팅하게 되었습니다.
사실 Loader 자체는 어려울게 없다.
CSS animation을 만들려면 keyframe에 대해 어느정도 이해 지식만 있으면 충분히 커스터 마이징이 가능하여
딱히 설명을 해줄 부분은 없는 것 같습니다. 차후의 강좌에 keyframe에 대한 부분도 포스팅 할 예정입니다.
직접 코드를 입력하여 실험해보는 것이 가장 알맞고 이해하기 조금 더 쉽습니다.
CSS 속성과 HTML을 할 줄 안다면 매우 이해하기 쉬운 코딩이 될 것 입니다.
<html>
<head>
<!-- meta tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="loader.css">
<link rel="stylesheet" type="text/css" href="align.css">
<style>
body {
background-color: coral;
}
</style>
</head>
<body>
<div class="center_main">
<div class="outer">
<div class="inner">
<div class="centered">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
코드만 작성해도 동작이 되지만 이번 포스팅엔 화면 중앙 정렬을 해주는 작업이 <html> 태그와 <body> 태그가 들어가고
Loader에 대한 class 말고도 정렬을 위한 class가 들어가기에 html 소스도 같이 기재합니다.
주황색으로 칠해진 부분이 정렬을 위한 태그이며, 연두와 Bold가 적용되어 있는 코드가 loader 입니다.
간단하게 표현하기 위하여 외부 스타일 시트를 불러오게끔 하였습니다.
2-1. CSS *align.css
.html, body {
width: 100%;
height: 100%;
}
.center_main {
width: 90%;
height: 70%;
margin: 4px auto;
}
.outer {
display: table;
width: 100%;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered {
position: relative;
display: inline-block;
width: 70%;
height: 30%;
padding: 1em;
text-align: left;
}
위의 코드는 loader를 화면 정중앙에 배치시키기 위한 코드입니다.
2-2. CSS *loader.css
/* 이것은 Loader CSS 외부 시트 입니다. */
.spinner {
margin: 100px auto;
width: 100px;
height: 100px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2.0s infinite linear;
animation: sk-rotate 2.0s infinite linear;
}
.dot1, .dot2 {
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
top: 0;
background-color: rgb(255,255,255);
border-radius: 100%;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
여기까지 입니다.
하나의 시트에 묶어서 사용도 가능합니다.
샘플은 여기를 클릭해주세요.
감사합니다.
'Web > CSS3' 카테고리의 다른 글
| CSS 기초부터 활용하기 3편 (색상 편) (0) | 2017.08.24 |
|---|---|
| CSS3 그라디언트 배경화면 만들기 (0) | 2017.08.20 |
| CSS 기초부터 활용하기 2편 (스타일 시트 편) (0) | 2017.08.15 |
| CSS 기초부터 활용까지 1편 (0) | 2017.08.14 |
| CSS 웹 폰트 적용시키기 (0) | 2017.08.12 |
