Day 25 - css 애니메이션, js의 속성들

100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자

Day 25 - css 애니메이션, js의 속성들

ksyke 2024. 8. 27. 17:54

css 애니메이션

list를 사용한 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        img{
            height: 100%;
        }
        li{
            display: block;
            width: 100px;
            height: 50px;
            /* background-color:cornflowerblue; */
            text-align: right;
            transition-duration: 3s;
            transition-delay: 0.1s;
            transition-timing-function: ease-out;
        }
        li:visited,li:link{
            color: black;
            text-decoration: none;
        }
        li:hover,li:active{
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>CSS 애니메이션(1)</h1>
    <ul>
       <li><img src="imgs/car.jpg"/></li>
       <li><img src="imgs/car.jpg"/></li>
       <li><img src="imgs/car.jpg"/></li>
       <li><img src="imgs/car.jpg"/></li>
    </ul>
</body>
</html>

img 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        img{
            width: 100px;
            margin-top: 500px;
            animation-name: ani1;
            animation-duration: 3s;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;
            background-color: aqua;
            animation-play-state: paused;
        }
        @keyframes ani1{
            0%{
                margin-top: 0px;
                background-color: aqua;
            }
            50%{
                margin-left: 100px;
            }
            100%{
                margin-top: 500px;
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <img src="imgs/ball.png"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        @media print{
            h1{
                color: red;
            }
        }
        @media screen and (max-width:800px){
            h1{
                color:black;
            }
        }
        @media screen and (min-width:801px) and (max-width:1023px){
            h1{
                color: white;
            }
            body{
                background-color: black;
            }
        }
        @media screen and (min-width: 1024px){
            h1{
                background-image: url(imgs/logo.png);
                width: 141px;
                height: 41px;
                text-indent: -999px;
            }
        }
    </style>
</head>
<body>
    <h1>미디어 쿼리</h1>
</body>
</html>

grid system 사용하기

https://960.gs/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/960.css">
    <style rel="stylesheet" type="text/css">
        div>div+div+div>div>img{
            width: 900px;
        }
    </style>
</head>
<body>
    <div class="container_12">
        <div class="header">
            <div class="grid_10">
                <img src="imgs/logo.png" />
            </div>
            <div class="grid_2">
                <a href="#">login</a> / 
                <a href="#">login</a>
            </div>
            <div cass="clear"></div>
        </div>
        <div id="menu">
            <div class="grid_4">&nbsp;</div>
            <div class="grid_1"><a href="#">Menu</a></div>
            <div class="grid_1"><a href="#">Menu</a></div>
            <div class="grid_1"><a href="#">Menu</a></div>
            <div class="grid_1"><a href="#">Menu</a></div>
            <div class="grid_4">&nbsp;</div>
            <div cass="clear"></div>
        </div>
        <div id="content">
            <div class="grid_12">
                <img src="imgs/img1.jpg"/>
            </div>
            <div cass="clear"></div>
        </div>
        <div id="footer">
            <div class="grid_4"></div>
            <div class="grid_4">
                 <p>Copyright&copy; 2024. All rights reserved.</p>
            </div>
            <div class="grid_4"></div>
            <div cass="clear"></div>
        </div>
    </div>
</body>
</html>

커스텀 grid system 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
            <div class="grid1">1</div>
        </div>
        <div class="row">
            <div class="grid2">2</div>
            <div class="grid2">2</div>
            <div class="grid2">2</div>
            <div class="grid2">2</div>
            <div class="grid2">2</div>
            <div class="grid2">2</div>
        </div>
        <div class="row">
            <div class="grid3">3</div>
            <div class="grid3">3</div>
            <div class="grid3">3</div>
            <div class="grid3">3</div>
        </div>
        <div class="row">
            <div class="grid4">4</div>
            <div class="grid4">4</div>
            <div class="grid4">4</div>
        </div>
        <div class="row">
            <div class="grid5">5</div>
            <div class="grid7">7</div>
        </div>
        <div class="row">
            <div class="grid6">6</div>
            <div class="grid6">6</div>
        </div>
        <div class="row">
            <div class="grid7">7</div>
            <div class="grid5">5</div>
        </div>
        <div class="row">
            <div class="grid8">8</div>
            <div class="grid4">4</div>
        </div>
        <div class="row">
            <div class="grid9">9</div>
            <div class="grid3">3</div>
        </div>
        <div class="row">
            <div class="grid10">10</div>
            <div class="grid2">2</div>
        </div>
        <div class="row">
            <div class="grid11">11</div>
            <div class="grid1">1</div>
        </div>
        <div class="row">
            <div class="grid12">12</div>
        </div>
    </div>
</body>
</html>

1200.css

.container{
    width: 1200px;
    margin: opx auto
}
.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{
    float: left;
}
.grid1{width:100px;}
.grid2{width:200px;}
.grid3{width:300px;}
.grid4{width:400px;}
.grid5{width:500px;}
.grid6{width:600px;}
.grid7{width:700px;}
.grid8{width:800px;}
.grid9{width:900px;}
.grid10{width:1000px;}
.grid11{width:1100px;}
.grid12{width:1200px;}
.row,.clear{
    clear: both;
}

100.css

.container{
    width: 100%;
    margin: 0px auto
}
.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,
.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{
    float: left;
}
.grid1{width:8.333333333%;}
.grid2{width:16.66666667%;}
.grid3{width:25%;}
.grid4{width:33.33333333%;}
.grid5{width:41.66666667%;}
.grid6{width:50%;}
.grid7{width:58.33333333%;}
.grid8{width:66.66666667%;}
.grid9{width:75%;}
.grid10{width:83.33333333%;}
.grid11{width:91.66666667%;}
.grid12{width:100%;}
.row,.clear{
    clear: both;
}

display resolution에 따라 다른 css 부여하기

myGrid.css

@media screen and (max-width:600px) {
    .container{
        width: 100%;
        margin: 0px auto
    }
    .mgrid1,.mgrid2,.mgrid3,.mgrid4,.mgrid5,.mgrid6,
    .mgrid7,.mgrid8,.mgrid9,.mgrid10,.mgrid11,.mgrid12{
        float: left;
    }
    .mgrid1{width:8.333333333%;}
    .mgrid2{width:16.66666666%;}
    .mgrid3{width:25%;}
    .mgrid4{width:33.33333333%;}
    .mgrid5{width:41.66666666%;}
    .mgrid6{width:50%;}
    .mgrid7{width:58.33333333%;}
    .mgrid8{width:66.66666666%;}
    .mgrid9{width:75%;}
    .mgrid10{width:83.33333333%;}
    .mgrid11{width:91.66666666%;}
    .mgrid12{width:100%;}
    .mhide{
        display: none;
    }
    .row,.clear{
        clear: both;
    }
}
@media screen and (min-width:601px) and (max-width:1199px) {
    .container{
        width: 100%;
        margin: 0px auto
    }
    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,
    .grid7,.grid8,.grid9,.grid10,.grid11,.grid12{
        float: left;
    }
    .grid1{width:8.333333333%;}
    .grid2{width:16.66666666%;}
    .grid3{width:25%;}
    .grid4{width:33.33333333%;}
    .grid5{width:41.66666666%;}
    .grid6{width:50%;}
    .grid7{width:58.33333333%;}
    .grid8{width:66.66666666%;}
    .grid9{width:75%;}
    .grid10{width:83.33333333%;}
    .grid11{width:91.66666666%;}
    .grid12{width:100%;}
    .row,.clear{
        clear: both;
    }
}
@media screen and (min-width:1200px) {
    .container{
        width: 1200px;
        margin: opx auto
    }
    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{
        float: left;
    }
    .grid1{width:100px;}
    .grid2{width:200px;}
    .grid3{width:300px;}
    .grid4{width:400px;}
    .grid5{width:500px;}
    .grid6{width:600px;}
    .grid7{width:700px;}
    .grid8{width:800px;}
    .grid9{width:900px;}
    .grid10{width:1000px;}
    .grid11{width:1100px;}
    .grid12{width:1200px;}
    .row,.clear{
        clear: both;
    }
}

java script 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/test01.js"></script>
    <script type="text/javascript">
        //document.write("hello world");
        console.log("test")
    </script>
</head>
<body>

</body>
</html>

변수의 사용

javascript의 최상위 객체는 window이기 때문에 모든 변수는 초기화나 선언이 필요 없이 생성될 수 있다.
- 모든 변수는 window 객체의 key와 value값으로 만들어지기 때문.

var a,b,c,d;
a=1234;
b=3.14;
c="문자";
d=true;
console.log(a+1,b+0.1,c+1,d);
console.log(typeof a); // number
console.log(typeof b); // number
console.log(typeof c); // String
console.log(typeof d); // boolean
a='a"b"c';
b='d"e"f';
console.log(a, b); // a"b"c d"e"f
console.log(a.length); // 5
console.log(a+b); // a"b"cd"e"f
console.log(a.concat(b)); // a"b"cd"e"f
console.log(a.substring(1,4)); // (startIndex, endIndex) "b"
console.log(a.substr(1,3)) // (startIndex,count) "b"
console.log(a.indexOf('"')); // 1
console.log(a.charAt(1)); // "
console.log(a.replace('"','#')); // a#b"c
console.log(a.replaceAll('"','#')); // a#b#c

a=true;
b=false;
console.log(a==b); // false
console.log(5>3); // true
console.log(5<3); // false
console.log(5==3); // false
console.log(5===3); // false

// 연산의 우선순위 () > ++ -- > % * > + -
a=1000;
b=100;
console.log(a+b); // 1100
c='1000';
console.log(c+b); // 1000100
console.log(c-b); // 900
console.log(c*b); // 100000
d='1000원'; // parseInt시 첫 문자 전까지만 parseInt가 수행된다.
console.log(parseInt(d)+b); // 1100
console.log(parseInt(d)-b); // 900
console.log(parseInt(d)*b); // 100000

var msg1="javascript";
var msg2="javascript";
console.log(msg1==msg2); // true
msg1=new String("javascript");
msg2=new String("javascript");
console.log(msg1==msg2); // false

console.log(1234=='1234'); // true
console.log(1234==='1234'); // false// ==, typeof 비교를 같이 하는 연산자 

console.log(1234!='1234'); // false
console.log(1234!=='1234'); // true

// number type

console.log(typeof 1234); // int (4byte)
console.log(typeof 3.14); // float (4byte)
console.log(3.14+1);
var a = new Number(3);
var b = new Number(3);
console.log(a==b); // false
console.log(a+1==b+1); // true

// 문자열

var msg1 = "abcdefg";
var msg2 = msg1.slice(2,4);
console.log(msg2); // cd
var msg3=new String(msg1);
console.log(msg3); // String {'abcdefg'}
console.log(msg1===msg3); // false
console.log(typeof msg3); // object

// boolean
var boo=new Boolean(true);
console.log(boo); // Boolean {true}
console.log(true==boo); // true
console.log(true===boo); // false
console.log(typeof boo); // object

var arr1=[1, 3, 5, 7];
arr1[5] = 9;
console.log(arr1); // (6) [1, 3, 5, 7, empty, 9]
var arr2=new Array(3);
console.log(arr2); // [empty × 3]
arr2.push('item4');
arr2.push('item5');
arr2.push('item6');
// console.log(arr2.pop()); // 뒤에 수부터 나옴
// console.log(arr2.pop()); 
// console.log(arr2.pop());
arr2.unshift('item3');
arr2.unshift('item2');
arr2.unshift('item1');
// console.log(arr2.shift()); // 제일 마지막에 넣은 수부터 나옴
// console.log(arr2.shift()); // 
// console.log(arr2.shift()); // 
// for(var i=0;i<arr2.length;i++){
//     console.log(arr2[i]);
//  }
// while(arr2.length){
//     console.log(arr2.pop());
// }
for(var i in arr2){
    console.log(i);
}
for(var i of arr2){
    console.log(i);
}

var obj1=new Object();
console.log(obj1); // {}
obj1['key1']='val1';
obj1['key2']='val2';
obj1['key3']='val2';
console.log(obj1); // {key1: 'val1', key2: 'val2', key3: 'val2'}
var obj2={1:'val0','key1':'val1','key2':'val2'};
console.log(obj2.key1);
console.log(obj2[1]);

제어문

var a=5; // true
a='5'; // true
a=''; // false
a=0; // false
a='admin'; // true
if(a){
    console.log('참입니다.');
}else{
    console.log('거짓입니다.');
}

console.log(false==0); // true
console.log(false==0.0); // true
console.log(false==''); // true
console.log(true==1); // true
console.log(true==1.0); // true
console.log(true==1234); // false
console.log(true==3.14); // false
console.log(true=='abc'); // false

a='2';
switch(a){
    case '2':console.log(2); break;
    case 1:console.log(1); break;
    case 5-5:console.log(0); break;
    case true:console.log(-1); break;
    default:
        console.log('nan')
        break;
}

for(var i=0; i<10; i++){
    console.log(i);
}

var cnt=5;
while(cnt--){
    console.log(cnt);
}

var arr1=[1, 3, 5, 7, 9];
for(var i=0; i<arr1.length;i++){
    console.log(arr1[i]);
}
console.log(typeof arr1); // object

arr1[5] = 11; // js는 동적할당이 가능하다. 
console.log(arr1); // (6) [1, 3, 5, 7, 9, 11]

함수

function func01(){
    console.log('func01 run...');
}
func01();

var func1=function(){
                console.log('func1 run...');
            }
console.log(typeof func1); // function
func1();

var func2=()=>console.log('func02 run...');
func2();

var func3=a=>console.log(a+' func03 run...');
func3('anonymous'); // anonymous func03 run...

function func4(a){
    console.log('args1 = '+a);
}
func4('argument 1'); // args1 = argument 1

function func5(a,b){
    console.log('args2 = '+a+', '+b);
}
func5('argument a','argument b'); // args2 = argument a, argument b

function func6(){
    return 'f6'
}

var msg=func6();
console.log(msg);

var msg2=func1(); // return 타입이 없는 함수이기 때문
console.log(msg2); // undefined
console.log(typeof msg2); // undefined

func4(); // args1 = undefined
func5(1111); // args2 = 1111, undefined

function func7(){
    console.log('call',arguments);
    return 'f7';
}
func7(); // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
func7('srg'); // Arguments ['srg', callee: ƒ, Symbol(Symbol.iterator): ƒ]

function func8(){
    for(var ele of arguments){
        console.log(ele);
    }
    return 'f8';
}
func8(1111, 2222);
func8(1111, 2222, 'item3', 'item4', true);

// callback 함수
function func10(a){
    console.log('before...');
    a();
    console.log('after...');
}
func10(func1); 

func10(function(){console.log('방금 만든 함수');});

var arr1=[34, 21, 1, 14, 26, 43];

console.log(arr1.sort(function(a,b){return 1;})); // [34, 21, 1, 14, 26, 43]
console.log(arr1.sort(function(a,b){return -1;})); // [43, 26, 14, 1, 21, 34]

console.log(arr1.sort()); // [1, 14, 21, 26, 34, 43]
console.log(arr1.sort(function(a,b){return a-b})); // [1, 14, 21, 26, 34, 43]
console.log(arr1.sort(function(a,b){return b-a})); // [43, 34, 26, 21, 14, 1]

console.log(arr1.reverse()); // [1, 14, 21, 26, 34, 43]

function func11(){
    var f1=function(){console.log('inner...');};
    return f1;
}

var f1 = func11();
f1(); // inner...

익명 함수

var func1=function(){
                console.log('func1 run...');
            }
console.log(typeof func1); // function
func1();

지역 변수와 전역 변수

// 클로저
function func12(){
    var a = 1111; // 지역 변수
}
// 클로저로 인해 변수 a는 func12밖에서 호출될 수 없다.

var b = 2222;
function func13(b){
    console.log(b, window.b);
}
func13(3333); // 3333 2222

var obj={'key1':func14};
function func14(b){
    console.log(b, window.b,this);
}
func14(3333); // 3333 2222 (함수)Window {window: Window, self: Window, document: document, name: '', location: Location, …}
obj.key1(1111); // 1111 2222 (메서드){key1: ƒ}

'100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글

Day 30 - jQuery로 애니메이션 만들기, jQuery UI, bxSlider, ajax를 통한 비동기 통신 (1)	2024.09.03
Day 26 - js 속성 이어서, js로 브라우저 제어하기 (0)	2024.08.28
Day 24 - html5, css (0)	2024.08.26
Day 23 - SQL 문법 pt.2 (제약 조건) 그리고 JAVA web 페이지 작성 (0)	2024.08.23
Day 22 - Java sql 서버를 배포하기 / SQL 함수 정리 (1)	2024.08.22

현재글Day 25 - css 애니메이션, js의 속성들

ksyke 님의 블로그

ksyke 님의 블로그 입니다.

오블완, 티스토리챌린지,

Today :
Yesterday :

ksyke 님의 블로그

Day 25 - css 애니메이션, js의 속성들

css 애니메이션

list를 사용한 애니메이션

img 애니메이션

grid system 사용하기

커스텀 grid system 만들기

1200.css

100.css

display resolution에 따라 다른 css 부여하기

myGrid.css

java script 사용하기

변수의 사용

제어문

함수

익명 함수

지역 변수와 전역 변수

'100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글

'100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자'의 다른글

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				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

Day 25 - css 애니메이션, js의 속성들

css 애니메이션

list를 사용한 애니메이션

img 애니메이션

grid system 사용하기

커스텀 grid system 만들기

1200.css

100.css

display resolution에 따라 다른 css 부여하기

myGrid.css

java script 사용하기

변수의 사용

제어문

함수

익명 함수

지역 변수와 전역 변수

'100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글

'100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자'의 다른글

관련글

티스토리툴바